SelectorsHub
SelectorsHub is a development tool to edit, inspect and generate XPath and CSS selectors. SelectorsHub makes it easy to write, edit, extract, and evaluate XPath and CSS queries on any webpage and saves atleast 40–50% manual effort in automation script writing.
Checkout the latest version of SelectorsHub here. It is not just an xpath tool, it has evolved a lot now.
SelectorsHub is the highest rated (4.95+) xpath tool.
SelectorsHub is currently being used by more than 50k Testers & developers almost in every country of the world (in 130+ countries).
How to use it-
1. After installing SelectorsHub extension, reload the page for which you want to use it.
2. Right-click on the web page, and then click Inspect.
3. In the right side of Elements tab, click on SelectorsHub tab.
Note- If SelectorsHub is not visible then click on the arrow icon as shown in the Screenshot. SelectorsHub will be shown as last tab in sidebar.
4. To generate XPath/CSS inspect element or click on any dom node, it will generate the absolute XPath/CSS selector for the selected node.
5. To evaluate XPath/CSS, type the XPath/CSS query and press enter key.
As you enter, it will query in DOM for the relevant element/node. You can view the matching node(s) and nodes value as per their sequential occurrence. A dashed blue outline appears around to highlight the matching elements in the web page.
Please refer screenshot for more info given in download link.
Note- 1- To use CSS features, first change the dropdown value from XPath to CSS in header.
2- Tool will add xpath/css attribute to all the matching node(s) as per their sequential occurrence. For example, a matching node appearing second in the list will have xpath=2. And if verifying CSS then it will have css=2.
Features :
1. It will generate the absolute XPath and CSS selector for inspected element/selected node.
2. It opens as sidebar tab in devtools panel where you can access DOM, inspect element in left side and write the XPath/CSS in right side and evaluate there itself.
3. It will scroll the window to the 1st matching node (will scroll if 1st matching element not in visible area).
4. You can view the matching node(s) and nodes value as per their sequential occurrence. A dashed blue outline appears around to highlight all the matching elements in the web page.
5. If you mouse hover on any matching node in the SelectorsHub tab, blue dashed outline will convert into dotted orange red to highlight the corresponding element in the webpage.
6. If the found element is not in visible area on webpage then mouse hover on found node in SelectorsHub tab will scroll that element in the visible area with dotted orange red outline.
7. If found element is not highlighted but visible on webpage, on mouse hover on matching node in SelectorsHub tab it will highlight element with dotted orange red outline.
8. If you enter wrong XPath/CSS pattern it will highlight the input box in red colour.
9. SelectorsHub helps as xpath helper, xpath editor, xpath viewer, writing relative xpath, absolute xpath, locators, selenium automation xpath, css viewers, css validator, css editor, css locators, css selectors, xpath selectors, unique xpath, unique css selectors.
10. xpath editor xpath helper xpath viewer for Chrome Browser. Very helpful in Automation testing. Selenium Locators.
11. In short, you can call it is as FirePath for all browsers as well.
12. Get the relative xpath, absolute xpath.
13. A simple extension, a best extension for finding out relative xpath absolute xpath expression of web elements.
