Locators and Capturing XPath

This blog places its emphasis on the concepts of locators and capturing XPaths. As we are well aware, testing web-based applications involves executing specific actions on HTML elements, like clicking, typing, etc. When automating web-based applications, the automation tool should have the capability to perform the same actions.

Hence, it becomes important for us to familiarize ourselves with the concept of Locators.

Locators

Locators are a way to identify an HTML element on a web page. So, identifying the correct element on a web page is one of the prerequisites for creating any successful automation script. Locators play an important role in uniquely identifying the Web Elements present on the web page. For example: text box, button, checkbox, links, images, table, etc.

Locator Types

There are various types of locators, that we can identify a web element uniquely on a webpage.

A brief overview of some locators that Selenium can utilize:

Id — We can identify elements by using the ‘id’ attribute.
className — A ClassName operator uses a class attribute to identify an object.
name — The name attribute can also identify an element.
cssSelector — CSS is used to create style rules for web pages and can be used to identify any web element.
linkText — Text used in hyperlinks can also locate elements.
tagName — We can also use a tag to locate elements.
xpath — Xpath is the language used to query the XML document. The same can uniquely identify the web element on any page.

As previously highlighted, XPath is a widely employed locator type. Let’s discuss more details about XPaths and XPath Axes.

What is an XPath?

XPath, short for XML Path Language, is a highly utilized method for locating elements. It applies to both HTML and XML documents, enabling the precise determination of an element’s position on a webpage. XPaths play a crucial role in efficiently traversing the hierarchical structure of an HTML page, offering the ability to target elements based on attributes such as tag name, ID, CSS class, and other criteria.

Format of XPath

Types of XPaths

There are two types of XPath in Selenium.

Absolute XPath

Absolute XPath starts with the root node.
It is also called complete or full XPath.
Absolute XPath starts from <html> tag ,up until the relevant tag level.
It starts from a single slash(/).
/html/body/div/div/div/div/div/div/div/div/img

Relative XPath

