XPath is a language used to locate nodes in XML documents.
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.
XPath Contains():
contains() is used to identify an element when we are familiar with some part of the value of an element’s attribute.
Let us take a scenario in which we will try locating the Google Search Engine Text box by XPath- Using contains() method.
Follow the steps given below for locating the textbox provided on the home page of Google Search Engine.
- 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’)]
or
//*[contains(@attribute_name,’attribute_value’)]
Using 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”));
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 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 is used to find the element whose value of the attribute changes on refresh or any operation on the webpage. 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 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 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 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 www.pixabay.com, 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 www.pixabay.com, 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.
