Frontend developers and QA automation engineers should collaborate closely to improve test maintainability and application testability.
Test automation for web sites uses element selectors to access and interact with the objects on the page. Unfortunately, those selectors are subject to change as the application evolves making test automation engineers rework their code constantly. In an attempt to have reliable element selectors, most engineers use element ids as much as possible because they are unique on the page and tend to stay constant even when changes are made.
Unfortunately, the emergence of modern frontend libraries such as React made the use of element ids irrelevant as they are not used by the developers for event handling anymore. Moreover, the use of classes as element selectors has become a new obstacle for automation engineers to overcome since modern css-in-js libraries generate random class name.
This talk is about defining a strategy for test-specific attributes that can be added to the web page DOM in order to improve test maintainability and application testability. First, the talk will cover how adding unique attributes to each page element will keep test maintenance to a minimum when there are minor changes in the UI without a change in the application behavior. Then, the talk will focus on how adding generic attributes for elements with the same structure (such as tables, lists…) can help organize the automated test code and avoid duplication. Pushing the concept further into making the application easily testable, the talk will highlight how adding some helper data in these attributes can make tests more efficient.
Overall, the talk will cover how close collaboration between Frontend developers and QA automation engineers can make test automation easier, faster and more robust.