Dev Tools sidebar that aids finding unique CSS selectors for Selenium WebDriver tests.
CSS Selector Helper for Chrome™ makes finding the right CSS selector on a web page much quicker and easier than digging through the HTML. Unlike other tools meant to help you locate CSS selectors, this extension allows you to choose the selectors manually, so that they can match up better with the structure of the page as it was designed. To use CSS Selector Helper for Chrome™ follow these steps (also in the video): 1) Install the extension to your chrome browser. 2) Inspect an element on your page or select an element on the "Elements" page of the Dev tools. 3) Navigate to the "CSS Selector" tab on the sidebar of the "Elements" page of the Dev tools. 4) On this tab, you will see a list of element ID names and CSS classes, ordered from the most distant ancestor element on top, to the selected element on bottom. Click any of the items in this list to include it in the current selector. 5) Once the configured selector matches one or more items on the page, you can cycle through the elements by pressing the "Prev" and "Next" buttons. 6) When you have found your CSS selector*, click the "Selector to Clipboard" button to copy the complete and properly formatted selector. 7) To see the selectors of another element, just highlight it in the "Elements" panel, and click the"Get Classes" button. *Note: You can check the "Only Visible" checkbox in order to only match elements Selenium Webdriver 2 considers "Visible" (according to this spec: http://www.w3.org/TR/webdriver/#determining-visibility).
- (2019-12-20) Валерий Озарничук: Thanks, but sometimes it does not work. For example, on http://www.gardtd.ru/ button "Selector to clipboard" not works.
- (2019-06-06) Mr. Fox: Better extension for find selectors!
- (2019-05-06) Nathan Tufano: Defeats the purpose when I have to select the entire path - makes me need to go through the HTML anyway. Does not save time just takes more.
- (2018-06-11) Adam Bloom: As someone still learning CSS, this proved very helpful. Thank you!
- (2018-01-17) Brian Dall: Works pretty well for getting selectors for automated testing! One request would be a way to get selectors that look at the text - e.g. the linkText or innerText or outerText for the element. Sometimes they make links without IDs and the URLs can change so using the href is brittle. The link text however remains pretty static, but you need to make sure you can get a unique selector when the page has several sections with similar links.
- (2017-11-09) Ivan Nikiforov: Amazing app! This one really helped me to find the proper CSS selector for tricky button on dynamic AJAX site. Maybe it has not user friendly interface, but it really does the work much better than Selenium IDE and another browsers/plugins.
- (2017-11-09) Hope Nope: Nice job
- (2017-06-20) Matej F: Very useful extension. Only thing that does not work for me is generating selectors inside iframes.
- (2017-04-19) Daniel Pietrucha: great tool, thanks
- (2017-03-25) Michael Donoghue: Great stuff! Worked in v.57 just fine.
- (2017-03-17) Tobi Lukan: Version 56.0.2924.87 here and its not showing in developer's tool. How long to fix this?
- (2017-01-09) RJ ge: Very helpful. Love it!
- (2016-12-29) eye blue: It does work with 57.0.2950.4 dev (64-bit). And it's nice when clicking the Prev/Next button to see the matching results.
- (2016-12-17) Naveenkumar Gunasekaran: It does not work for me also. Not appearing in the dev tools.
- (2016-09-15) Prokop Suchanek: great help for web devs
- (2016-09-14) Shahnawaz Siddiqui: Not working for me. Nothing shown related to this tool in DevTools.
- (2016-05-15) E M: It doesn't work. Never appears in the Dev Tools.
- (2016-03-24) Blast Cruise: Any possibility that you create this for Firefox?
- (2016-03-17) Booki Za-za-za: Great thanks to the developers of this extension!!! it really helps me in my automation qa job every day!! i even can donate to you! great job guys!
- (2016-03-15) Petr Václavík: Looking nice. Please add editable colors for prefixes. Like: project-* = red, head-* = yellow. I prefer this colors visible in left html.
- (2015-10-05) Domizio Demichelis: REALLY useful! The only thing that should really be improved is the style of the selectors: couldn't we have simple flat rounded boxes (tag style) instead of having 5 borders and paddings for each selector??? That's crazy! It is very confusing, lowering the readability and looking horrible!
- (2015-09-15) Martin Doyle: This is a really useful extension, especially for building functional testing of the browser. It could be improved by adding the tagName to each "row" of the hierarchy, or at least have a persistent option to do so, as sometimes the code is neater when using element selectors. [EDIT] I've gone to use this again after a week or so's gap, and have found that not only do we have element/tag selectors, but also attribute selectors. I'd go to six stars now, if it were possible, as this really is perfect for our selenium-based testing (actually InternJS).
- (2014-11-11) Shawn Holt: Really found this useful but does not work in v.38 :(
- (2014-11-07) Marian Steinbach: Doesn't work. Chrome v. 38