If you are a test automation engineer, then webelement identification, XPath, CSSpath shouldnt be new terminologies for you. All these are basic things to work on test automation. They are used to interact to respective web element using selenium webdriver (or could be any other).

Now, in any web browser, inspector option is always present, used to look in to DOM structure. By looking in to this DOM, one may write Xpath or CSSpath, but this is manual process and time taking, moreover, you need to again verify if it is unique. To automate these things, there are many browser extensions present in market. Out of them, i felt ChroPath is the best one. Let us have a look in, what exactly it is & how it work.

What is ChroPath?

ChroPath is an extension for Google chrome and mozilla firefox browsers, used to write, edit and evaluate XPath and CSSpath. Before ChroPath came in to picture, there was something called firebug and firepath, but now latest versions of firefox, do not support them. So Chropath is reaching to more and more automation developers, and believe me, it is one of the best.

Install ChroPath on Google Chrome and Mozilla Firefox

ChroPath is just an extension / Add-on to the browser. Installation is pretty simple. Go to the respective URL’s (below mentioned) and you will find an option to add the extension / Add-on to the browser. Just click on Add & you will see, ChroPath will get installed on your browser in few seconds.

Download Link for Chrome Browser: https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo?hl=en

Download Link for Firefox Browser: https://addons.mozilla.org/en-US/firefox/addon/chropath-for-firefox/

If you don’t see the ChroPath addon on the above URL, go to the respective Add-on store & search for ChroPath there. You should find it.

Add-On store link for Chrome: https://chrome.google.com/webstore/category/extensions?hl=en

Add-On store link for Firefox: https://addons.mozilla.org/en-US/firefox/extensions/

Once ChroPath is installed, you should see ChroPath Icon on the top-right corner of your browser (As shown in below snap). (If you don’t find it there, Go to Menu –> Add-ons. You should find it there.

Where Can i find ChroPath to Start finding XPath / CSSpath?

Now, you wish to start with finding XPath / CSSpath for your web application. Open your web application in the browser where ChroPath is installed & Press F12. It will open a DOM structure. If F12 is not working, just right click on the web page (or on the web element whose XPath you are looking for), you should see option as Inspect Element. Click on it.
In the DOM structure, Last tab should be present with name ChroPath & there you go. Click on it, It is going to help us for finding XPath / CSSpath.

How to Find XPath / CSSpath for webElement?

Finding XPath or CSSpath is very easy task in ChroPath. Refer below snap for step by step way.
Step1: Open DOM (using F12 or by using Inspect Element Option after right click)
Step2: Take your mouse to web element which you want to inspect (find locator, XPath or CSS) and then click on it.
Step3: You should see Xpath (Relative and Absolute), CSSPath for required web element. Check if it is uniquely identified (Check for number of matching nodes).
Step4: Use Copy option to copy the required locator for your use. Refer below image.

How to verify Xpath / CSSpath if correct and unique?

Features and Advantages of ChroPath.

Final Thoughts