Relative XPath starts from the node of our choice.
It doesn’t need to start from the root node.
It starts with a double forward slash(//), from an identified stable tag level.
//img[@class=’fb_logo _8ilh img’]

Different ways to write XPath

XPaths can be composed in various manners. The following are some of the methods available:

Using Contains()
Using Text()
Using Index
Using Id, name, className, etc.
Using OR & AND
Using XPath Axes

Let’s further discuss each of the methods mentioned, above.

XPath using Contains() method

Contains() can be used for web elements whose value can change dynamically. The element with partial text can be found using the contains(). The syntax for using Contains() method in XPath is:

Format :

//tagname[contains(@attribute,constantvalue)]

Example — //button[contains(@class,’rounded border border-black block’)]
Sample site — https://accounts.lambdatest.com/register

XPath using Text() method

The text() method is used in XPath whenever we have a text defined in an HTML tag, and we wish to identify that element via text. This comes in handy when the other attribute values change dynamically with no significant attribute value used via Contains. The syntax for using the Text() method in XPath is:

Format:

//tagname[text()=’Text of the Web Element’]

Example — //span[text()=’Sign up with Google’]
Sample site — https://accounts.lambdatest.com/register

XPath using Contains Text

The contains() method supports the user in locating elements with dynamically changing values or partial values by verifying matches with a piece of the value. The contains() is a Selenium function that searches for web elements that contain a particular text within an XPath expression. The syntax for using Contains() method in XPath is:

Format:

//tagname[contains(text(), ’Text of the Web Element’)]

Example — //span[contains(text(), ‘Google’)] (//span[contains(text(), ‘Sign up’)])[1]
Sample site — https://accounts.lambdatest.com/register

XPath using Index

Indexes can also be helpful in such cases where the same XPath is returning you multiple web elements.

First, we write the generic XPath for the web element and later use an index for locating the exact element. The syntax for using Index is XPath is:

Format:

//tagname[@attribute=’value’][Index Number (//tagname[@attribute=’value’])[Index Number]

Example — //select[@id=’country_code’]//option[2]
Sample site — https://accounts.lambdatest.com/register

Before we move into XPath Axes, let’s first familiarize ourselves with the fundamentals of an HTML page.

The Document Object Model (DOM) is a programming API for HTML and XML documents. It’s like a family tree, where the root node is like the grandparent, and the child nodes are like the parents, kids, and grandchildren. Each node in the tree has a parent node, except for the root node, and some nodes can have more than one child.

1. Nodes:

The topmost element of the tree is called the root node. The example of nodes in the XML document above:
‘html’ is the root of an element node, ‘title’ is an element node.

2. Parents:

Each element and attribute has one parent. In the above example, ‘body’ is the parent of the div element. ‘div’ is the parent of the table element.

3. Children:

Element nodes that may contain zero, one, or more children. For example, ‘tr’ is the child of the table element, ‘div’ is the child of the body element, and ‘table’ is the child of the div element.

4. Siblings:

The node that has the same parent is called a sibling. In the XML document mentioned above, the ‘head’ and ‘body’ elements are both siblings.

XPath using Axes methods

An XPath Axes defines the node-set relative to the current (context) node. XPath axes are methods to identify those dynamic elements that are difficult to find using normal XPath methods such as ID, Class, Name, etc. In such cases locating elements after traversing through child/sibling or parent becomes an easier approach.

There are various axes available. Here are a few of them:

Ancestor

Selects all ancestors (parent, grandparent, etc.) of the current node.

Format :

//tagName[@attribute=‘value’]/ancestor::tagName

//input[@class=’sgnpaswrd’]/ancestor::form//input[@id=’namefield’]

Ancestor-or-self

Selects all ancestors (parent, grandparent, etc.) of the current node and the current node itself.

Format:

//tagName[@attribute=’value’]/ancestor-or-self::tagName

//input[@class=’sgnpaswrd’]/ancestor-or-self::form//input[@id=’namefield’]

Descendant

Selects all descendants (children, grandchildren, etc.) of the current node.

Format:

//tagName[@attribute=‘value’]/descendant::tagName

//div[@class=’za-password-container sgfrm’]/descendant::input[@name=’password’]

Descendant-or-self

Selects all descendants (children, grandchildren, etc.) of the current node and the current node itself.

Format :

//tagName[@attribute=‘value’]/descendant-or-self::tagName

//div[@class=’za-password-container sgfrm’]/descendant-or-self::input[@name=’password’]

Preceding

Selects all nodes that appear before the current node in the document.

Format:

//tagName[@attribute=‘value’]/preceding::tagName

//input[@name=’password’]/preceding::input[@id=’namefield’]

Preceding-sibling

Selects all siblings before the current node.

Format:

//tagName[@attribute=‘value’]/preceding-sibling::tagName

Let us see an example of an element with a div tag having more than one child with label, input, span, and 2 div tags. Then let us try to locate the following sibling of this input tag:

Example -: https://www.zoho.com/crm/signup.html?source_from=login

//input[@class=’sgnpaswrd’]/preceding-sibling::lable

Following

Selects all the nodes after the closing tag of the current node.

Format:

//tagName[@attribute=‘value’]/following::tagName

//input[@id=’namefield’]/following::input[@name=’password’]

Following-Sibling

Selects all siblings after the current node.

Format:

//tagName[@attribute=‘value’]/following-sibling::tagName

Let us see an example of an element with a div tag having more than one child with label, input, span, and 2 div tags. Then let us try to locate the following-sibling of this input tag:

Example -: https://www.zoho.com/crm/signup.html?source_from=login

//input[@class=’sgnpaswrd’]/following-sibling::div[3]

Conclusion

At this point, you should have a comprehensive understanding of XPath in Selenium. We initiated our journey with the concept of Locators, which laid the foundation. Then, we moved into XPaths and their associated Axes, where we not only explored their syntax but also learned about the various XPath types.

Afterward, we discussed the distinction between Absolute and Relative XPaths, gaining insights into their respective syntax.

Lastly, we discussed XPath Axes, a valuable addition to our knowledge, where we introduced several XPath Axes, which serve as powerful tools for precisely locating elements on a webpage.

Administrator

Software Quality Engineer

Menu