Selenium XPath Examples [Latest]

What is XPath?

XPath also defined as XML path. It is a query language used for navigating through XML documents in order to locate different elements. It is one of the important strategies to locate elements in selenium. XPath is used to locate a web element on a webpage by using the HTML DOM Structure.

The basic syntax for XPath is explained below with screenshot.

Syntax for XPath

The basic syntax of an XPath is:

//tag[@attributeName="attributeValues"]

• //: It is used to fetch the current node.
• tagname: It is the tagname of a particular node.
• @: It is used to select attribute.
• Attribute: It is the attribute name of the node.
• Value: It is the value of the attribute.

Types of XPath Expressions

There are two types of XPath expressions.

1. Absolute XPath
2. Relative XPath

Absolute XPath

It is the direct way to find the element on the web page. The main disadvantage of absolute XPath is that if there are any changes made by developers in the path of the element then our written XPath will no longer work. The advantage of using absolute XPath is that it identifies the element very fast.

The main characteristic of XPath is that the XPath expressions created using absolute XPath begin with the single forward slash(/), which means begins the selection from the root node.

Example:

/html/head/body/table/tbody/tr/th

If there is a tag added between body and table as below.

html/head/body/form/table/tbody/tr/th

The first path will not work as “form” tag is added in between.

Relative XPath

A relative XPath is one where the path starts from the middle of the HTML DOM structure of your choice. It doesn’t need to start from the root node, which means it can search for the element anywhere at the webpage.

Example

//input[@id='ap_email']

Now, let’s understand with an example.

Here we will launch Google Chrome and navigate to google.com.

Here, we will try to locate the search bar by using XPath.

On inspecting the web element (search bar) you can see it has an input tag and attributes like id and class.

Now, we use the tag name and attributes to generate XPath which in turn will locate the search bar.

Here, just click Elements tab and press Ctrl + F to open a search box in chromes developers tool.

Next, you can write XPath, string selector and it will try to search the element based on that criteria.

As you can see in the above image, it has an input tag.

Now I will start with // input. Here //input implies tag name.

Now, I will use the name attribute and pass ‘q’ in single quotes as its value. This gives XPath expression as below:

//input[@name="q"]Searchbox XPath Name

As you can see from the above image, it has highlighted the element on writing the XPath which implies that particular element was located using XPath.

How to generate XPath

Usually, we generate the XPath in two ways – manually and by using Inbuilt utilities. But in manual case, sometimes the HTML file is quite big or complex and writing the XPath of each and every element manually would be a quite difficult task. In this case, there are certain utilities which can help us.

• Chrome Browser: It has Inbuilt utility to inspect and generate the XPath.

Example:

In the below example, we open Chrome browser and login to Facebook application by entering Email, Password and by clicking Log In button.

To inspect Email or phone web element, Right-click on Email or phone input box and select Inspect.

Once inspecting the Email or phone web element, it will open HTML DOM structure like below.

To get the Xpath of Email or phone web element, Right-click on HTML Structure, select Copy and Click on Copy XPath.

In this case, the XPath is:

//*[@id="email"]

To inspect Password web element, Right-click on Password input box and select Inspect.

Once inspecting the Password web element, it will open HTML DOM structure like below.

To get the Xpath of Password web element, Right-click on HTML Structure, select Copy and Click on Copy XPath.

In this case, the XPath is:

//*[@id="pass"]

To inspect Log In button, Right-click on Log In button and select Inspect.

Once inspecting the LogIn button, it will open HTML DOM structure like below.

To get the Xpath of Log In button, Right-click on HTML Structure, select Copy and Click on Copy XPath.

In this case, the XPath is:

//*[@id="u_0_a"]

Java Selenium XPath Example

Here is the java class for logging into Facebook using Selenium. We will use the earlier identified XPath expressions to send the values for login.

package com.journaldev.selenium.xpath;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class RelativeXPath {
	public static void main(String[] args) {
		System.setProperty("webdriver.chrome.driver","D:\Drivers\chromedriver.exe");
   WebDriver driver= new ChromeDriver();
     driver.get("https://www.facebook.com/");
     driver.manage().window().maximize();
     //XPath for Email Field
     driver.findElement(By.xpath("//*[@id='email']")).sendKeys("[email protected]");
    //XPath for Password Field
     driver.findElement(By.xpath("//*[@id='pass']")).sendKeys("xxxxxxx");
     driver.findElement(By.xpath("//*[@id="u_0_a"]")).click();
	}
}

XPath Functions

Automation using Selenium is a great technology that provides many ways to identify an element on the web page. But sometimes we face problems in identifying the element on a page which have the same attributes.

Some of the cases can be: elements having the same attributes and names or having more than one button with same ids and name.

In those cases, it’s challenging for selenium to identify a particular object on a web page and this is where XPath functions come in to picture.

Types of XPath Functions

Selenium is comprised of various XPath functions. Below are the three functions which are widely used.

1. contains()
2. text()
3. starts-with()

1. contains()

contains() is one of the functions used in XPath expression. This method is used when the value of any attribute changes dynamically. For example, login information.

This method can locate a web element with the available partial text.

Following are the examples of contains() method.

• Xpath=.//* [contains (@name, ‘button’)]
• Xpath=//*[contains(@id, ‘login’)]
• Xpath=//*[contains(text (),’testing’)]
• Xpath=//*[contains (@href,’https://www.journaldev.com’)]
• Xpath=//*[contains (@type, ‘sub-type’)]

2. starts-with()

starts-with() is the function used to find a web element whose value of an attribute changes on the refresh or on any other dynamic operation on the web page.

In this function, we match the starting text of the attribute which is used to locate an element whose attribute changes dynamically.

For example, if id of a particular element changes dynamically on the web page such as ‘id1’, ‘id2’, ‘id3’ and so on..but the text remains the same.

Following are the examples of starts-with() expression.

• Xpath=//label[starts-with(@id, ‘message’)]

3. text()

The text() function is used to locate an element with the exact text.

Below are the examples of text function.

Conclusion

XPath is required to find an element on the web page as to do an operation on a particular element. XPath expression select nodes or list of nodes on the basis of attributes like ID, Classname, Name, etc. from an XML document.