XPath Tutorial in Selenium WebDriver with Examples

In this tutorial, we are going to learn the most important topic XPath in Selenium WebDriver which is asked by the interviewer in any company interview.


Basically, when we write any test script, we generally prefer to use general Selenium locators such as id, name, className, etc.

But sometimes it is difficult to find any of them in the DOM (Document Object Model). In this case, we will have to use XPath to locate an element on the webpage.

So, let’s learn what is XPath and what are different ways to choose the most effective Xpath to find complex or dynamic elements whose attributes change dynamically on refresh or any other operations.

XPath In Selenium

XPath stands for XML (Extensible Markup Language) Path language. It is a query language which is used to search and select nodes in an XML document. All major web browser supports XPath.

Selenium WebDriver supports XPath to find the location of any web element on a web page using XML path expression. 

The basic syntax of XPath is explained below with screenshot.
The path of element at a webpage is selected by XML path syntax. Standard syntax to create XPath is given below:
       XPath = //tagname[@Attribute = ‘value’]
          // ➨ It select current node.
          tagname ➨ It is the name of tag of particular node. For example: input, div, img, etc. 
          @ ➨ It selects attribute like id, name, className, etc.
          Attribute ➨ It is the attribute name of the node. For example: type, class, name, id, etc.
          value ➨ It is value of attribute.

The XPath syntax and its terminology are shown in the below figure.

Syntax of XPath in Selenium WebDriver

For example:
     XPath = //input[@id = ‘user-message’]
How to Find XPath in Chrome Browser

Types of XPath in Selenium

There are two types of XPath in selenium.
1. Absolute XPath
2. Relative XPath

Absolute XPath in Selenium

Absolute XPath begins with a single forward-slash (/) which select element from the root HTML node. It is the easiest and direct way to find element but if any changes happen in the path of element, this XPath gets failed. So, this is the main disadvantage of using absolute XPath.

The example of an absolute XPath expression of the element is shown below.
          Absolute XPath: /html/body/div/div/form/input.
          /html: This is the root HTML element node. You will have noticed in absolute XPath expression that a slash (/) is used in the beginning which represents an absolute xpath.

Finding Elements with an Absolute Path

Absolute path refers to a very specific location of the element which depends on the structure or hierarchy of elements on a webpage. 

Here is an example where the username is located using absolute path. So, we can search element using absolute path like this. 
WebElement username = driver.findElement(By.xpath("/html/body/div/div/form/input"));

Advantage & Disadvantage of Absolute XPath:

➲ Advantage of using absolute XPath is that it identifies an element very fast.
➲ Disadvantage is that if anything goes wrong or some other tag is added in between, this path will no longer work.

For example:
If we define a path as html/head/body/table/tbody/tr/th. But when we add a tag between body and table, the path will be changed like this html/head/body/form/table/tbody/tr/th. In this case, the first path will not work as ‘form’ tag has been added in between.

Relative XPath in Selenium

Relative XPath starts from double forward-slash (//) and select element from anywhere on the webpage. It is the best practice to find element through relative XPath because it helps us to reduce chance of “ElementNotFoundException”.
With a relative XPath, we can locate an element directly irrespective of its location in the DOM. 

The example of a relative XPath expression of an element is given below. It is a general format used to find out element through a relative XPath.

             Relative XPath//input[@id = ’email’]

Other example of Relative XPath: .//*[@id = ‘username’]

1. .(dot): Dot at starting represents current node. It tells that the processing will start from the current node.
2. . .(double dot): It will select the parent of current node. For example, //table/. . will return div element because div is the parent of table element.

3. ‘*’: is used to select all the element nodes descending from the current node.
For example:
      /table/*:  It will select all child elements of a table element.
      //*: It will select all elements in the document.
      //*[@id = ‘username’]: It will select any element in document which has an attribute named “id” with the specified value “username”.

4. @:  It represents an attribute which selects id, name, className, etc.
For example:
        @id: It will select all elements that are defined with the id attribute in the document. No matter where it is defined in the document.
        //img/@alt: It will select all the img elements that are defined with the @alt attribute.
        //td[@*]: It will select all td elements with any attribute.

Finding Elements using Attributes values in XPath

We can also search for elements using their attribute values in the XPath. Let’s see an example where we will identify username field using the ID attribute.

WebElement username = driver.findElement(By.xpath("//input[@id = 'username']"));

Let’s take another example where image is located using alt attribute.

WebElement nextbutton = driver.findElement(By.xpath("//img[@alt = 'next']"));

Advantage & Disadvantage of Relative XPath:

➲ Advantage of using relative XPath is that you don’t have to create the long XPath. You can also start from the middle.
➲ Disadvantage of using relative XPath is that it takes more time in identifying the element as we specify the partial path, not the exact path.

Difference between “/” and “//” in XPath

There are mainly three differences between single slash and double slash.
1. Single slash is used to create absolute XPath whereas Double slash is used to create relative XPath.
2. Single slash selects an element from the root node. For example, /html will select the root HTML element.

Double slash search element from anywhere on the web page. For example, //table will select all the table elements from anywhere on the web page.
3. Single slash (/) defines ancestor and descendant relationships if used in the middle. For example, //div/table returns the div which contains a table object.

If double slash (//) is used in middle, it defines a descendant relationship. For example, /html//title returns title element which is descendant of html element.

Final words

Hope that this tutorial has covered all important points related to XPath in Selenium WebDriver with example. I hope that you will have understood basic concepts of Selenium XPath and enjoyed this topic.

In the next tutorial, we will learn how to find web element by XPath with practical example scenario.
Thanks for reading!!!
Next ⇒ Find element by XPath in Selenium⇐ PrevNext ⇒

Leave a Comment