feat: support data-qa selector in selector playground

[lmiller1990]

• Closes Cypress Studio to utilize data-qa attribute if present for element selection #25305

User facing changelog

Support data-qa selector in Selector Playground in addition to data-cy, data-test and data-testid.

Additional details

It's common to use data-qa when indicating selectors used in End to End tests. QA engineers are one of the most common cohorts using Cypress Studio, so it follows we should respect data-qa alongside data-test* and data-cy.

Steps to test

You can point this branch at a project with data-qa and try using Selector Playground. I also recorded a video so you can see it in action.

simplescreenrecorder-2023-01-17_11.15.19.mp4

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
• Has a PR for user-facing changes been opened in cypress-documentation? docs: document data-qa selector cypress-documentation#4986
• [n/a] Have API changes been updated in the type definitions?

[cypress]

---

Test summary

5033 • 0 • 75 • 0 • 9

---

Run details

Project	cypress
Status	Passed
Commit	bc2e830
Started	Jan 20, 2023 12:22 AM
Ended	Jan 20, 2023 12:35 AM
Duration	13:37 💡
OS	Linux Debian -
Browser	Electron 106

View run in Cypress Dashboard ➡️

---

Flakiness

	commands/net_stubbing.cy.ts		1
1	... > stops waiting when an fetch request is canceled
	e2e/origin/cookie_behavior.cy.ts		4
1	... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
2	... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
3	... > same site / cross origin > XMLHttpRequest > sets cookie on same-site request if withCredentials is true, and attaches to same-site request if withCredentials is true
4	... > same site / cross origin > fetch > sets same-site cookies if "include" credentials option is specified from request, but does not attach same-site cookies to request by default (same-origin)
This comment includes only the first 5 flaky tests. See all 9 flaky tests in the Cypress Dashboard.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[marktnoonan]

Seems fine to add this for Studio. I was surprised when I noticed that Studio doesn't seem to use the onElement callback available for Selector Playground, since it would be good to customize this for recording tests. #25305 (comment)

[emilyrohrbough]

@lmiller1990 You say it's common to use data-qa as a selector. Do you have any stats on how common this is?

[lmiller1990]

@lmiller1990 You say it's common to use data-qa as a selector. Do you have any stats on how common this is?

@emilyrohrbough I mainly used my intuition and anecdotal experience here, but for some numbers, checking GitHub:

• https://github.com/search?q=data-cy&type=code around 295K results

For comparison:

• data-qa: 295K
• data-test: 700K
• data-testid: 1M

Not as popular but still common enough (imo). Thoughts? I think this is common enough to justify adding, and there's little to no downside.

[emilyrohrbough]

@lmiller1990 Sounds good to me to add data-qa. This seems to solve part of this user's by providing data-qa support, but isn't actually adding support for data-*. I think that's fine but maybe updating the issue request would clarifying what was accomplished when this is closed?

[lmiller1990]

Oh oops, good point @emilyrohrbough, updated it. #25305 (Cypress Studio to utilize data-qa attribute if present for element selection)

[cypress-bot]

Released in 12.4.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.4.0, please open a new issue.