Xpath in Selenium with All Tactics and Examples

XPath in Selenium tactics will help you how to write dynamic XPath in Selenium Webdriver projects. Generally, test automation engineers struggle to write dynamic XPath at the beginning of their test automation journeys. To address this pain, I prepared this tutorial for writing an effective XPath in Selenium. Let’s start to learn all tricks in this XPath tutorial. 

I shared all my tactics, such as XPath contains text, sibling, ancestor, child, preceding, descendant, parent, and so on. I hope this article will help you to write smart and non-brittle selenium find by statements in your projects. 

How to Write Dynamic XPath in Selenium Projects for Web Elements

In our test automation projects, we generally prefer to use id, name, class, etc., these locators. However, sometimes we could not find any of them in the DOM, and also sometimes locators of some elements change dynamically in the DOM. In these kinds of situations, we need to use dynamic XPath locators. These locators must be capable of locating complex and dynamically changing web elements. In the below sections, I will share with you 15 Tactics to Write Effective XPath Locators.

XPath Selenium Locators Strategies

We can find the location of any element on a web page using XML path expressions. The basic syntax for XPath is shown below:

Syntax = //tagname[@attribute=’Value‘]

Example = //img[@alt=’Onur Baskirt‘]

You can also use class, and src attributes to locate an element with XPath, as shown above, but always check that only one element has been found!

Absolute XPath and Relative XPath in Selenium

Generally, in some test automation engineer interviews, I asked about the difference between absolute and relative XPath. The answer is very easy.

Absolute XPath in Selenium

• It is a direct way to locate an element.
• It is very brittle.
• It starts with a single slash “/” which means starting to search from the root.

Example: /html[1]/body[1]/div[2]/div[2]/main[1]/div[1]/section[1]/div[1]/div[1]/div[1]/div[1]/div[2]/div[1]/div[1]/h1[1]/strong[1]/span[1]

Relative XPath in Selenium

• Starts from the middle of the HTML DOM.
• Starts with a double slash “//” which means it can start to search anywhere in the DOM structure.
• Shorter than Absolute XPath.
• Less fragile.

Example://span[text()=’About Software Test Academy’]

In the above screenshot, SelectorsHub add-on finds a bit different result like: //span[normalize-space()=’About Software Test Academy’], but I also used my tactic, which is finding Xpath with text: //span[text()=’About Software Test Academy’] 

In the next section, you will also learn how to find an element with text by XPath in Selenium.

We can also use trailing “//” to continue our XPath search. I will show this in the same example. As you see below screenshot, I started with “//div”, then I bypassed h1 and strong tags, continued my search with the second “//” and then found the element in the span tag. Finally, the statement is finalized, as shown below.

Example: //div//span[text()=’About Software Test Academy’]

By the way, I used the SelectorsHub add-on, but you can also use ChroPath or Ranorex Selocity.

Writing Smart XPaths for Complex and Dynamic Elements

Tag – Attribute – Value Trio

Syntax: //tag[@attribute=’value‘]

Example = //img[@alt=’Onur Baskirt‘]

Examples:

//input[@type='send text']

//label[@id='clkBtn']

//input[@value='SEND']

//*[@class='swtestacademy'] --> "*" means, search "swtestacademy" class for all tags.

//a[@href='https:/']

//img[@src='cdn.medianova.com/images/img_59c4334feaa6d.png']

Contains XPath in Selenium

It is a very handy XPath Selenium locator, and sometimes it saves the life of a test automation engineer. When an attribute of an element is dynamic, you can use contains() for the constant part of the web element but also use contains() in any condition when you need.

Syntax: //tag[contains(@attribute, ‘value‘)]

Example: //img[contains(@alt,’Baskirt’)]

Examples:

//*[contains(@name,'btnClk')] --> It searches "btnClk" for all name attributes in the DOM.

//*[contains(text(),'here')] --> It searches the text "here" in the DOM.

//*[contains(@href,'firebrick-termite-918071.hostingersite.com')] --> It searches "firebrick-termite-918071.hostingersite.com" link in the DOM.

Starts-with Xpath Examples

This method checks the starting text of an attribute. It is very handy when the attribute value changes dynamically, but you can also use this method for non-changing attribute values.

Syntax: //tag[starts-with(@attribute, ‘value‘)]

Example: //img[starts-with(@alt,’Onur Ba’)]

Chained Declarations XPath in Selenium

