Right-click on the web page, and then click Inspect.
In the right side of Elements tab, click on ChroPath tab which will be the last tab.
To generate selectors, inspect element or click on any DOM node, it will generate the unique relative XPath and all possible Selectors with their occurrences. Scroll in ChroPath panel to see all generated Selectors.
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 total number of the matching node(s) and nodes value as per their sequential occurrence. A green colour outline appears around to highlight the first matching elements and rest in blue colour in the web page.
If you mouse hover on any matching node in the ChroPath tab, green/blue dashed outline will convert into dotted orange red to highlight the corresponding element in the webpage.
If the found element is not in visible area on webpage then mouse hover on found node in ChroPath panel will scroll that element in the visible area with dotted orange red outline.
If found element is not highlighted but visible then on mouse hover on matching node on ChroPath tab it will highlight element with dotted orange red outline.
Copy the locators just by clicking on copy icon.
Click on edit icon if want to edit any locator.
As we all know in Firebug and Firepath is deprecatede with New version Firefox ,And its very difficut to verify your customized xpath in current version firefox.
So Finally i found a solution for this i.e “ChroPath”
.NOTE: This is a fork of Firebug Lite as the original version is not supported any longer by newer Chrome versions.If you didn't use this extension before, and only think that you might need it - you're most likely better of with the Chrome Devtools ( press F12 or Control+Shift+I or Command+Option+I ). If you like, please support us to keep old extensions alive by donating a beer, a. Since firebug is gone in the latest version of firefox, what options are available to check CSS and XPATH? Firefinder was by far the best tool for this, but now it appears that I. The ChroPath add on is available for Firefox as well. Click to see full answer Likewise, people ask, where is XPath extension in Chrome? Find XPath Using XPath Helper Wizard Chrome Extension With the key combination, you can open the XPath console. Firefox 4 is the fastest starting browser, unless you install firebug. I use a second profile for those times I must run firebug. Firefox.exe -P to configure it, for those interested, and firefox.exe -P profilename to run it in a given profile. – ZJR Apr 27 '11 at 20:26.
[EDIT:Now the chropath is available for Firefox,chrome,opera and Edge browser and version 6.0 having various feature like record the steps,get all xpath altogether in csv file,get xpath using desired attribute and many more.As lots of tutorial and blogs are available so will share the link of the blogs and tutorials in this post itself https://medium.com/@mailcoolsanjay/what-are-the-unique-innovation-in-autonomiq-chropath-6-0-version-2b1b1984a4c8]
About this extension:
ChroPath is a developer tool, which is used to edit, inspect and generate relative xpath, absolute xpath and CSS selectors. ChroPath makes it easy to write, edit, extract, and evaluate XPath queries on any webpage. ChroPath is the only tool for now which provide the unique Relative xpath and CSS selector for any web element in webpage in Firefox and Chrome. ChroPath is very good alternative for Firebug and Xpath Finder.
The link for Chrome browser-
https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?hl=en
The link for Firefox browser-
Chropath
How to use ChroPath –
- Right-click on the web page, and then click Inspect
- In devtools panel click on ChroPath tab.
- Click on ChroPath tab and click on selector to Select the Type of Selector.
- Click on Select Element button and hover to the element , You can observer the Xpath or CSS As per your selection
- Now if you want to see the all node of the page write // node name and enter, Eg://div
- Now you can create Xpath as per your requirement
- You can verify the xpath by clicking enter.
Chropath For Firefox Download
Note:
1- Click again on inspect to disable the inspect action.
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 add css=2.
Ref: From the post of Sanjay Kumar(Medium.com)
Comments are closed.