New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proposal: CSS Selector helper #917

Closed
chrisbreiding opened this Issue Nov 15, 2017 · 8 comments

Comments

4 participants
@chrisbreiding
Collaborator

chrisbreiding commented Nov 15, 2017

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:

@jennifer-shehane

This comment has been minimized.

Member

jennifer-shehane commented Nov 15, 2017

Related to #73

@brian-mann

This comment has been minimized.

Member

brian-mann commented Dec 17, 2017

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

This comment has been minimized.

Member

brian-mann commented Dec 17, 2017

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

This comment has been minimized.

Member

brian-mann commented Dec 17, 2017

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

@brian-mann

This comment has been minimized.

Member

brian-mann commented Dec 17, 2017

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

selector playground2

@brian-mann

This comment has been minimized.

Member

brian-mann commented Dec 18, 2017

Released in 1.3.0.

@zth

This comment has been minimized.

zth commented Dec 27, 2017

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

This comment has been minimized.

Member

jennifer-shehane commented Dec 27, 2017

@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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment