Default SelectorPlayground priority order partially contradicts best practices #6876
Description
May as well be suited for cypress-io/cypress-documentation, however this also concerns the default priority order shipped with cypress 4.2.
Current behavior:
The Best Practice page on selecting elements gives a couple of examples of bad, better and good ways to target an element. One of the "better" (though not ideal) ways listed is selection via name attribute. The rough order of worst → best from the best practice page section:
tag → class → id → [name] → text content → data-*
However, both the selector playground doc page as well as it's API doc page don't list the name attribute in the default Selector Playground priority order at all:
nth-child → attributes → tag → class → id → data-*
Notable is also that text content is not part of this priority order at all.
Currently i am tasked with writing specs for an existing system over whose code base i do not have any control, so i have to work with what's there. After reading the Best Practice section mentioned above, it seemed clear that the least flaky selector available for the element my test needs to select is the name-attribute.
While testing out the Selector Playground i was surprised to find that it suggests
:nth-child(5) > .v-list__tile > .v-list__tile__content > .v-list__tile__title.
Desired behavior:
- I'd expect that either the default priority order reflects the best practice page, such as
nth-child → attributes → tag → class → id → [name] → data-* or maybe even
nth-child → attributes → tag → class → id → [name] → text content → data-* (though i understand the feasibility of content based selectors is heavily dependent on the type of project)
- the docs should be more consistent here or offer some more explanation on why those sections seems to contradict each other
Given my current example, i'd expect the Selector Playground to suggest
:nth-child(5) > [name=navigationPreferences] > .v-list__tile__content > .v-list__tile__title
(actually, i'm after :nth-child(5) > [name=navigationPreferences], but that's no issue).
I'm perfectly aware from the Selector Playground API docs that i can programmatically define any custom selector priority order, however that is not the issue i am trying to highlight here.
Test code to reproduce
Try to select any element in the Selector Playground that has a name-attribute.
If that element neither has data-*-attributes nor id, a nested, class-based selector will be suggested.
Versions
Occured under Cypress 4.2, Linux 4.19.112-1-MANJARO, Electron 80 and the current online documentation (reading Last updated: 03-27-2020 in the page footer)