Why is data-* attributes preferred for element selection over a plain ID attribute?

Question

Cypress and many other posts around testing web applications suggest relying on a data attribute like data-cy or data-test-id for locating elements rather than relying on the id attribute.

My understanding is that for two reasons:

1. The modern way of re-using the components can lead to having multiple components of the same type and can lead to multiple of those IDs on the same page - But this should also apply to the 'data-cy' or 'data-test-id' attributes.
2. When IDs are tied to CSS, there's a tendency to change them more often while data-* attributes may be less prone to change.

Can someone please throw more light on the recommendation?

The other thing I am considering is to request my devs to place the data-test* attributes on a div tag that would consume the component - that way the test attribute is actually one level above the component id attribute and may come handy even in cases where multiple instances of the same component are used. But again, I am not sure why the id attribute for that div tag is bad when compared to the data-test* attribute.

Yogurt

Welcome to SO. Please take the time to read How to Ask and minimal reproducible example. It will help you craft solid questions that will hopefully get useful answers. As the link you've supplied points out, some webapp frameworks--notably React--have dynamic id attributes. – Mirador

@Mirador I don't think there's anything wrong with the question, apart from it being completely answered by the first link supplied. Bhavani, can you elaborate on what's not clear in the documentation? – Guillot

Here's a good read about the topic: kentcdodds.com/blog/making-your-ui-tests-resilient-to-change – Spectrograph

id attribute of html element should not really be used, because at least earlier there was a requirement that id attribute must be unique so having multiple components of same type would need to have different id's with data- attributes there is no such problem... – Ceratoid

I found this post that resolves this issue: medium.com/agilix/…. I still have to try it, but it seems useful. – Sylvie

Answer 1

From Cypress official docs:

Anti-Pattern: Using highly brittle selectors that are subject to change.

Best Practice: Use data-* attributes to provide context to your selectors and isolate them from CSS or JS changes.

Every test you write will include selectors for elements. To save yourself a lot of headaches, you should write selectors that are resilient to changes.

Oftentimes we see users run into problems targeting their elements because:

Your application may use dynamic classes or ID's that change Your selectors break from development changes to CSS styles or JS behavior Luckily, it is possible to avoid both of these problems.

Don't target elements based on CSS attributes such as: id, class, tag Don't target elements that may change their textContent Add data-* attributes to make it easier to target elements

The point is that id's and classes can be dynamic (also text-content) so you always want to use a selector that is static like the "data-cy" attribute.

Crawley