Your locators are fragile! Make them strong with test data attributes

Anil shared lessons learned from WebdriverIO automation tests created for the E-commerce application. He shared mistakes to avoid, tools and strategies used to create future-friendly automation tests by creating test data attribute instead of reusing already existing locators.

1. Fragile Locators By Anil Kumar Krishnashetty https://unsplash.com/photos/cGXdjyP6-NU @anilbms75
2. Agenda • PageObject problems • Test attributes • Tools • Summary @anilbms75
3. https://unsplash.com/photos/iv6Xbp11olc @anilbms75
4. https://marketplace.atlassian.com/apps/1219033/assertthat-bdd-test-automation-in-jira?hosting=cloud&tab=overview
5. Photo credit: Chris Lawton
6. Templates https://unsplash.com/photos/iv6Xbp11olc https://unsplash.com/photos/0TH1H1rq_eY
7. Components https://unsplash.com/photos/iv6Xbp11olc
8. Design system from Contentful Forma36 https://unsplash.com/photos/iv6Xbp11olc
9. Only QA writing the Automation test steps https://unsplash.com/photos/iv6Xbp11olc https://unsplash.com/photos/0TH1H1rq_eY
10. Can your Product Owner / business stack holder writing test cases? https://unsplash.com/photos/iv6Xbp11olc https://unsplash.com/photos/0TH1H1rq_eY
11. https://www.amazon.de/dp/0955683610 @anilbms75 Gojko adzic
12. Can your Product Owner / business stack holder writing test cases? https://unsplash.com/photos/iv6Xbp11olc https://unsplash.com/photos/0TH1H1rq_eY
13. Solutions • AI • Multiple locators • Test attributes
14. AI selectors - testim.io demo Demp app link
15. Selenium IDE multiple locators demo Demp app link
16. PageObjects @anilbms75
17. PageObjects Locators Page paths Actions @anilbms75
18. class WdioPage extends Page { // Locators get search() { return $('#search_input_react') } get helpLink() { return $('header > div > nav > ul > li:nth-child(3) > a') } } @anilbms75
19. class WdioPage extends Page { // page path get gettingStartedPagePath(){return 'docs/gettingstarted.html'} } @anilbms75
20. class WdioPage extends Page { // Actions async open(pagePath) { super.open(pagePath) } async navigateToHelp() { const helpLink = await this.helpLink; // actions await helpLink.click(); } } @anilbms75
21. class WdioPage extends Page { // Locators get search() { return $('#search_input_react') } get helpLink() { return $('header > div > nav > ul > li:nth-child(3) > a') } // page path get gettingStartedPagePath(){return 'docs/gettingstarted.html'} // Actions async open(pagePath) { super.open(pagePath) } async navigateToHelp() { const helpLink = await this.helpLink; // actions await helpLink.click(); } } @anilbms75
22. WebdriverIO PageObjects demo @anilbms75
23. Test attributes
24. @anilbms75 DEV TEST SHARED
25. Product Owner Developer QA PageObject E2E Test Web app on Browser Server
26. Tightly coupled PageObject E2E Test Web app on Browser Server
27. Loosely coupled PageObject E2E Test Web app on Browser Server
28. Development responsibility PageObject E2E Test Web app on Browser Server Locators PagePaths
29. QA responsibility PageObject E2E Test Web app on Browser Server Locators PagePaths
30. Independant PageObject E2E Test
31. Mixed responsibility PageObject E2E Test Web app on Browser Server Locators PagePaths
32. SUT https://unsplash.com/photos/iv6Xbp11olc Stop using Page Objects and Start using App Actions Chrome DevTools as Automation Protocol
34. Do you have any questions to me? ?
35. Contact https://unsplash.com/photos/iv6Xbp11olc Anil Kumar Krishnashetty Twitter: @anilbms75 Email: anilbms75@gmail.com LinkedIn: https://www.linkedin.com/in/anilk4/