We can chain multiple relative XPath declarations with “//” double slash to find an element location, as shown below. We chained “//div” with “//span[text()=’About Software Test Academy’]’ in the below example.

Example: //div//span[text()=’About Software Test Academy’]

Operator “or” in Xpath Selenium

In this method, we use two interrogation conditions such as A and B, and return a result-set as shown below:

“or” is case-sensitive, you should not use a capital “OR”.

Syntax: //tag[XPath Statement-1 or XPath Statement-2]

Example: //*[@id=’user-message’ or @class=’form-control’]

Operator “and” in Xpath Selenium

In this method, we use two interrogation conditions such as A and B, and return a result-set as shown below:

“and” is case-sensitive, you should not use the capital “AND”.

Syntax: //tag[XPath Statement-1 and XPath Statement-2]

Example: //*[@id=’user-message’ and @class=’form-control’]

How to find XPath by Text 

We can find an element with its exact text.

Syntax: //tag[text()=’text value‘]

Example://span[text()=’About Software Test Academy’]

Ancestor Xpath Examples

It finds the element before the ancestor statement, sets it as a top node, and then starts finding elements in that node. In the below example,

1- First, it finds the element whose XPath is //section[@id=’content’]

2- Then, it starts to find all div elements in the node to which the above XPath belongs.

Example: //section[@id=’content’]//ancestor::div

You can select specific div groups by changing div depths as shown below.

//section[@id=’content’]//ancestor::div[1] – Returns 53 nodes
//section[@id=’content’]//ancestor::div[2]- Returns 33 nodes
//section[@id=’content’]//ancestor::div[3] – Returns 24 nodes
//section[@id=’content’]//ancestor::div[4]- Returns 19 nodes

this goes like this. I think you got the idea if not, please write a comment, and I will clarify your questions.

Following Xpath Selenium Examples

It starts to locate elements after the given parent node. It finds the element before the following statement and sets it as the top node, and then starts to find all elements after that node. In the below example,

1- First, it finds this XPath with class attribute: //div[@class=’fusion-sliding-bar-wrapper’]

2- Then, it starts to find all section elements after that node.

Example: //div[@class=’fusion-sliding-bar-wrapper’]//following::section

Child XPath in Selenium Examples

Selects all children elements of the current node.

Example: //nav[@class=’fusion-main-menu’]//ul[@id=’menu-main’]/child::li

You can also select the required “section” element by using section[1], section[2], section[3], etc. syntax as shown below.

Preceding XPath Examples

Select all nodes that come before the current node. I give an example on swtestacademy. We will find all “li” elements on the About page. First, we will locate the bottom element, then use the preceding with “li” to find all “li” elements, as shown below.

Example: //div[@id=’wrapper’]/div[@class=’fusion-sliding-bar-wrapper’]//preceding::li

Also, you can use [1], [2], etc., to select a specific element in the preceding element list.

Following-sibling XPath Examples

Select the following siblings of the context node.

Example: //*[@class=’col-md-6 text-left’]/child::div[2]//*[@class=’panel-body’]//following-sibling::li

Descendant XPath Examples

Identifies and returns all the element descendants to the current element, traversing down under the current element’s node. Below, the XPath returns all “li” elements under the “menu-main”.

Example: //nav[@class=’fusion-main-menu’]//*[@id=’menu-main’]//descendant::li

Parent XPath Examples

Returns the parent of the current node as shown in the below example.

Example: .//*[@id=’get-input’]/button//parent::form

Locate an Element inside an Array of Elements

On the Trivago website, let’s search the “Antalya” keyword. Then, find the first Odamax hotel with XPath.

First, we can find all Odamax hotels by using the text below XPath:

//span[contains(text(),’odamax’)]

Above XPath returns many Odamax hotels; we can select the first one with the below XPath expression:

(//span[contains(text(),’odamax’)])[1]

You can also continue to search and find the related hotel’s price element with the below XPath:

(//span[contains(text(),’odamax’)])[1]/following-sibling::strong[@class=’deals__price’]

If you have any questions or queries, please write a comment. I will try to do my best to reply.

Also, you can learn how to write effective Selenium CSS locators in the below article.

Selenium CSS Selector Complete Reference – All Tactics Explained!

I also suggest saving and always using the below reference.

XPath, CSS, DOM and Selenium: The Rosetta Stone

Thanks for reading,
Onur

Onur Baskirt

Onur Baskirt is a Software Engineering Leader with international experience in world-class companies. Now, he is a Software Engineering Lead at Emirates Airlines in Dubai.