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]

<!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>

100

101

<!DOCTYPE html>

<html>

<head>

<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>

<h1>London</h1>

<p>London is the capital city of England.</p>

</div>

<h1>Paris</h1>

<p>Paris is the capital of France.</p>

</div>

<h1>Tokyo</h1>

<p>Tokyo is the capital of Japan.</p>

</div>

<p>Oslo is the capital of Norway.</p>

</div>

<h1>New Delhi</h1>

<p>New Delhi is the capital of India.</p>

</div>

<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('NewDelhi', this, 'blue')">New Delhi</button>

<button class="tablink" onclick="openCity('Canberra', this, 'orange')">Canberra</button>

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.

Author: Amod Mahajan

A software Tester who is paid to judge products developed by others. Currently getting paid in American Dollars. Writing technical posts and creating YouTube videos are my hobbies.

Learn About Less Talked & Used XPath Function – position()

Author: Amod Mahajan

Related

Leave a Reply Cancel reply

Subscribe to new posts to become automation expert