What is XPath in Selenium
Testing is a crucial aspect when you’re developing an application. It helps you to make sure that your application is working as intended in all use cases. Using an automated testing tool like Selenium can help you to save time and reduce human error as the browser can be programmed to perform actions needed for testing automatically.
Selenium is well-known for automating web browsers to test web applications but it can also be used for automating boring web-based administration and other repetitive tasks. To perform different actions like entering a text, clicking a button, submitting a form, etc., you will need to locate the HTML elements used in these actions.
Selenium’s WebDriver supports 8 types of location strategies, as shown in the image below:
Generally, locating an HTML element using its ID or name is preferred as they are unique and constantly predictable. However, there are times when they are unavailable. In this case, you can use CSS selectors or XPath.
In this article, we will discuss the basics of XPath and how to use it to locate an HTML element from a web page.
What is XPath
XPath, as known as XML Path Language, is an expression language that is used to navigate and select elements in an XML or HTML document. It provides a way to locate elements on a web page based on their tag name , attributes , position , text content , and more in the document’s hierarchy.
The XPath expression is constructed according to the position of the HTML element in the document's hierarchy. It's like a map that leads you to the target from a starting point. Therefore, you can use XPath to locate an element on a web page when its ID, class, name, and other attributes are unavailable and you can’t use DOM.
Types of XPath
Similar to a file path, there are two ways to write an XPath—absolute path and relative path.
An absolute path starts from the root element of the document and navigates down the hierarchy of the elements until the target element is found. It provides the full path to the element.
An absolute XPath always starts with a forward slash (/) and it's typically used when the element does not change its position in the HTML file. Or else, the full path may not be valid.
A relative path starts from a known element (recognized using its tag name/attributes/position/others) and provides a path to the target element based on its relationship to the element. It does not need to start from the root element.
A relative XPath starts with a double slash (//) and it can be used when the structure of the HTML document might change. This is because the XPath to the target element may not be affected even when the HTML structure changes.
🐻 Bear Tips: Separate your steps with
/to select the children. If you don’t want to select the direct children, use
//to select the descendants instead.
XPath Syntax: How to Write a Basic XPath
Firstly, you need to identify the element that you want to select and decide on the path to it. Then, write the XPath expression following the structure below:
To locate an element using XPath, these are some easiest methods you can use: tag name , attribute , position , and text content.
You can use the name of an HTML element, such as
h1, etc. in an XPath to locate it.
For example, this will get all the hyperlinks (defined by
<a>) in the HTML document regardless of their hierarchy position:
You can also use the HTML element’s attribute like ID, class, type, etc. in the XPath to locate selected elements with the specified attribute value only.
This is the syntax:
If you want to locate a
div with a class named ‘intro’, you can write it this way:
This will return all
div elements that match the class name.
When there is more than one element with the specified tag name, you can use position to locate the target element:
For example, the XPath below will locate the second hyperlink element in the HTML:
Alternatively, you can use the position function:
Another way to locate an element is to find it based on the text it contains:
To locate all the
input elements that contain the text “Confirm”, you can write:
🐻 Bear Tips: You can use a wildcard (*) to select all elements regardless of their tag names, eg. //*[@class='intro'], //*[text()='Confirm'], etc.
Other String Functions
Contains is a function that checks whether an element contains a specific string of text. Different from
text()='value' that needs the entire text content to match exactly,
contains() returns true even if it matches partially.
For example, you can find the
p element that contains the word “hello” using the XPath below:
p elements that have “hello” in the paragraph will be returned.
ends-with() functions return true when the text content matches partially too but the string has to be at the beginning or the end of the text content.
It can also be used to check an attribute’s value.
//input[starts-with(@name, 'username')] //input[ends-with(@class, 'btn')]
In addition to the methods above, you can use operators to further define the condition for locating an HTML element. This allows you to specify complex conditions.
Relational Operators (<, <=, >, >=, =, !=)
//a[@id = "abc"] //a[@class != "article-link"] //a[@price > 10]
Logical Operators (and, or , not)
//div[@id="highlight" and position()=2] //div[(x and y) or not(z)]
Here are some simple examples of how to use XPath to locate different elements in an HTML file using the methods and functions mentioned.
<html> <body> <div class="container"> <h1>Welcome</h1> <p>XPath can also be known as XML Path Language.</p> </div> <div class="highlight"> <p>You can use XPath in Selenium to find an HTML element.</p> <p>Here are some examples</p> </div> </body> </html>
h1 element (relative XPath):
div element with the
container class (relative XPath):
Alternatively, you can use its position. Being the first
div element, the XPath will be:
To write it as an absolute XPath, start from the root of the document:
To select the
p element within the
/p to the expression:
Another way is to compare the text content:
//p[text()='XPath can also be known as XML Path Language.']
These are some simple examples that show how to use XPath to locate an HTML element from a web page using different expressions. When writing an XPath, you need to consider different factors, like the position of the element in the HTML document, whether the content will change, the performance of your test, and more.
🐻 Bear Tips: Here's a useful tool—install this Chrome extension to get the absolute XPath of any HTML element on a web page!
These XPath basics should be enough to help you locate an HTML element when using Selenium. When it comes to which method to use to locate an HTML element, it will depend on how you write your code and how it is structured. Nonetheless, as XPath can be used in other automation and testing tools like Appium, Scrapy, SoapUI, etc. as well, learning it will make your automation journey easier.