Cypress Studio to utilize data-qa attribute if present for element selection

[AcidSeth]

What would you like?

I think it would be wise if Cypress Studio were to use "data-*" HTML5 attributes over CSS IDs and classes.
You could add an attribute to dom elements as an anchor point for testing, for much more reliable selection with Cypress Studio as well. I don't believe there's currently a way to select this attribute as you would in just Cypress.

I feel like there's a current hierarchy of preferrance over which attribute Cypress Studio selects, and I think this attribute should have more importance than the rest.
In particular, data-qa attributes could be considered.

Why is this needed?

CSS classes and IDs are fickle and could change, resulting in errors. They're also more for styling than DOM selection.

Other

I got the idea from this
https://dev.to/christinepinto/data-qa-attribute-a-better-way-to-select-elements-for-ui-test-automation-48lm
https://ultimatecourses.com/blog/data-js-selectors-enhancing-html5-development-by-separating-css-from-javascript

[emilyrohrbough]

@lmiller1990 I would expect studio to match the selector playground's default selector priority: https://docs.cypress.io/api/cypress-api/selector-playground-api#Arguments I know you worked on re-writing studio. Do you know if these match or the selector presence being used? Is this is, is this something we can add to the existing studio docs? https://docs.cypress.io/guides/references/cypress-studio

[AcidSeth]

@lmiller1990 I would expect studio to match the selector playground's default selector priority: https://docs.cypress.io/api/cypress-api/selector-playground-api#Arguments I know you worked on re-writing studio. Do you know if these match or the selector presence being used? Is this is, is this something we can add to the existing studio docs? https://docs.cypress.io/guides/references/cypress-studio

Thanks for the link, admittedly I'm pretty new to Cypress and I approached it with Cypress Studio in mind first.
I might test those data attributes and let you know the results.

[AcidSeth]

I've tried with data-cy and it seems like it's being selected just fine.
cy.get( ':nth-child(5) > .chakra-input__group > .chakra-input__right-element > [data-cy="eye-mask-off"] > g > ... ).click();

I wish there was a mention in the Cypress Studio documentation page as it would have saved me some hassle with classes and ids. I recommend people use

1. data-cy
2. data-test
3. data-testid

for automatic selection with Cypress Studio, I can't see any downsides.

[lmiller1990]

I made a PR linking to the selector priority from the Studio page. cypress-io/cypress-documentation#4986

I also added support for data-qa: #25475

[marktnoonan]

Another note from this is that it feels like this should be possible to control from userland by setting the onElement callback but that's not currently used by studio, even though it is used in the playground.

Whenever studio moves out of experimental we should probably make sure its behavior aligns with selector playground settings that may have been modified by the user.

[lmiller1990]

It is possible from userland, but since we have data-cy in the main repo, I think adding data-qa is fine, too.

[marktnoonan]

Oh I agree it's fine @lmiller1990, my point was that I couldn't get it to work from userland at all. I can define custom behavior for the selector playground, but Studio does not seem inherit that custom onElement callback when recording tests, so I get different selectors generated in each context.

So it's a +1 to support this in the defaults, the change is small and provides a QOL improvement.

[lmiller1990]

We decided to implement data-qa! Hopefully this helps.

[rmnrdi]

Sorry, am I reading this correctly. Cypress will only see specific data- attributes?

We just added data-el as a data attribute and aren't visible when running the cypress UI to test our development and get selectors.

Will this not work?