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.

Transcript

1. Fragile Locators By Anil Kumar Krishnashetty
   https://unsplash.com/photos/cGXdjyP6-NU
   @anilbms75
   

   View Slide

2. Agenda
   • PageObject problems
   • Test attributes
   • Tools
   • Summary
   @anilbms75
   

   View Slide

3. https://unsplash.com/photos/iv6Xbp11olc
   @anilbms75
   

   View Slide

4. https://marketplace.atlassian.com/apps/1219033/assertthat-bdd-test-automation-in-jira?hosting=cloud&tab=overview
   

   View Slide

5. Photo credit: Chris Lawton
   

   View Slide

6. Templates
   https://unsplash.com/photos/iv6Xbp11olc
   https://unsplash.com/photos/0TH1H1rq_eY
   

   View Slide

7. Components
   https://unsplash.com/photos/iv6Xbp11olc
   

   View Slide

8. Design system from Contentful Forma36
   https://unsplash.com/photos/iv6Xbp11olc
   

   View Slide

9. Only QA writing the Automation test steps
   https://unsplash.com/photos/iv6Xbp11olc
   https://unsplash.com/photos/0TH1H1rq_eY
   

   View Slide

10. Can your Product Owner / business stack
    holder writing test cases?
    https://unsplash.com/photos/iv6Xbp11olc
    https://unsplash.com/photos/0TH1H1rq_eY
    

    View Slide

11. https://www.amazon.de/dp/0955683610
    @anilbms75
    Gojko adzic
    

    View Slide

12. Can your Product Owner / business stack
    holder writing test cases?
    https://unsplash.com/photos/iv6Xbp11olc
    https://unsplash.com/photos/0TH1H1rq_eY
    

    View Slide

13. Solutions
    • AI
    • Multiple locators
    • Test attributes
    

    View Slide

14. AI selectors - testim.io demo
    Demp app link
    

    View Slide

15. Selenium IDE multiple locators demo
    Demp app link
    

    View Slide

16. PageObjects
    @anilbms75
    

    View Slide

17. PageObjects
    Locators
    Page paths
    Actions
    @anilbms75
    

    View Slide

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
    

    View Slide

19. class WdioPage extends Page {
    // page path
    get gettingStartedPagePath(){return 'docs/gettingstarted.html'}
    }
    @anilbms75
    

    View Slide

20. class WdioPage extends Page {
    // Actions
    async open(pagePath) {
    super.open(pagePath)
    }
    async navigateToHelp() {
    const helpLink = await this.helpLink;
    // actions
    await helpLink.click();
    }
    }
    @anilbms75
    

    View Slide

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
    

    View Slide

22. WebdriverIO PageObjects demo
    @anilbms75
    

    View Slide

23. Test attributes
    

    View Slide

24. @anilbms75
    DEV
    TEST
    SHARED
    

    View Slide

25. Product Owner
    Developer QA
    PageObject
    E2E Test
    Web app on
    Browser
    Server
    

    View Slide

26. Tightly
    coupled
    PageObject
    E2E Test
    Web app on Browser
    Server
    

    View Slide

27. Loosely coupled
    PageObject
    E2E Test
    Web app on Browser
    Server
    

    View Slide

28. Development
    responsibility
    PageObject
    E2E Test
    Web app on Browser
    Server
    Locators
    PagePaths
    

    View Slide

29. QA
    responsibility
    PageObject
    E2E Test
    Web app on Browser
    Server
    Locators
    PagePaths
    

    View Slide

30. Independant
    PageObject
    E2E Test
    

    View Slide

31. Mixed
    responsibility
    PageObject
    E2E Test
    Web app on Browser
    Server
    Locators
    PagePaths
    

    View Slide

32. SUT
    https://unsplash.com/photos/iv6Xbp11olc
    Stop using Page Objects and Start using App Actions
    Chrome DevTools as Automation Protocol
    

    View Slide

33. View Slide

34. Do you have any questions to me?
    ?
    

    View Slide

35. Contact
    https://unsplash.com/photos/iv6Xbp11olc
    Anil Kumar Krishnashetty
    Twitter: @anilbms75
    Email: anilbms75@gmail.com
    LinkedIn: https://www.linkedin.com/in/anilk4/
    

    View Slide