XPath Contains, AND OR, Parent, Start with, Axes in Selenium Webdriver

By: Lucas
January 30, 2021
17 min read
No Comments
17243 views

XPath, or XML Path Language, is a query language that allows you to navigate through elements and attributes in an XML or HTML document. In Selenium WebDriver, XPath plays a pivotal role in locating elements on a webpage, especially when other locators like ID, Name, or Class are not sufficient. In this blog, we’ll explore some advanced XPath techniques such as contains, AND, OR, parent, starts-with, and axes to help you become proficient in element identification.

XPath can also be used as a substitute when you do not have a suitable id/name attribute for the locator element.

XPath also allows you to select individual elements, attributes, and some other parts of XML documents for specifying the location of a particular web element.

What is XPath?

XPath is a powerful syntax used to navigate through elements and attributes in an XML document. In Selenium, it is used to find elements based on their attributes or text content. XPath expressions can be either absolute or relative:

Absolute XPath: Specifies the complete path from the root element to the target element. It starts with a single slash (/). Example:

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

Relative XPath: Starts from any element in the DOM and is prefixed with //. Example:

//div[@class='example']

XPath Contains():

The contains() function is used when you need to match part of an attribute value or text. This is particularly useful when the attribute value changes dynamically.

Syntax:

//tagname[contains(@attribute, 'value')]

//tagname[contains(text(), 'partialText')]

Examples:

Match a partial attribute value:

//input[contains(@id, 'user')]

Match a partial text value:

//div[contains(text(), 'Welcome')]

This XPath matches any <div> tag that contains the text "Welcome".

Open the URL: https://www.google.co.in/ in your Firefox browser.
Right-click on the Textbox on the sample web page and select the Inspect Element.

It will launch a window that will contain all the specific codes involved in the development of the textbox.

Take a note of its id Attribute.

The syntax for locating elements through XPath- Using contains() method can be written as:

//<HTML tag>[contains(@attribute_name,'attribute_value')]

//*[contains(@attribute_name,'attribute_value')]

Using and in XPath- contains() method, we can write the Java code along with the dynamic XPath location as:

findElement(By.xpath("//*[contains(@id,'lst-ib')]"));

Using the ‘contains’ function, we can extract a list of web elements containing the matching text throughout the web page. Below is the syntax to use ‘contains’ function within the XPath.

List<WebElement> elements = driver.findElements(By.xpath("//h1[contains(text(),'Be great at what you do')]/parent::form//h2"));

Xpath two Conditions:

XPath with two conditions allows you to locate elements in an XML or HTML document that meet multiple criteria. This is useful when you need to be precise about the elements you’re targeting in your Software training and placement or data extraction.

To use XPath with two conditions, you can combine them with the and operator within square brackets. For example:

perl
//tagname[@attribute1='value1' and @attribute2='value2']

This expression will select all elements with the specified tag name that have both attribute1 equal to value1 and attribute2 equal to value2. Using multiple conditions and in XPath helps to narrow down the search results to exactly the elements you need, ensuring accuracy in your automated tests or data queries.

Using AND and OR in Selenium:

OR expression uses two conditions, whether the first condition OR second condition should be true. It is also applicable if any one of the condition is true, or maybe both. This means that any one condition should be true to find the element.

In the below XPath, 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.’

AND expression uses two conditions. Both conditions should be true for finding 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.’

Parent XPath in Selenium WebDriver:

The parent axis will select the parent of the current node. The parent node will be either the root node or an element node. The root node has no parent. Therefore, when the current node is the root node, the parent axis is empty. For all the other element nodes, the parent axis contains maximum one node.

The syntax of the parents axis is given below:

Syntax:

//parent::tagName

Let’s take an example. Open the website yandex.com and right-click on the search box. Then we will find the parent of the current node. Let us choose a search input box as a current node. So, we will first find the XPath of the current node.

XPath(Current node): //input[@id = 'text']

