Proposal: CSS Selector helper #917
Comments
Related to #73 |
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')
}
}) |
Another thing we should do is automatically prefer things like |
Also, the Selector Playground is busted in Electron, but I'll open a separate issue for that. |
Released in |
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 |
@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! |
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
get
ting that element. It will display the selector in a new UI panel overlaying the reporter and allowing refinements such as selecting by text viacy.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:
The text was updated successfully, but these errors were encountered: