get relative xpath, absolute xpath & CSS selectors. Edit, inspect & verify XPath & CSS selectors in devtools panel itself.
ChroPath is the highest rated Relative and absolute XPath extension.
video tutorial - https://www.youtube.com/watch?v=ikC4gLt0u8M&feature=youtu.be
Update ChroPath 0.3.2 -
1) Optimised relative xpath for different types of attribute.
2) Optimised css selectors for id attribute.
3) Bug fix for valid xpath pattern.
a) ex- (//input[@type='search'])
b) ex- .//a[@title="Clone"]
4) Updated ChroPath 3.0 video link.
5) Updated support link from linkedin to twitter.
ChroPath 3.0 -
1. New UI
2. A lot optimisation has been done in Relative XPath generation algo.
3. Get proper error message with reason if selectors are not generated
4. Get all types of selectors by single click at one place
5. Verify XPath and CSS selectors in one place, no need to change dropdown value for different selectors
6. Edit and copy buttons are there for all types of selectors
How to use it-
1. After installing ChroPath, reload the page for which you want to use it or restart chrome browser.
2. Right-click on the web page anywhere, and then click Inspect.
3. In the right side of Elements tab, click on ChroPath tab.
Note- If ChroPath is not visible then click on the arrow icon as shown in the Screenshot. ChroPath 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 unique relative XPath/absolute XPath/CSS selector for the selected node.
5. To eavluate 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.
6. To copy the XPath/CSS value click on the copy icon.
Note- 1- To use only one selector rel xpath/abs xpath/CSS features, change the dropdown value from selector to rel XPath/abs XPath/CSS in header.
2- ChroPath 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.
1. It will generate the unique relative XPath/ absolute XPath and unique CSS selector for inspected element/selected node.
2. It opens as sidebar tab in devtools panel where you can access DOM, inspect element in Elements tab and write the XPath/CSS in ChroPath tab 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 ChroPath tab, blue dashed outline will convert into dotted orangered 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 ChroPath tab will scroll that element in the visible area with dotted orangered outline.
7. If found element is not highlighted but visible on webpage, on mouse hover on matching node in ChroPath tab it will highlight element with dotted orangered outline.
8. If you enter wrong XPath/CSS pattern it will highlight the input box in red color.
9. ChroPath 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 tool for Chrome. Xpath extension for Chrome. Xpath extension. Xpath tool. CSS extension for Chrome. CSS tool.