Learn how to create dynamic XPath in Selenium to locate elements on web pages that may change their location or attributes over time.

Introduction

XPath is a language for locating elements in XML documents. It can also be used to locate elements on web pages. Selenium is a tool for automating web browser interactions. It can be used to find and interact with elements on web pages using XPath expressions. Here is the Xpath cheat sheet.

What is XPath?

XPath is a language for locating elements in XML documents. It is a subset of the XQuery language. XPath expressions can select elements based on their location, content, or attributes.

How to Create Dynamic XPath in Selenium

Dynamic XPath expressions are XPath expressions that can change their value depending on the current state of the web page. This can be useful for locating elements that may change their location or attributes over time.

Basic syntax

Example: //tagname[@attribute='value']
Example: //button[@id='qae']

Refer to locating elements in selenium for more basic locator examples.

Absolute XPath vs Relative XPath in Selenium

Absolute XPath

Absolute XPath expressions are the most straightforward type of XPath expression. They start with the / character, which indicates the root element of the document. For example, the following XPath expression will locate the Login button on the following HTML page:

/html/body/div/div/button[text()='Login']

Relative XPath

Relative XPath expressions are more complex than absolute XPath expressions, but they can be more flexible. They start with the // character, which indicates any element in the document. For example, the following XPath expression will locate the first input element with the id attribute equal to username on the following HTML page:

//input[@id='username']

‘*’ in XPath

If we use ‘*’ in Xpath at the tag level that means searching for any tag.

//*[@id='username']

Contains in Xpath

The contains() XPath Selenium locator is very handy and can sometimes save the life of a test automation engineer. When an attribute of an element is dynamic, you can use contains() to locate the element by searching for a constant part of the attribute value. You can also use contains() in any other condition where you need to search for a string within a larger string.

Syntax: //tag[contains(@attribute, 'value')]
Examples: 
//input[contains(@id, 'email')]
//text contains xpath
//*[contains(text(), 'email')]
//input[contains(., 'email')]

starts-with() in Xpath

This method checks the beginning of an attribute’s value. It is very useful when the attribute value changes frequently, but it can also be used for attribute values that do not change.

The starts-with() method is an XPath function that can be used to check if the value of an attribute starts with a certain string.

Syntax: //tag[starts-with(@attribute, 'value')]
Examples: 
//input[starts-with(@id, 'email')]
//*[starts-with(text(), 'email')]

ends-with() in Xpath

This method checks the end of an attribute’s value. It is very useful when the attribute value changes frequently, but it can also be used for attribute values that do not change.

The ends-with() method is an XPath function that can be used to check if the value of an attribute ends with a certain string.

Syntax: //tag[ends-with(@attribute, 'value')]
Examples: 
//input[ends-with(@id, 'email')]
//*[ends-with(text(), 'email')]

‘or’ operator in Xpath

This method is used to check for elements with any one of the attributes.

Syntax: //tag[@attribute1='value1' or @attribute2='value2']
Examples: 
//input[@id='email' OR @name='email']

‘and’ operator in Xpath

This method is used to check for elements with all the attributes.

Syntax: //tag[@attribute1='value1' and @attribute2='value2']
Examples: 
//input[@id='email' and @name='email']

ancestor in Xpath

It locates the element before the ancestor statement, sets it as the top node, and then begins searching for elements in that node.

Here’s an explanation of what the sentence means:

• Ancestor statement: This refers to an XPath expression that identifies an ancestor of the element that you’re trying to find. For example, the XPath expression //div/ancestor::ul would identify the ul the element that is an ancestor of any div element.
• Top node: This refers to the element that is located at the top of the document tree. In the example above, the ul the element would be the top node.
• Searching for elements: This refers to the process of using XPath expressions to identify elements in a document.

Syntax: //tag/ancestor::tag
Examples: 
//div/ancestor::ul

following in Xpath

It begins locating elements after the given parent node. It locates the element before the following statement, sets it as the top node, and then begins searching for all elements after that node.

Here’s an explanation of what the sentence means:

• Given parent node: This refers to the element that is the starting point for the search.
• Following statement: This refers to the XPath expression that identifies the element that is the next element after the given parent node.
• Top node: This refers to the element that is located at the top of the document tree.
• Searching for elements: This refers to the process of using XPath expressions to identify elements in a document.

Syntax: //tag/following-sibling::tag
Examples: 
//div[@class='product']/following-sibling::div

child in XPath

Child in Xpath is use to find all the child elements.

Syntax: //tag/child::tag
Examples: 
//div[@class='product']/child::div

preceding in XPath

Preceding in Xpath is used to find all the elements before the current node.

Syntax: //tag/preceding::tag
Examples: 
//div[@class='product']/preceding::div

Following-sibling in Xpath

Following sibling is used to find following sibling of the target node.

Syntax: //tag/following-sibling::tag
Examples: 
//div[@class='product']/following-sibling::div

descendant in Xpath

descendant is used to find the descendant of the target node.

Syntax: //tag/descendant::tag
Examples: 
//div[@class='product']/descendant::div

parent in Xpath

parent is used to find the parent of the target node.

Syntax: //tag/parent::tag
Examples: 
//div[@class='product']/parent::div

multiple elements in Xpath

When an XPath returns an array of multiple elements, then we can use an array index.

Syntax: (//tag[@id='value'])[1]
Examples: 
(//input[@id='inputbox'])[1]

FAQ