Developer Tools

CSS Selector Helper for Chrome™


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:

CSS Selector Helper for Chrome™
Related posts
Developer Tools

Browserling - Cross-browser testing

Developer Tools

Selenium Page Object Generator

Developer Tools

IP Address and Domain Information

Developer Tools

APK Downloader for Google Play Store™


Comments are closed.