What is XPath in Selenium and How to Find in Chrome

If you are searching for how to find XPath in Chrome for Selenium, you have landed on the correct article.

XPath is one of the most powerful and flexible ways to locate web elements in Selenium, especially when other locators (ID, name, class, CSS) fall short. Whether you’re automating a complex UI, handling dynamic elements, or validating large DOM structures, the right XPath ensures reliable test automation.

We propose that you practice finding XPath in the Chrome browser as much as possible because you will be required to locate XPath in the Chrome browser only when taking any company technical test.

If the elements are not identified by the generic locators like id, class, name, and so on, XPath is used to find them on the web page in Selenium automation.

And so, in this article, let’s discuss:

1. What is XPath?
2. How to find XPath in Chrome for Selenium?

What is XPath in Selenium?

XPath (XML Path Language) is a query language used to navigate through XML/HTML documents. With XPath, Selenium can locate elements based on:

• Node hierarchy
• Relationships between elements
• Attributes
• Text content
• Partial matches
• Dynamic patterns

Compared to CSS selectors, XPath can traverse both forward and backward in the DOM, making it particularly useful for dynamic and deeply nested structures.

In Selenium, the basic XPath format is:

xpath=//tagname[@Attribute=’Value’]

Why Use XPath in Selenium?

XPath is useful when:

• IDs are auto-generated or dynamic
• Elements don’t have stable attributes
• You need to locate elements relative to other elements
• Handling complex DOMs (iframes, custom components, shadow roots*)
• Working with text-based selections

XPath isn’t always the first choice, but it becomes the best choice when you need your tests to be flexible.

Types of XPath

XPath comes in two main forms:

1. Absolute XPath

Starts from the root (HTML) and traverses the entire DOM.

Example:

html/body/div[2]/div[1]/ul/li[3]

Pros:

• Direct and straightforward

Cons:

• Breaks easily if UI changes
• Too long and brittle

Use only for debugging, not automation.

2. Relative XPath

Starts from anywhere in the DOM.

Example:

//input[@id=’username’]

Pros:

1. Shorter
2. More stable
3. Best practice for automation

Static vs Dynamic XPath

Most of the UIs these days generate dynamic IDs that change in intervals or when there is a page refresh. In such scenarios, the Dynamic XPath in our test scripts ensures test robustness.

Static XPath

It uses fixed attribute values to locate the elements.

For example:

//button[@id=’loginBtn’

Dynamic XPath

It uses patterns, partial matches, and conditions to locate the elements on the web page.

For example:

//button[contains(@id, ‘login’)]

You can use dynamic XPath in below scenarios:

• IDs include hashes (e.g., “username_123”)
• React/Angular/Vue renders a dynamic DOM
• Elements change positions

XPath vs CSS Selector

Feature	XPath	CSS
Navigate backward in the DOM	Yes	No
Performance	Slightly Slower	Faster
Select By Text	Yes	No
Readability	Medium	High
Best For	Dynamic/Complex DOM	Stable, attribute-rich DOM

How to Find XPath in Chrome (Step-by-Step)

The steps below will guide you on inspecting an element and finding the XPath of an element on a web page in Chrome for a Selenium WebDriver script:

1. Launch the Chrome browser and navigate to the URL or webpage.
2. Hover the mouse over the desired element (object) on the web page, right-click on the element you are looking for XPath, and select “Inspect.”
3. The elements panel will now appear on the right-hand side of the screen. The HTML code of the element will be highlighted in blue in this frame.
4. In the panel, press ‘ctrl+F’ to enable DOM searching.
5. In the panel, you can now use XPath to evaluate that element.
6. If XPath matches any elements, they will be highlighted in yellow in the DOM.

Example – Writing XPath for Input Fields

Step 1: Right-click on the element (First name) and select the Inspect option, as shown below.

Step 2: You should now be able to see the HTML code for the “First name” element in the blue strip. As shown below, to enable DOM searching in the panel, press ‘Ctrl+F’.

Step 3: Write the XPath of any element using the basic format. The XML path syntax determines the path of an element on a webpage. The following is the standard syntax for creating XPath:

XPath = //tagname[@Attribute = 'Value']

Here 

// ➨  It is used to select the current node in the entire document.

tag name ➨ It is the name of the tag of a particular node. For example, input.

@ ➨ It selects attributes like id, name, className, etc.

Attribute ➨ It is the node’s attribute name. For example, type, class, name, id, etc.

Value ➨ It is the value of an attribute.

In the same way, we can write XPath for different elements. Let’s see more examples.

Sample XPath Examples

1. XPath(Surname): //input[@name = ‘lastname’] (1 of 1 matched)
2. XPath(New password): //input[@data-type = ‘password’] (1 of 1 matched)
3. XPath(Female Radio button): //input[@id = ‘u_0_8’]
4. XPath(Sign Up): //button[@name = ‘websubmit’] 
5. XPath(Facebook logo): //img[@class = ‘fb_logo img sp_XWJdzZnoeA1 sx_ba923f’] 

Simple Steps to Find XPath in Microsoft Internet Explorer Browser:

Microsoft Internet Explorer, like Google Chrome, has an in-built feature for inspecting web page elements.

To view the HTML code of a component on a web page in Internet Explorer, follow the given steps:

1. Pressing the F12 key will launch Developer Tools. The developer tools menu will be displayed.
2. Click the pointer icon or press ‘Ctrl+Shift+C’ and move the cursor over the desired element on the page’s HTML code to inspect the element.
3. The developer tool will highlight elements’ HTML code with a blue outline.

Advanced XPath Functions in Selenium

