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 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.

ChroPath to find xpath of element

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

Get absolute and relative xpath using chropath

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.

copy xpath in chropath

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.

append driver command with xpath in chropath

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.

record xpath in chropath

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.

1 comment:

  1. Important update: This is Sanjay Kumar, Creator of ChroPath.
    I have stopped development and support on ChroPath. You will not get any update on ChroPath from me.
    Please upgrade to my new XPath tool SelectorsHub which is very much advanced than ChroPath.
    SelectorsHub is absolutely FREE community tool. It is a browser plugin available for all the browsers Chrome, Firefox, Edge and Opera. SelectorsHub download link👇

    Please share this info in your network, it will help many