We will then find the XPath of the parent element node of the current node using parent syntax, as shown below screenshot.

XPath of the Parent node: //input[@id = 'text']//parent::span

It will then select the parent node of the input tag having Id = ‘text’.

   XPath(Parent node): //input[@id = 'text']//parent::*

Starts-with in Selenium:

Starts-with function in Selenium is used to find the element whose value of the attribute changes on refresh or any operation on the web page. In the below expression, match the starting text of the attribute used for finding the element whose attribute changes dynamically. You can also find the element whose value of the attribute is static (does not change).

For example, suppose the ID of a particular element changes dynamically like:

Id=” message12″

Id=” message345″

Id=” message8769″

And so on. But the initial text is the same. In this case, we use the Start-with expression “message.”

In the expression below, there are two elements with a class starting with “form.” So, XPath finds those elements whose ‘class’ is starting with ‘form.’

XPath=//input[starts-with(@class,'form')]

XPath Axes:

XPath axes are the methods to identify those dynamic elements that are impossible to find by normal XPath method like ID, Classname, Name, etc. Axes are so named since they tell about the axis on which elements lie relative to an element.

Dynamic elements are those elements on the webpage whose attributes dynamically change on refresh or any other operations.

The most commonly useful XPath axes used in Selenium WebDriver are child, parent, ancestor, sibling, preceding, self, namespace, attribute, etc. XPath axes help find elements based on the element’s relationship with the another element in an XML document.

XML documents contains one or more element nodes. They are considered as trees of nodes. If an element contains the content, whether it is other elements or text, it must be declared with a start tag and an end tag.

The text defined between the start tag and the end tag is the element content. The top-most element of the tree is called the root element. An example of the basic HTML page is shown below screenshot.

Child Axis:

The child axis selects all the children elements of the current node. The syntax of the child axis is given below:

Syntax:

         //child::tagName

For instance, open webpage https://www.yandex.com, right-click on Yandex.in, and go to the inspect option as shown below screenshot.

Let us select all the children elements of the current node, as shown in the above screenshot. First, we will find the XPath of the current node.

           XPath of the current node: //span[@class = 'worldwide__list']

We will then find out the XPath of children elements of the current node using the child axis, as shown in the above figure.

XPath of all the children elements: //span[@class = ‘worldwide__list’]//child::a (1 of 6 matched)

This expression identifies six children nodes using the child axis. We can get the XPath of the different children elements according to the requirement by mentioning [1],[2]…………, and so on.

    XPath of Russia: //span[@class = 'worldwide__list']//child::a[1].

    XPath of Ukraine: //span[@class = 'worldwide__list']//child::a[2].

    XPath of Belarus: //span[@class = 'worldwide__list']//child::a[3]

and so on.

Parent Axis:

The syntax of the parents axis is given below:

Syntax:

           //parent::tagName

       XPath(Current node): //input[@id = 'text'].

We will then find the XPath of the parent element node of the current node using parent syntax, as shown below screenshot.

XPath of Parent node: //input[@id = ‘text’]//parent::span. It will then select the parent node of the input tag having Id = ‘text’.

XPath(Parent node): //input[@id = ‘text’]//parent::*.

Self Axis:

Self axis selects the element of the current node. It always finds only one node representing self-element.

Syntax:

//self::tagName

For example, we can find the XPath of the current element node using the above screenshot’s self axis.

XPath of the Current node: //input[@id = ‘text’]//self::input.

or XPath of the Current node: //input[@id = ‘text’]//self::*

Ancestor Axis:

The ancestor axis will select all ancestors element (parent, grandparent, great-grandparents, etc.) of the current node. This axis will always contains the root node.

Syntax:

//ancestor::tagName

Let us now take a scenario to understand the concept of the ancestor axis. Open the URL www.facebook.com, right-click on the login button, and go to the inspect option. Now you will see the HTML code of the login button as shown below screenshot.

