Update Selector Playground to prioritise suggestions from Testing Library for accessible queries

What would you like?

Today I learned (in an interview with a potential QE candidate) about the Selector Playground feature in the Cypress GUI to help you find selectors, and that its suggestions are ordered in a certain priority. While the suggestions align with the concept of writing selectors that are resilient to change, they don't reflect the guiding principles of Testing Library for accessible, user-based queries. There is a short blurb in the Cypress Best Practices docs about the use of Testing Library for locators as a recommendation.

It would be awesome to go one step further and make the Selector Playground recommend Testing Library locators according to their best practice priority.

So, for a button like this:

<button
  id="main"
  class="btn btn-large"
  name="submission"
  role="button"
  data-cy="submit"
>
  Submit
</button>

I would love for the first suggestion to be cy.findByRole('button', {name: 'Submit'}) instead of cy.get('[data-cy="submit"]').

(One reason you might not want that would be in an application testing multiple languages - but then I'd argue your test should still be testing that your buttons are getting the appropriate labels for that language 😏 )

Why is this needed?

It will help engineers using Cypress to get familiar with the importance of user-based, accessible queries.
More tests using accessible queries means less bugs and more thoughtfulness around accessibility in the wild web.
Less a11y bugs means better user experience for everyone!

Other

No response

cypress-io / cypress