CSS Selector Helper 2.0.2 CRX for Chrome
A Free Developer Tools Extension
Published By jlawrence6809
CSS Selector Helper (gddgceinofapfodcekopkjjelkbjodin): Dev Tools sidebar that aids finding unique CSS selectors for Selenium WebDriver tests.... Read More > or Download Now >
CSS Selector Helper for Chrome
Tech Specs
- • Type: Browser Extension
- • Latest Version: 2.0.2
- • Price: Freeware
- • Offline: No
- • Developer: jlawrence6809
User Reviews
- • Rating Average
- 3.78 out of 5
- • Rating Users
- 55
Download Count
- • Total Downloads
- 448
- • Current Version Downloads
- 27
- • Updated: June 3, 2022
CSS Selector Helper is a free Developer Tools Extension for Chrome. You could download the latest version crx file or old version crx files and install it.
More About CSS Selector Helper
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).
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).
