CSS Selector Playground - allow configuration?

[zth]

Hi!

This is a follow up to the launch of the CSS Selector Playground feature, and in reference to this comment: #917 (comment).

A use case I have is the following:
We always set a unique data-testid on all of our elements used in E2E tests. It'd be really cool if the CSS Selector Playground was configurable so that it would prefer (or even enforce) selectors using the data-testid-convention. In addition to that, it'd be cool if it could also somehow highlight all elements with data-testid's on the page right now.

Any thoughts/comments?

[brian-mann]

@chrisbreiding let's go with the comment here: #1212 (comment)

data-test and data-cy.

We need to support those as the preferred selector.

We also need to provide a callback function to enable you to control what selector you want returned... something like this..

// something like this
Cypress.SelectorPlayground.defaults({
  selectorPriority: ['data-cy', 'data-test', 'id', 'class', 'nth-child'],
  onElement: ($el) => {
    // return something here which will override the default attributes we search for
  })
})

[brian-mann]

After doing this, we need to provide docs for the API, we need to write a guide (to show you how to use the playground) and likely a best practice for naming your elements.

[brian-mann]

Released in 2.1.0.