CSS Selector Helper for Chrome™

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).