This document discusses automated testing and provides guidance on best practices. It recommends adding test identifiers to elements to simplify locating them, using a directory structure organized by features and actions, and separating test code from application code. Common testing mistakes like failing to test the user experience and not running tests in parallel are also mentioned.

1. Automated Testing
Arranged by Sun (Frontend dev @Wongnai)

2. Planning

3. Coding

4. Testing

5. Testing
•Why Automated Testing
•Specified selector
•Common mistakes

6. Why Automated Testing
start with problems

7. ...
✔ Forget password
✔ Write a review
✔ Signup
✔ Login
...
✔ Change a province
✔ Collection
✔ Article
✔ Listing

8. ✔ Owner can update
✔ Edit user info
✔ Me tab
✔ Challenge
✔ Web-board
✔ Find friend
✔ Check profiles
✔ Follow / Unfollow
✔ Block / Unblock
✔ Message
✔ Feed
✔ Search business
✔ Search chain
✔ Chain landing
✔ Place landing
✔ Logout
✔ Change password
✔ Forget password
✔ Write a review
✔ Signup
✔ Login
✔ Business landing
✔ Been here
✔ Bookmark
✔ Business / Delivery
✔ Map
✔ Phone Call
✔ Business photo
✔ Video
✔ Post Promotion
✔ Promotion on Home
✔ Add photo food
✔ Share photo
✔ Save draft food
✔ Review food
✔ Share review
✔ Buy deal
✔ Redeem deal
✔ Change a province
✔ Collection
✔ Article
✔ Listing
✔ Privilege
✔ Press see all
✔ Add hotel
✔ Search hotel
✔ Hotel
✔ Save draft hotel
✔ Review hotel
✔ Add photo hotel
✔ Book hotel
✔ Edit hotel
✔ Add Attraction
✔ Attractions
✔ Save draft attraction
✔ Review Attraction
✔ Add photo attraction
✔ Edit Attraction
✔ Beauty landing
✔ Save draft beauty
✔ Review beauty
✔ Add photo beauty
✔ Write trip
✔ Search recipe
✔ Recipe landing
✔ Create recipes
✔ Save draft recipes
✔ Publish recipe
✔ Bookmark recipe
✔ Comment & Like Recipe
✔ Comment & Like Homework
✔ Tag recipe
✔ Homework
✔ Cookbooks (Recipe guides)
✔ Brand kitchen
✔ 101 cooking
✔ User Profile
✔ Notification
✔ Celeb chef
✔ Leaderboard
✔ Test coupon
✔ Coupon Section at Home delivery
✔ Search by menu
✔ Home delivery, search business

11. Testing is time consuming

12. Specified selector
Learn more how to catch DOM

13. <form>
<input name="first-name" type="text"/>
<button>Send</button>
<button>Cancel</button>
</form>
index.html
>

14. <form>
<input name="first-name" type="text"/>
<button test-id=“submit-btn">Send</button>
<button>Cancel</button>
</form>
index.html
> $('button[test-id=submit-btn]')

15. <form>
<input name="first-name" type="text"/>
<button test-id="submit-btn">Send</button>
<button test-id="cancel-btn">Cancel</button>
</form>
index.html
> npm i -D test-id—generator

16. <form>
<input name="first-name" type="text"/>
<button test-id="submit-btn">Send</button>
<button test-id="cancel-btn">Cancel</button>
</form>
> feature & testing
1. Separation of concerns

17. document.querySelector(…)
and a little demo

18. 3. xPath is great
2. Test what user see

19. When the automation
can run on production env,
we got »Health check«
✅ Testing Frontend Server

20. Common mistakes
Strategies, failure, & more..

21. 1. Parallel testing

22. 2. Snapshot testing

23. Directory structure

24. import { app } from 'modules/app'
import { expect } from 'modules/assert'
app
.init()
.goto('http://127.0.0.1:5500/index.html')
.type('//*"[@placeholder="username"]', 'username')
.type('//*"[@placeholder="password"]', '1234')
.click('//*"[contains(text(), "Login")]')
app
.type(‘//*"[@placeholder="Specific detail"]', ‘1')
app
.type('//*"[@placeholder="Last name"]', 'Virus')
.click('//*"[contains(text(), "Cancel")]')
import { app } from 'modules/app'
import { expect } from 'modules/assert'
app
.init()
.goto('http://127.0.0.1:5500/index.html')
.type('//*"[@placeholder="username"]', 'username')
.type('//*"[@placeholder="password"]', '1234')
.click('//*"[contains(text(), "Login")]')
app
.type(‘//*"[@placeholder="Specific detail"]', ‘1')
app
.type('//*"[@placeholder="Last name"]', 'Virus')
.click('//*"[contains(text(), "Cancel")]')
__tests__/a.ts __tests__/b.ts

25. import { app } from 'modules/app'
import { expect } from 'modules/assert'
app
.init()
.goto('http://127.0.0.1:5500/index.html')
.type('//*"[@placeholder="username"]', 'username')
.type('//*"[@placeholder="password"]', '1234')
.click('//*"[contains(text(), "Login")]')
app
.type(‘//*"[@placeholder="Specific detail"]', ‘1')
app
.type('//*"[@placeholder="Last name"]', 'Virus')
.click('//*"[contains(text(), "Cancel")]')
import { app } from 'modules/app'
import { expect } from 'modules/assert'
import { login, writeReview } from ‘modules/action'
login()
expect('//*"[contains(text(), "anything")]').exist()
app
.type(‘//*"[@placeholder="Specific detail"]', ‘1')
writeReview()
__tests__/a.ts __tests__/b.ts

26. -actions
-user
-login
-logout
-review
-write
-edit
-__tests__
-main
-login
-logout
-food
-writeReview
-editReview
3. Directory tree as Action base

27. Most important part is
Making a decision

28. + +