6 Ways to Use XPath in Selenium WebDriver
This blog will explain different ways to use XPath in Selenium. Read along or jump ahead to whichever section interests you most:
- What Is XPath in Selenium?
- What Is XPath?
- Types of XPath Locators
- Types of XPath
- 6 Ways to Write Dynamic XPath in Selenium
XPath is a technique in Selenium that allows you to navigate the structure of a webpage’s HTML. XPath is a syntax for finding elements on web pages. Using UXPath in Selenium helps find elements that are not found by locators such as ID, class, or name. XPath in Selenium can be used on both HTML and XML documents.
XPath is defined as XML path. It is a syntax or language for finding any element on the web page using the XML path expression. XPath is used to find the location of any element on a webpage using HTML DOM structure.
In Selenium automation, if the elements are not found by the general locators like ID, class, name, etc., then XPath is used to find an element on the web page.
In this tutorial, you will learn about XPath in Selenium and different XPath expressions to find complex or dynamic elements whose attributes changes dynamically on refresh of any operations.
The basic format of XPath is explained below.
Syntax for XPath
XPath contains the path of the element situated on the web page. Standard syntax for creating XPath is as follows:
- // : Select current node.
- Tagname: Tagname of the particular node.
- @: Select attribute.
- Attribute: Attribute name of the node.
- Value: Value of the attribute.
To find the element on web pages accurately, there are a number of different types of locators.
|XPath Locators||Find different elements on a web page.|
|ID||To find the element by ID of the element.|
|Classname||To find the element by classname of the element.|
|Name||To find the element by name of the element.|
|Link Text||To find the element by text of the link.|
|XPath||XPath required for finding the dynamic element and traverse between various |
elements of the web page.
|CSS path||CSS path also locates elements having no name, class, or ID.|
There are two types of XPath:
- Absolute XPath
- Relative XPath
Absolute XPath is the direct way to find the element. But the disadvantage of the absolute XPath is that if there are any changes made in the path of the element then that XPath fails.
The key characteristic of XPath is that it begins with the single forward slash(/) ,which means you can select the element from the root node.
Below is an example of an absolute XPath expression of the element shown in the below screen.
Absolute XPath: /html/body/div/div/div/header/div/div/a/img
For Relative XPath, the path starts from the middle of the HTML DOM structure. It starts with the double forward slash (//), which means it can search the element anywhere at the webpage.
You can start from the middle of the HTML DOM structure with no need to write a long XPath.
Below is the example of a relative XPath expression of the same element shown in the below screen. This is the common format used to find elements through a relative XPath.
Relative XPath: //*[@id="block-perfecto-main-menu"]/ul/li/a
Related Reading: What to Expect in the Latest Version of Selenium
If you are testing with Selenium, these examples of writing XPath expressions will help your automation.
1. Basic XPath
XPath expression selects nodes or lists of nodes on the basis of attributes like ID, name, classname, etc. from the XML document as illustrated below.
Here is a link to access the Perfecto login page.
Here are some more basic XPath expressions:
Contains() is a method used in an XPath expression. It is used when the value of any attribute changes dynamically — for example, sign up information.
The contain feature has an ability to find the element with partial text as shown in the below example. In this example, we tried to identify the element by just using partial text value of the attribute. In the below XPath expression, partial value 'Name' is used.
Complete value of 'id' is 'FirstName' but using only partial value 'Name.'
In the above expression, we have taken the 'id' as an attribute and 'Name' as a partial value as shown in the below screenshot. This will find two elements (FirstName and LastName) as their 'id’ attribute ending with 'Name.'
3. Using OR & AND
In OR expression, two conditions are used, whether the first condition OR second condition should be true. It is also applicable if any one condition is true, or maybe both. This means that any one condition should be true to find the element.
In the below XPath expression, it identifies the elements whose single or both conditions are true.
XPath=//*[@id='FirstName' or @name='LastName']
Highlight both elements as ‘First Name’ element having attribute 'id' and ‘Last Name’ element having attribute 'name'.
In AND expression, two conditions are used. Both conditions should be true to find the element. It fails to find the element if any one condition is false.
XPath=//*[@id='FirstName' and @name='FirstName']
In the below expression, we highlight the 'First Name' element as it has both attributes 'id' and 'name.'
4. Starts-With Function
Starts-with function finds the element whose attribute value changes on refresh or any operation on the webpage. In this expression, match the starting text of the attribute used to find the element whose attribute changes dynamically. You can also find the element whose attribute value is static (does not change).
For example, suppose the ID of a particular element changes dynamically like:
And so on. But the initial text is same. In this case, we use Start-with expression “message.”
In the below expression, there are two elements with a class starting with "form." So, XPath finds those elements whose 'class' is starting with 'form.'
In this expression, with text function, we find the element with the exact text match as shown below. In this case, we find the element with text "Username or email."
XPath=//*[text()='Username or email']
6. Using Index:
This approach comes in use when you wish to specify a given tag name in terms of the index value you wish to locate.
In the below expression, a DOM has multiple input tags for each different field value, and you wish to input text into the second field i.e. Last Name.
Use These XPath in Selenium Tips With Perfecto
Scale Selenium test automation in the cloud with Perfecto. Perfecto integrates seamlessly with Selenium, and every other tool in your toolchain. With Perfecto and Selenium, you can:
- Execute web testing 50% faster than other vendors.
- Enjoy the scalability of Selenium Grid from the cloud.
- Scale your tests across VMs, real Macs, and multiple platforms.
- Find and fix bugs quickly with advanced test reporting.
- Integrate into your entire CI/CD toolchain.
Experience the world’s largest global testing cloud for web and mobile apps. Try Perfecto free for 14 days.