Description
🚀 Feature Proposal
Prefer CSS attribute selectors that are dedicated for testing when selecting an element.
Common conventions that I know of are and seen a lot in the wild are:
[data-test][data-test-id][data-testid]
And the rival project cypress has [data-cy].
Motivation
A lot of the modern web development workflow moved away from designing by page - to designing by component (frameworks such as react/vue/angular).
As a result using ID for selectors is now considered a bad practice to select elements, and bad practice to create a page out of components (it's not unique most of the time).
Also note that some of the "CSS-in-JS" workflows such as when using css-modules in webpack will create unique classes for each component, so the names are changing frequently when changing styles.
Using these data-test selectors allows for less brittle tests, and they clearly signal that messing with a certain element can cause a test to fail.
These selectors also allow the user to to remove them easily if he doesn't want them to show in production code and increase bundle size.
Example
When using the select target feature it should look for these data-test selectors befure id, class, or xpath selectors.
class generated with css-modules
More reliable to use this:
