Top Chrome Extensions to find Xpath in Selenium

Xpath is one of the most essential locators amongst the eight locators given by Selenium: ID, Name, Class name, Link text, Partial link text, Tagname, CSS selector, and XPath. Finding the XPath of an element can be easy and tricky at the same time, depending upon the structure of the DOM (document object model).

However,  Xpath helps find the most dynamic and complex elements in a DOM. There are two types of XPath: Absolute and Relative. Depending upon the type of element to be located and its complexity, one can decide which Xpath to use.

We can combat this by using various extensions that help us find an element’s XPath effectively and reduces the effort required in generating complex Xpaths by inspecting an element and then generating it manually.

Let’s look at the list of popular Chrome extensions that help find an element’s XPath effectively and reduce the effort required in generating complex Xpaths.

1. SelectorsHub

SelectorsHub is a free XPath and CSS selectors plugin. It is one of the best plugins for generating XPath, CSS selectors, JS path, JQuery, Playwright selectors, and various other types of possible selectors. SelectorsHub has various features where it helps to generate and verify our XPath. It can deal with iframes, nested iframes, shadow DOM, nested shadow DOM, SVG elements, and dynamic and invisible elements. It also helps to generate XPath manually by auto-suggesting. 

Steps to install and use SelectorsHub Plugin:

1. Download the SelectorsHub plugin from their official website.
2. Add the plugin to your browser and restart the browser.
3. Navigate to a website, right-click on an element, and select inspect. SelectorsHub will be the last tab in the dev tools.
4. Copy and paste the desired XPath in your automation code.

2. ChroPath

ChroPath is an extension for chrome and firefox browsers used to generate and verify an XPath or CSS selector. 

Steps to install and use ChroPath Plugin:

1. Download the plugin for Chrome or Firefox.
2. Open your web application and inspect an element.
3. ChroPath will be present on the last tab in Devtools.

3. Scraper

Scraper acts like a web scraper used to extract data from web pages and store them into Google spreadsheets. Scraper is simple and easy to use. It is a Google Chrome extension and it comes with two options to extract data from any part of a web page, Xpath or JQuery selector.

Steps to install and use Scraper Plugin :

1. Add the plugin  to your browser from Chrome Web Store  
2. Right click on an element you want to inspect and click on scrape similar
3. A Scraper window gets and then you can generate the xpath of the selected element.

4. Relative XPath helper

The Relative XPath Helper plugin helps to find the relative Xpath between two web elements.

It is easy to use as all you have to do is right-click on the elements for which you want the relative xpath and create or edit the xpath as per the requirement.

 Steps to install and use Xpath Helper Plugin :

1. Add the plugin to your browser from Chrome Web Store
2. Open the application to inspect and click on the relative Xpath helper plugin
3. Right click on the element for which Xpath has to be generated.

5. Xpath Helper

Xpath Helper is another top Chrome extension that  generates, edits and evaluates Xpath. It is the easiest plugin to use compared to other plugins. You just have to click on the console and edit or generate your xpath.

     Steps to install and use Xpath Helper Plugin :

1.  Add the plugin to your browser from the Chrome Web Store and restart the browser
2. Open the application you want to inspect and Press Ctrl+Shift+X or Press Xpath     helper button in toolbar
3. Press Shift button and mouse hover the elements you want to inspect. Xpath is generated in the console . We can also edit the xpath as required and see the desired xpath in the results window.
4. Again press Ctrl+Shift+X to close the console

6. Xpather

Xpather plugin operates on the current document and highlights the matched element. It also displays all the matched elements on the right side bar. It supports Xpath 2.0.

Steps to install and use Xpather Plugin:

1. Add the plugin to your browser from the Chrome Web Store
2. Open the application to inspect and click on the Xpather plugin
3. Enter the Xpath on the text box and  search. It will highlight the matched element and display all the matched elements at the right sidebar. 

7.  Truepath

Truepath Chrome extension generates relative Xpath based on various attributes like Id, href,src,class, name,title,index etc. It is efficient as it provides relative Xpaths based on multiple attributes.

Steps to install and use Truepath Plugin :

1. Add the plugin to your browser from Chrome Web Store
2. Open the application to inspect and click on the Truepath plugin
3. Right click on the element to inspect and click on Relative xpath
4. A Truepath window will display once a matching element or elements are found. If no matching element is found then no window will be displayed.

Conclusion,

 This article  contains the plugins starting with the highest rating to the lowest one. However all the plugins are useful in their own way and it completely depends upon the users choice as in which plugin to choose for generating Xpath in Selenium. 

Hopefully, you shortlisted a a Chrome extension that help find an element’s XPath effectively and reduce the effort. When it comes to Selenium testing, using a BrowserStack’s high performance grid will accelerate build verification by over 10x with parallel execution of your tests, including UI testing, functional testing and regression testing.

Sign up for BrowserStack