1. Basic XPath: An essential XPath expression determines nodes or a list of nodes based on attributes, such as Name, Id, Classname, etc.
2. Contains(): Contains() is an XPath expression method. It is used when the value of any attribute, such as login information, changes dynamically.
3. The element with partial text can be found using the contains() feature.
4. Using OR(|) & AND(and) Operator: These operators can be applied in an XPath expression when two conditions are used to determine if either of the conditions is true. At least one of the conditions must be met to find the element.

“OR” is used when either of the conditions is true.

“AND” is used when both are true.

5. Xpath Starts-with(): It is a function used to find the web element whose attribute value changes when the page or other dynamic operations occur. The text at the start of the attributes’ value is matched in this method to find the element whose attribute value changes dynamically. You can also find elements with static attribute values.

6. Text() Function in XPath:
   The XPath text() function is a Selenium web driver built-in function used to locate elements based on the text of a web element. It aids in identifying specific text elements and the location of those elements within the set of text nodes. Therefore, the elements that need to be found should be in string form.

What are the XPath Axes in Selenium?

In Selenium, XPath uses Absolute and Relative paths to locate web elements. Furthermore, all web elements in the XML DOM are linked to one another via a hierarchical structure. 

For example, XPath provides “XPath Axis” attributes, which use the relationship between various nodes to locate those nodes in the DOM structure. 

Ancestor Axis:

In XPath, the ancestor axis helps to select all of the current node’s parent elements. It is helpful in situations where we can identify the child element node but not its parent or grandparent nodes. 

In such cases, we can use the child node as a reference point and the “ancestor” axis to identify the parent node.

Syntax
//tagname[@attribute ='Attribute_Value']/ancestor::parent_node

Child Axis:

In XPath, the Child Axis is used to find all the child nodes of the current node. In contrast to the ancestor axis, the child axis helps locate elements if the parent element of the required node can be found.

Syntax
//tagname[@attribute ='Attribute_Value']/child::child_node

Descendant Axis:

The Descendant Axis lets you access all of the current node’s children and sub-children. The main difference between a child axis and a descendant axis is that the child axis locates only immediate child nodes. In contrast, the descendant axis can locate children and grandchildren nodes.

Syntax
//tagname[@attribute ='Attribute_Value']/descendant::attribute

Parent Axis:

The Parent Axis resembles the Ancestor Axis in appearance. It recognises the current node’s immediate parent. 

The main distinction between parent and ancestor is that the ancestor axis will locate all upper hierarchical nodes, whereas the parent axis will only locate the immediate parent node.

Syntax
//tagname[@attribute ='Attribute_Value']/ancestor::parent_node

Following Axis:

The elements after the current node can be located with the following axis. It sets the current node as the base and searches the DOM for the required element after the current node.

Syntax
//node[@attribute='value of attribute']/following::attribute

Following-Sibling Axis:

The following-sibling axis is similar to the XPath following axis. Only sibling nodes, i.e., nodes on the same level as the current node, are recognised by the following sibling. 

For example, in the image below, both the highlighted “divs” are on the same level, i.e., are siblings, whereas the “div” just above them is the parent.

Syntax
//node[@attribute='value_of_attribute']/following-sibling::attribute

Read also: Challenges in Automation Testing

Top 10 XPath Finder Chrome Extensions

1. SelectorsHub

In less than 5 seconds, XPath in Chrome and a CSS selector could be returned. The selector’s hub auto-suggests all attributes, text, and everything for quickly completing selectors. 

We no longer need to copy and paste attribute values from the DOM when creating XPath and CSS selectors. 

It also supports ShadowDOM, iframe, and SVG elements. Finally, because it is the only tool that helps shadow dom selectors, it also provides a proper error message indicating what is wrong with the XPath and CSS selector.

2. XPath Helper

Using the XPath helper on any web page, we can easily select, edit, and evaluate XPath queries. 

It’s easy to use and has a more extensive user base than the other plugins on this list. So, for example, to write or edit XPath, we must first open the console by clicking on the extension.

3. ChroPath

This extension generates and validates unique selectors, such as relative XPath, absolute XPath, CSS selectors, link text, and partial link text, with just one click. It makes writing, editing, extracting, and evaluating XPath queries on any web page a breeze.

4. Scraper

It obtains information from web pages and into spreadsheets. It’s a simplified version of data mining that speeds up online analysis. 

It’s designed to be a simple tool for intermediate and advanced XPath users.

5. Relative XPath Helper

Two web elements’ relative XPath expressions are defined using the relative XPath Helper. Then, simply right-click on the first and second elements to get the relative XPath.

6. XPath Helper Wizard

XPath Helper Wizard creates short paths that don’t split as the website grows. For example, all XPaths linked to XPath are created if the XPath parent contains an XPath.

7. XPath Finder

XPath Finder in Chrome DevTools locates XPath components. It highlights the corresponding elements with highlighted contours and context and records the XPath history.

8. XPather

This add-on only affects the current document. The XPath 2.0 standard is supported. It displays the result and all of the matched nodes in the sidebar. The matched node can be found on the page by clicking on the sidebar.

9. Eskry

It aids in the creation of locators for HTML elements using the point and grabs method. By clicking on any web element on your Web page, you can create an XPath/CSS Selector.

You can also check out our ultimate guide on locators in Selenium

10. Firebug Lite for Google Chrome

Firebug Lite isn’t a replacement for Firebug or Chrome developer tools. Instead, it provides a comprehensive view of HTML, DOM, and Box model shading components. It even looks for HTML components with the mouse.

Conclusion

In Selenium, XPath is one of the simplest ways to find WebElement positions. In XPath expressions, you can include highly complex and delicate artefacts. 

You must first define the WebElements and their actions before automating any web program. We hope this tutorial has covered all of the essential aspects of finding XPath in Chrome.

So now, click here to know more about TestGrid.io, and also, to read more articles, head over to our blog section.

Frequently Asked Questions (FAQs)