ChroPath - Find XPath and CSS Selector using google chrome extension

Earlier we learnt about how to find XPath or CSS selector using Chrome Devtool to use it in selenium webdriver. ChroPath have same function with few additional feature which makes it more popular in selenium webdriver universe. Here i am presenting step by step guide to retrieve XPath or CSS selector of any web element using ChroPath chrome extension. Also we will look at few more useful features of ChroPath.

You can use SelectorsHub to Find XPath and CSS Selector.

Install ChroPath in Chrome

Before learning usage, You need to Install ChroPath in your chrome browser if it is not already installed. After Installation, Refresh your web page and it is ready to use now.

Get Relative and Absolute XPath using ChroPath

Sometimes you cant generate relative XPath of element as element do not have any reference to generate relative XPath. In this case, You need to find absolute XPath of element. ChroPath will provide you relative as well as absolute XPath of any web element.

Step 1 : Open google chrome browser in your system and then open your desired page (or you can use http://only-testing-blog.blogspot.com/2014/01/textbox.html) in browser.

Step 2 : Press F12 to open Chrome DevTool.

Step 3 : Click on ChroPath tab inside Elements tab. You will find it on right side of Elements tab.

Step 4 : Now, Enable element inspector from Chrome DevTool and click on web element to inspect it.

In above image, You can see that ChroPath has provided us relative XPath, Absolute XPath and CSS selector as soon as inspected element.

Copy or Edit XPath in ChroPath

Also you can copy or edit xpath or CSS selector by clicking on respective icon.

Set Driver Command in ChroPath

Also you can append driver command with xpath and CSS selector and get full syntax like driver.findElement(By.xpath("xpathvalue")) and use it directly in selenium webdriver test script. Click on append driver command icon as shown in below image to enable appending driver command with XPath.

Once you will click on set driver command icon, It will open driver command field with driver command appended. You can change it if you wish. After enabling append driver command, You have to inspect element again to get xpath appended driver command. Then you can copy it and use it in you selenium webdriver test script.

Recording multiple XPath using ChroPath

Also you can record multiple XPath or all web page element's xpath in one go. Click on Record multiple selector icon to enable record multiple element's xpath.

Once recording is started, Inspect all elements one by one. You will get list of all inspected elements in one go. Also you can download all recorded xpath in XLS file.