Cypress: Proposal: CSS Selector helper

[chrisbreiding]

Add a button to the runner/reporter that enters into a "selector helper" mode. In this mode, you can hover over parts of your app and the element underneath the cursor will be highlighted (like "Select an element" mode from the DevTools).

Cypress will calculate the best selector to using for getting that element. It will display the selector in a new UI panel overlaying the reporter and allowing refinements such as selecting by text via cy.contains or selecting via attribute. It will have a copy-to-clipboard button for easy copying.

Some prior art to research for the best way to implement:

• CSS Selector for Chrome
• Selector Gadget

[jennifer-shehane]

Related to #73

[brian-mann]

We need to expose an API to the user that gives them the ability to control the selectors they want to use. Something like:

Cypress.SelectorPlayground.defaults({
  strategies: ['id', 'class', 'attribute'],
  onElement: ($el, command, selector) => {
    // return something arbitrary here to 
    // override our default rules
    return $el.attr('data-test-id')
  }
})

[brian-mann]

Another thing we should do is automatically prefer things like data-cy, and then emphasize to the user that's the preferred way for selecting DOM elements.

[brian-mann]

Also, the Selector Playground is busted in Electron, but I'll open a separate issue for that.

[brian-mann]

Here's a preview of what it is...

[brian-mann]

Released in 1.3.0.

[zth]

Is this configurable somehow? It'd be cool to be able to set the preferred strategies like mentioned by @brian-mann. We have a convention where we set a unique data-testid attribute on all our elements we use in E2E-tests. It'd be nice for us to be able to configure the selector playground to prefer (or enforce) using that type of selector. Anyone with similar thoughts/needs?

[jennifer-shehane]

@zth No, this is not currently configurable, but as you saw above, we have discussed it. I'd suggest opening a new issue so we can track this feature specifically. Thanks!