Tools To Find XPath In Chrome Browser

Hello Folks,

We have seen tools to find XPath in Firefox. Those tools were specific to Firefox browser.

In this post, we will learn tools to find XPath in Chrome browser.

Finding XPath without any tools:

You can find XPath and CSS selector of any web element in chrome browser without any tools as well. Let’s learn how.

Steps to find XPath or CSS selector:

1. Open Chrome browser.
2. Open Flipkart URL.
3. Right click on Flipkart logo and inspect it. IT will highlight html code of web element.
4. Mouse hover on ‘Copy’. You will see two options:
   1. Copy selector: It will give you CSS selector.
   2. Copy XPath: It will give you XPath.

It will give you below paths:

1. CSS Path: #container > div > header > div._1tz-RS > div.Y5-ZPI > div > div > div._2OJxl5 > a > img
2. XPath: //*[@id=”container”]/div/header/div[1]/div[2]/div/div/div[1]/a/img

But above paths are lengthy and less stable.

Finding XPath with tools:

XPath Helper:

It is an extension of Chrome browser which makes it easy to extract, edit, and evaluate XPath queries on any webpage.

Installation of XPath helper:

Step 1: Open chrome browser.

Step 2: Type “chrome://extensions/” in address bar and press ‘Enter’.

Step 3: Click on ‘Get More Extension’ link. (It will be in down of page)

Step 4: Type ‘XPath helper’ in search box.

Step 5: Click on ‘ADD TO CHROME’.

Step 6: Click on “Add extension”.

Step 7: Restart chrome browser.

After step 7, you should get an icon as shown below:

How to use XPath Helper:

Step 1: Hit Ctrl-Shift-X (or Command-Shift-X on OS X), or click the XPath Helper button
in the toolbar, to open the XPath Helper console.

Step 2: Hold down Shift as you mouse over elements on the page. The query box will continuously update to show the XPath query for the element below the mouse pointer, and the results box will show the results for the current query.

Step 3: If desired, edit the XPath query directly in the console. The results box will immediately reflect your changes.

Step 4: Repeat step 1 to close the console.

Notes:

1. If the console gets in your way, hold down Shift and then move your mouse over it; it will move to the opposite side of the page.

2. When rendering HTML tables, Chrome inserts artificial <tbody> tags into the DOM, which will consequently show up in queries extracted by this extension. So while using it, we need to remove that.

We notice that XPath helper gives absolute XPath which is not good as any change in DOM structure will effect this badly. So, it is not so useful for us.

Relative XPath Helper:

It is also an extension of Chrome browser and developed by an Indian named Syam Sasi.

Installation of XPath Helper:

Just follow installation steps of XPath helper. Just search ‘Relative XPath Helper’ instead of ‘XPath helper’.

You will get an icon of Relative XPath Helper as shown below:

How to use XPath helper:

This tools is very useful when you need to find XPath of one web element with reference of another web element. Like we have concept of independent and dependent in XPath expression.

To find the XPath of single web element:

Step 1: Click on icon of Relative XPath helper.

Step 2: Right click on web element.

Step 3: Right click on same web element again. By clicking second time on same webe lement, it will give final result. In final result it will append “/self::<tag name>“.

Step 4: Just remove “/self::<tag name>” from final result and you can use it.

To find XPath of first web element(dependent) to second web element(independent):

Step 1: Click on icon of Relative XPath helper.

Step 2: Right Click on dependent web element first.

Step 3: Right click on independent web element.

Step 4: Final result is ready.

Note: You need to be careful as sometimes, it uses web element attribute which is dynamic. As in above example class value is dynamic. You should change it to proper attribute.

That’s it. I think it should be very clear to you. If you have any doubt, feel free to ask me always.

If you like my posts, please like, comment and share. Feedback and suggestion are always welcomed.

Thank You!!

#HappyLearning