Learn About Less Talked & Used XPath Function – position()
XPath 1 provides a powerful function named “position()” . Before we move further, let’s get in to a scenario where we need this.
Consider below web page. We have six different tab headers which are actually country capital names. I used W3School reference to get below html design.


If I ask you to give me Xpath for Nth indexed tab header i.e. 2nd Header or 4th header. Probably you will write XPath as below :-
(//button[@class=’tablink’])[2] – For 2nd indexed
(//button[@class=’tablink’])[4] – For 4th indexed
Note:- In XPath index starts from one (1) not from zero as we see in programming languages.
Now if I ask you to:-
- Give me a XPath which locates tab headers from 2nd to 4th index?
- Give me a XPath which locates 2nd and 4th indexed tab headers together?
- Give me a XPath which locates tab headers which are before 5th index?
- Give me a XPath which locates tab header which are after 2nd index?
Now here you need to use XPath function called “function()”.
The position
function returns a number equal to the context position from the expression evaluation context.
We can replace index with position as below:-
(//button[@class=’tablink’])[2] -> //button[@class=’tablink’][position()=2]
(//button[@class=’tablink’])[4] -> //button[@class=’tablink’][position()=4]
We can use conditional operator like greater than , less than , greater than and equal to, less than and equal to and not equal to etc. Even we can use logical operator like AND & OR with it.
To get all headers from 3rd index onward i.e 4th, 5th and 6th
//button[@class=’tablink’][position()>3]
To get all headers from 3rd index including i.e 3rd, 4th, 5th and 6th
//button[@class=’tablink’][position()>=3]
To get all headers before 5th index i.e 1st, 2nd, 3rd and 4th
//button[@class=’tablink’][position()<5]
To get all headers before 5th index including i.e 1st, 2nd, 3rd ,4th and 5th
//button[@class=’tablink’][position()<=5]
To get all headers between 2nd and 5th index i.e 3rd and 4th
//button[@class=’tablink’][position() >= 3 and position() <= 4]
To get only 2nd and 4th indexed locators
//button[@class=’tablink’][position() = 3 or position() = 4]
To get all headers except 3rd index
//button[@class=’tablink’][position() != 3]
To get all headers except 3rd and 2nd index
//button[@class=’tablink’][position() != 3 and position() !=2]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: "Lato", sans-serif;} .tablink { background-color: #555; color: white; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; font-size: 17px; width: 16.6%; } .tablink:hover { background-color: #777; } /* Style the tab content */ .tabcontent { color: white; display: none; padding: 50px; text-align: center; } #London {background-color:red;} #Paris {background-color:green;} #Tokyo {background-color:blue;} #Oslo {background-color:orange;} #NewDelhi {background-color:blue;} #Canberra {background-color:orange;} </style> </head> <body> <p>Click on the buttons inside the tabbed menu:</p> <div id="London" class="tabcontent"> <h1>London</h1> <p>London is the capital city of England.</p> </div> <div id="Paris" class="tabcontent"> <h1>Paris</h1> <p>Paris is the capital of France.</p> </div> <div id="Tokyo" class="tabcontent"> <h1>Tokyo</h1> <p>Tokyo is the capital of Japan.</p> </div> <div id="Oslo" class="tabcontent"> <h1>Oslo</h1> <p>Oslo is the capital of Norway.</p> </div> <div id="NewDelhi" class="tabcontent"> <h1>New Delhi</h1> <p>New Delhi is the capital of India.</p> </div> <div id="Canberra" class="tabcontent"> <h1>Canberra</h1> <p>Canberra is the capital of Australia.</p> </div> <button class="tablink" onclick="openCity('London', this, 'red')" id="defaultOpen">London</button> <button class="tablink" onclick="openCity('Paris', this, 'green')">Paris</button> <button class="tablink" onclick="openCity('Tokyo', this, 'blue')">Tokyo</button> <button class="tablink" onclick="openCity('Oslo', this, 'orange')">Oslo</button> <button class="tablink" onclick="openCity('NewDelhi', this, 'blue')">New Delhi</button> <button class="tablink" onclick="openCity('Canberra', this, 'orange')">Canberra</button> <script> function openCity(cityName,elmnt,color) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablink"); for (i = 0; i < tablinks.length; i++) { tablinks[i].style.backgroundColor = ""; } document.getElementById(cityName).style.display = "block"; elmnt.style.backgroundColor = color; } // Get the element with id="defaultOpen" and click on it document.getElementById("defaultOpen").click(); </script> </body> </html> |
You can clone code from my git repo.
If you have any doubt, feel free to comment below.
If you like my posts, please like, comment, share and subscribe.
#ThanksForReading
#HappyLearning
Find all Selenium related post here, all API manual and automation related posts here and find frequently asked Java Programs here.
Many other topics you can navigate through menu.