Published March 06, 2018 by with 0 comment

XPath Writing & Techniques

Hello learners,

As we have seen in the last blog what is xpath and its types. So, in this post, we’ll learn about different 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.


XPath Writing & Techniques


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.
10. Ancestor
This operator is used to traverse up the DOM tree to find ancestors of an element. 
The ancestor axis selects all ancestors element (parent, grandparent, great-grandparents, etc.) of the current node.
The syntax is as follows: 
//*[SelectedElement]//ancestor::tagName
Here we are finding the ancestor of "About" tab
11. Preceding
This operator is used to select all nodes that come before the current node.
The syntax is as follows: 
//*[SelectedElement]//preceding:: tagName
Here we are finding the preceding elements of "Contact Us" tab, We are getting 2 matching nodes for "Home" & "About" tab.

0 comments:

Post a Comment

Popular Posts