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.
Few techniques for xPath creation:
2. contains()
3. text()
This method is used to find exact text of an element.
- starts-with()
- contains()
- text()
- following
- following-sibling
- child xPath
- Indexing
- AND Operator
- 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().
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')]
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().
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')]
Xpath = //*[contains(@class,'post-title')]
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']
Xpath = //*[text()=' An Overview on Locators']
4. following
Xpath = //li[text()='By.tagName']//following::li
In this example, text()='By.tagName' represents CurrentNodeElement and li tag is our ElementToBeFound.
5. following-sibling
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.
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.
Here we are finding the preceding elements of "Contact Us" tab, We are getting 2 matching nodes for "Home" & "About" tab.
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:
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
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.
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
//*[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
//*[SelectedElement]//preceding:: tagName
0 comments:
Post a Comment