Let us consider the login button as the current node. First, find the XPath of the current node.

XPath of the Current node: //input[@id = ‘u_0_a’]

Then, we will find the XPath of the parent and grandparent of the current node.

XPath of the Parent node: //input[@id = ‘u_0_a’]//ancestor::label

XPath of the Grandparent node: //input[@id = ‘u_0_a’]//ancestor::td.

Ancestor-or-self Axis:

This axis will select all ancestors element (parent, grandparent, great-grandparents, etc.) of the current node and the current node itself.

Let us find the XPath of the current node (login button) by using the ancestor-or-self axis.

XPath of the login button: //input[@id = ‘u_0_3’]//ancestor-or-self::input

The above expression identifies the current element node.

Descendant Axis:

The descendant axis will select all descendants (children, grandchildren, etc.) of the current node. Let us now take an instance to understand the concept of the descendant axis.

Open the webpage https://pixabay.com/accounts/register/?source=signup_button_header, right-click on the Username element, and go to inspect option. As shown in the given screenshot, now let us suppose “signup_form new” as a current node. You can now bring the cursor to this node to see the current node.

The XPath of the current node will be as follow:

XPath of the Current node: //div[@class = ‘signup_form new’]

Using the descendant axis with the above XPath, we can easily find all children, grandchildren, elements, etc., of the current node.

XPath of the current node: //div[@class = ‘signup_form new’]//descendant::input

The above XPath expression identifies three elements such as username, password, and email address. Hence, we can write the XPath and using by putting 1, 2, and 3 in the above expression.

XPath of Username: //div[@class='signup_form new']//descendant::input[1] (1 of 1 matched).

XPath of Email address: //div[@class = 'signup_form new']//descendant::input[2]

XPath of Password: //div[@class = 'signup_form new']//descendant::input[3]

Descendant-or-self Axis:

The descendant-or-self axis will select all descendants (children, grandchildren, etc.) of the current node and the current node itself. In the screenshot above, div is the current node. We can now select the current node using the descendant-or-self axis.

The XPath of the current node is

     XPath of the Current node: //div[@class = 'signup_form new']//descendant-or-self::div

The above expression identified one node. If we change the tag name in the above XPath expression from div to input, we can get a node of username, email address, and password.

Let’s find the XPath of these nodes.

XPath of Username: //div[@class = ‘signup_form new’]//descendant-or-self::input[1]

XPath of Email address: //div[@class = ‘signup_form new’]//descendant-or-self::input[2].

Following Axis:

The following axis will select all the elements (nodes) in the document after closing tag of the current node. Let us consider “First name” input box as the current node in the facebook webpage.

The XPath of the current node is: //input[@id = ‘u_0_r’]

We will find all elements such as Surname, Mobile number, etc., by using the following axis of the current node. The syntax below will select the immediate node following the current node.

XPath of Current node: //input[@id = ‘u_0_r’]//following::input (1 of 23)

The above expression has identified 23 node matching using the “following” axis-surname, mobile number, new password, etc. If you want to focus on any one particular element, you can then change the XPath according to your requirement by putting [1],[2],..,and so on.

XPath of Surname: //input[@id = ‘u_0_r’]//following::input[1] (1 of 1 matched)

Putting “1” as input, the above expression will find the particular node that is the ‘Surname’ input box element.

Similarly, on putting “2” as input,

XPath of Mobile number: //input[@id = ‘u_0_r’]//following::input[2] (1 of 1 matched).

Following-sibling Axis:

The following-sibling will select all sibling nodes after the current node at the same level. i.e., it will find the elements after the current node.

For instance, the radio button of female and female text both are siblings on the Facebook home page, as shown below.

We will find the XPath of the current node, i.e., the female radio button XPath.

XPath of Radio button: //input[@id = ‘u_0_5’]

Using the following-sibling axis, we can then easily find the XPath of text “Female” at the same level.

XPath of Female: //input[@id = ‘u_0_5’]//following-sibling::label.

