Improve selector playground suggestions, when element has a parent with data-test or id

[Herteby]

If the target element has a parent/grandparent with a "good" selector like data-test/data-cy or id, but the target element has a class or something which happens to be unique on the page, I think the "good" selector should still be included in the suggestion.

Example HTML:

<div data-test="user">
  <div class="description">...</div>
</div>

Current behavior:

Suggested selector is .description

Desired behavior:

Suggested selector should be [data-test=user] > .description or [data-test=user] .description

[jennifer-shehane]

Hey @Herteby, we expose the API for our selector playground so that you can define your own selector priority. Check out the docs.

We could potentially update our own default to play 'data-test' as higher priority if enough people find this useful.

[Herteby]

@jennifer-shehane Yeah I've tried it. This is not an issue with priority though I think. data-test is already included as high-priority by default. But with the current API I don't think it's possible to get the behavior that I suggested (besides remaking it all from scratch with the onElement callback I guess).

[Herteby]

I think what would be needed from the API is to split the selectors into two lists, something like this:

Cypress.SelectorPlayground.defaults({
  primarySelectors: ['data-cy', 'data-test', 'id'],
  selectorPriority: ['class', 'tag', 'nth-child']
})

And the selector finder would then attempt to always include one of the "primary selectors" if possible, even when it's not "strictly necessary" (like in my example above).

[jennifer-shehane]

Oh, I see what you mean now.