5 Simple Xpath Tips

XPath selector language which like swiss army knife. It helps me when i am in tough situation. Using some little helper tips sometimes save your times.

1. Descendant-or-self (//)

You can use that syntax when you want select descendant nodes. For example:

<article>
   <div>
     <h1>Hello <b>Tester</b></h1>
   </div>
</article>

We can find ‘h1’ element a few different ways.

//article/div/h1

or

//article//b

2. Parent of Element (..)

One of useful expressions is ‘..’ (parent of element). It helps to find parent element of a node.

<table>
   <tr>
     <td id="sample">STATUS</td>
     <td>active</td>
   </tr>
   <tr>
     <td id="sample2">amount</td>
     <td>₺100</td>
</table>

For example first column of table static and second column dynamic, you should refer the first column.

You can use this expression like this:

//table/tr[1]/td[2]

But this probably will be more useful:

//td[@id='sample']/../td[2]

3. Logical Operators (not, or ,and)

Logical operators, many time make your job easy.

3.1 Not Operator

Example:

<ul>
   <li class="company">Emirates</li>
   <li class="company">Aeroflot </li>
   <li>(Promoted) Turkish Airlines</li>
   <li class="company">KLM</li>
</ul>

Xpath selector:

//ul/li[not(@class="company")]

3.2 AND Operator

Example

<ul>
   <li class="company">Emirates</li>
   <li class="company">Aeroflot </li>
   <li class="company" id="promoted">(Promoted) Turkish Airlines</li>
   <li class="company">KLM</li>
</ul>

Xpath selector:

//li[(@class='company') and (@id='promoted')]

3.3 OR Operator

Example

<ul>
   <li from="dubai" to="ankara">Emirates</li>
   <li from="moskow" to="istanbul">Aeroflot </li>
   <li from="istanbul" to="london">(Promoted) Turkish Airlines</li>
   <li from="amsterdam to="dortmund">KLM</li>
</ul>

We need to select Istanbul flights. Below XPath gets two items.

//li[(@from='istanbul') or (@to='istanbul')]

4. String Functions

Sometimes attributes, id and class names may not be found on the document.  So you would be have to get the element with XPath string functions .

4.1 contains(haystack, needle)

Xpath expression at below will return that all li elements contains ‘Airline’.

Example:

<ul>
 <li>1. Airline: Turkish Airlines</li>
 <li>2. Airline: KLM Airlines</li>
 <li>3. Airline: Lufthansa</li>
</ul>

XPath Expression:

//li[contains(text(),'Airline')]

4.2 starts-with(haystack,needle) / ends-with(haystack,needle)

It is possibly easy to predict that expressions what to do. It will return 2 result (first and second li element as we expect).

Example:

<ul>
 <li>Airline: Turkish Airlines</li>
 <li>Airline: KLM Airlines</li>
 <li>Airline: Lufthansa</li>
</ul>

XPath Expression:

//li[ends-with(text(),'Airlines')]

4.3 matches(haystack,expression)

‘matches’ function provide to us to use regex. But that function supported by Xpath 2.0. If you search a playground for Xpath 2.0, that XPath 2.0 tester is going to help to you.

Example:

<ul>
 <li>2017</li>
 <li>2016</li>
 <li>2015</li>
 <li>1800</li>
 <li>1700</li>
</ul>

Expression at below gets only between 2010..2019 years

//li[matches(text(),'201[0-9]')]

5. Extras

Probably most of times you will not use these functions but good to know. Keep them mind just in case.

5.1 Ceiling , Floor and Round

Below example will return li element that text with ‘3’.

Example:

 <ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
  </ul>

You can see casting function like string() at below expression.

XPath Expression:

//li[text()=string(ceiling(2.6))]

5.2 Greather and Smaller

For example:

  <ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
  </ul>

Expression

//li[number(text()) > 3.8]

5.3 Position

You can get an element by index simply with two ways.

For example:

  <ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
  </ul>

XPath expression:

//li[4]
//li[position()=4]

 

Sources: