goldbergyoni / javascript-testing-best-practices

📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (July 2023)

Home Page:https://testjavascript.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[3.2] Is data-test-id a good idea?

ziofat opened this issue · comments

I have seen this in cypress's documents that suggest to use data-test-id attribute to locate specific element. This can make test more stronger that survive changes like html structures and css names. However, in practice we found it is hard to avoid name conflicts in big project, and a lot of 3rd party ui components cannot add this attribute.

What we do is to use user aware information to locate element. In my opinion, if the feature requirement has changed, then the tests should change as well. For e2e testing, using data-test-id violates the principle 1.4 "Stick to black-box testing".

So we use text to locate elements. If the element has no text, like icon button, as far as it is Interactable, it should have some a11y information for visual disability users. And our test framework is another user with such disability. Therefore, aria attributes are used to locate almost every elements that should be cared in our test cases. I think this is a better practice compared to data-test-id. And we use Google's Semantic Locators to achieve this.