The above expression identifies one input node by using the “following-sibling” axis.

Preceding Axis:

The preceding axis will select all nodes that come before the current node in the document, except ancestor, attribute nodes, and namespace nodes.

Consider the login button as the current node on the Facebook web page, as shown below screenshot.

Let’s first find the XPath of the current node, i.e., the XPath of the login button.

XPath of the Current node: //input[@id = ‘u_0_2’]

We will then select all the nodes by using the preceding axis in the document that are coming before the current node.

XPath will be: //input[@id = ‘u_0_2’]//preceding::input.

The above expression identifies all the input elements before the “login” button using the preceding axis. 2 of the 4 matches nodes are matched with the Email and Password input element.

If you want to focus on any one particular element like “Email” or “Password,” then you can easily change the XPath according to the requirement by putting [1],[2],..,and so on. For instance:

XPath of Email: //input[@id = ‘u_0_2’]//preceding::input[2] (1 of 1)

XPath of Password: //input[@id = ‘u_0_2’]//preceding::input[1]

Preceding-sibling Axis:

The preceding-sibling axis will select all the siblings before the current node. Let us now take an instance to understand the concept of the preceding-sibling axis.

Open the web page, right-click on videos link and go to inspect option. Let us consider the video link as the current node as shown in the below screenshot and find the XPath of the current node using the text() method.

XPath(Current node): //a[text() = ‘Videos’]

Now we will find all nodes using the preceding-sibling axis of the current node in the document.

XPath will be: //a[text() = ‘Videos’]//preceding-sibling::a (1 of 3)

The above expression identifies three nodes before the current node (videos link), as shown in the above screenshot. Using this expression, we can easily find an XPath of preceding-sibling elements like Photos, Illustrations, and Vectors:

XPath of Photos: //a[text() = ‘Videos’]//preceding-sibling::a[3]

XPath of Illustrations: //a[text() = ‘Videos’]//preceding-sibling::a[2]

XPath of Vectors: //a[text() = ‘Videos’]//preceding-sibling::a[1]

Attribute Axis:

This axis selects the element node based on the attribute identifier (@) of the current node. If the current node specified is not an element node, this axis will be empty. The expressions mainly attribute::type and @type both are equivalent.

For instance:

Open the URL, right-click on the search input box, and go to inspect. We can then write XPath of the search input box (the current node) using the attribute axis.

XPath of Search box: //input[attribute::name = ‘q’]

Namespace Axis:

The namespace axis selects all namespace nodes associated with the current node. If the current node is not the element node, then this axis will be empty.

How to use “and” in Xpath in Selenium?

To use the “and” operator in XPath within Selenium, you need to construct an XPath expression that combines multiple conditions. This is particularly useful when you want to match elements that satisfy all specified criteria. Here’s a basic example:

# Import the required libraries
from selenium import webdriver

# Initialize the WebDriver
driver = webdriver.Chrome()

# Open the target webpage
driver.get("https://www.example.com")

# Use the 'and' operator in XPath to locate an element
element = driver.find_element_by_xpath("//tagname[@attribute1='value1' and @attribute2='value2']")

# Interact with the element
element.click()

# Close the WebDriver
driver.quit()

In this example, //tagname[@attribute1='value1' and @attribute2='value2'] is an XPath expression that selects elements of a specific tag with two attributes, both of which must match the given values. The “and” operator ensures that both conditions are met. Using this approach, you can refine your element selection to be more precise, making your Selenium tests more robust.

Conclusion

XPath is an essential skill for any Selenium WebDriver user. Mastering advanced XPath techniques like contains, AND, OR, parent, starts-with, and axes can significantly enhance your ability to locate and interact with web elements. With practice and adherence to best practices, you can create robust and maintainable test scripts that work seamlessly across dynamic web applications.

Start experimenting with these XPath strategies in your Selenium projects, and watch your automation skills reach new heights!