Published March 06, 2018 by

XPath Writing & Techniques

XPath Writing & Techniques

In this post, we’ll learn techniques to create xPath using predefined methods and operators.


xpath is the path of the element in HTML tree.

<html>

<body>

FN<input type="text">

LN<input type="text">

</body>

</html>

In the above sample web page we can’t use cssSelector because it is same as first name field. In this case we can use ‘xpath’.

We write the xpath expression using /(forward slash). The first forward slash represents beginning of the tree (root).


After every forward slash we should specify tag of immediate child element. We can also use index which starts from 1.

Few techniques for xPath creation:

  1. starts-with() 
  2. contains() 
  3. text() 
  4. following 
  5. following-sibling 
  6. child xPath 
  7. Indexing 
  8. AND Operator 
  9. OR Operator

1. starts-with()

This method is used to find an element with specific starting text in its value.
In this example we are selecting "An Overview on Locators" post title by using starts-with().
The syntax is as follows:
.//*[starts-with(@AttributeName,'Value')] OR
.//tagName[starts-with(@AttributeName,'Value')]

Xpath = //*[starts-with(@class,'post-title')]

2. contains()
This method is used to find an element with specific text in its value. 
In this example we are selecting "An Overview on Locators" post title by using contains().


The syntax is as follows: 
.//*[contains(@AttributeName,'Value')] OR

.//tagName[contains(@AttributeName,'Value')]

Xpath = //*[contains(@class,'post-title')]




3. text()

This method is used to find exact text of an element. 
In this example we are selecting "An Overview on Locators" post title by using text().
The syntax is as follows: 
.//*[text()='Value'] OR

.//tagName[text()='Value']

Xpath = //*[text()=' An Overview on Locators']




4. following


This method is used to find all defined elements from the current node. 
In this example we are selecting all defined nodes from currently selected node "By.tagName" by using following.

The syntax is as follows: 

.//*[CurrentNodeElement]//following::ElementToBeFound




Xpath = //li[text()='By.tagName']//following::li


In this example, text()='By.tagName' represents CurrentNodeElement and li tag is our ElementToBeFound.


5. following-sibling


This method is used to find siblings of the currently selected element.
In this example we are selecting siblings from currently selected "An Overview on Locators" post title by using following-sibling.

The syntax is as follows: 
.//*[SelectedElement]//following-sibling::ElementToBeFound



Xpath = //h3[@class='post-title entry-title']//following-sibling::div In this example, @class='post-title entry-title' represents SelectedElement and div tag is our ElementToBeFound.

6. child

This method is used to find all child elements of the currently selected element.
In this example we are selecting child nodes from available "tabs"  by using child.

The syntax is as follows: 
.//*[SelectedElement]//child::ElementToBeFound



Xpath = //ul[@class='tabs']//chils::li

In this example, @class='tabs' represents SelectedElement and li tag is our ElementToBeFound.

7. xPath Indexing

When we have more than one matching elements on UI with respect to relative Xpath, this Xpath indexing is helpful.
Consider an example where you want to find an element that has ‘Lab’ word in it. So xPath for same would be .//*[contains(text(),’Lab’)] 
When we find an element on UI with this xPath we get more than one matching node. In below case, we have nine matching node.


Now, we have to select text i.e. ‘My Automation Lab‘ but how can we do that ??
We need to index entire xPath and syntax for same is as follows: 
(Entire_xPath)[indexCounter]
In this case, .//*[contains(text(),’Lab’)] represents Entire_xPath and index counter will vary depending on number of matching nodes. So for us, counter will vary from one to nine.


When index counter is updated to four, our desired element gets selected and this will be our final xPath to perform any operation on this element.

8. AND operator

This operator is used to find an element that’ll satisfy two or more than two conditions specified in xPath. The syntax is as follows for two conditions: 
.//*[Condition1 AND Condition2]



In this example, text()='Home' represents Condition1 and @href='http://www.myautomationlab.com/' represents Condition2.

9. OR operator

This operator is used to find an element that’ll consider either of any conditions.
The syntax is as follows for two conditions: 

//*[Condition1 OR Condition2]



In this example, we have two matching nodes as both the condition are satisfied. text()='Home' represents Condition1 and text()='About' represents Condition2.

Popular Posts