question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Proposal: CSS Selector helper

See original GitHub issue

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:

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

9reactions
brian-manncommented, Dec 17, 2017

Here’s a preview of what it is…

selector playground2

6reactions
brian-manncommented, Dec 18, 2017

Released in 1.3.0.

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Selector Helper
Dev Tools sidebar that aids finding unique CSS selectors for Selenium WebDriver tests.
Read more >
CSS Selectors Cheat Sheet - Plutio Help Center
CSS Selectors Cheat Sheet ... 1) Main container: Is proposal , contract , invoice , form - depending on what you are editing....
Read more >
An extension to find CSS selectors | by Redfin Engineering
To tackle both of these problems I decided to create one fairly simple Chrome™ extension in Javascript that would help me choose the...
Read more >
SelectorsHub: The Next Gen XPath, CSS Selectors Tool
SelectorsHub is a browser extension that will help you in writing XPath and CSS Selectors within five seconds, let's find out why you...
Read more >
Selenium Tips: CSS Selectors - Sauce Labs
Useful Selenium tips on CSS rules and pseudo-classes that will help you understand how to convert your XPATH locators to CSS, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found