Essential techniques of writing Xpath & CSS path for Automation scripts

4 min readNov 29, 2019

Introduction of Xpath & CSS path..

One of the important differences between XPath and CSS is, with XPath we can search elements backward or forward in the DOM hierarchy while CSS works only in a forward direction. This means that with XPath we can locate a parent element using a child element.

XPath & CSS Path Selenium locator is very handy and saves a lot of valuable time of a test automation engineer. When an attribute of an element is dynamic, then you can use contains() for the constant part of the web element and also you can use contains() in any condition as needed.

Let’s Get Started!!!

Tip: While CSS selector and XPath are popular among Selenium users, CSS selector is highly recommended over XPath due to its simplicity, speed, and performance.

Below is our example which will help us to learn the Xpath & CSS paths very quickly.

Source Code

<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body><h2>HTML Table</h2><table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td @id='hello'>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table></body>
</html>

Xpath Types

Let’s write Xpath to column name “Contact” using ‘contains()’.

//th[contains(text(),'Contact')]

Let’s write Xpath to column name “Contact” using ‘text()’.

//th[text()='Contact']

Let’s write Xpath to column name “Contact” using Index’s

Option 1 //table/tr/th[2]Option 2 
(//th[text()='Contact'])[1]or (//th[text()='Contact'])By default if you not use the index value in the Xpath then it recognize the index value as 1

In the above example ‘Contact’ is in the second ‘th’ tag so we can find our target text by the index value of 2.

Let’s write Xpath to check availability of all three table headings using relative Xpath method. As per our exapmple the table heading are Company, Contact, Country

//table/tr[contains(text(),'Company')]/../tr[contains(text(),'Contact')]/../tr[contains(text(),'Country')]

Like this you can use the below mentioned examples to locate web application elements you need.

//td[@id='hello']
in this example you can use any tag attribute exsists in the DOM like class, value, or //td[starts-with(text(),'Maria')]//td[ends-with(text(),'Chang')]

Here are the differences between Xpath & CSS path

Example 1:

XPath: //div/aCSS: div > a

Example 2:

XPath: //div//aCSS: div a

Example 3:

XPath: //div[@id='example']CSS: #example
In CSS you can use # instead of using the id attribute.

Example 4:

XPath: //div[@class='example']CSS: .example

Example 5:

XPATH: //input[@id='username']/following-sibling::input[1]
CSS: #username + input

Example 6:

XPATH: //input[@name='username']
CSS: input[name='username']

Example 7:

XPATH: //input[@name='login'and @type='submit']
CSS: input[name='login'][type='submit']

Example 8:

XPATH: //a[contains(text(),'Log Out')]
CSS: a:contains('Log Out')

CHOOSING A SPECIFIC MATCH

CSS selectors in Selenium allow us to navigate lists with more finesse than the above methods. If we have a ‘ul’ and we want to select its fourth ‘li’ element without regard to any other elements, we should use nth-child or nth-of-type

<ul id = "recordlist"><li>Cat</li><li>Dog</li><li>Car</li><li>Goat</li></ul>

If we want to select the fourth ‘li’ element (Goat) in this list, we can use the nth-of-type, which will find the fourth ‘li’ in the list.

CSS: #recordlist li:nth-of-type(4)

On the other hand, if we want to get the fourth element only if it is a ‘li’ element, we can use a filtered nth-child which will select (Car) in this case.

CSS: #recordlist li:nth-child(4)

Note, if you don’t specify a child type for nth-child it will allow you to select the fourth child without regard to type. This may be useful in testing css layout in selenium

CSS: #recordlist *:nth-child(4)

Xpath aggregate functions.

COUNT, AVG, MIN, MAX, SUM

examples:

//table/tbody/tr[count(td)<4]count(//table/tbody/tr)

Hope you gain new learning through this article. These are the essentials you need to follow up when you needed to locate web elements for your automation test scripts. But remember there are more ways and techniques to locate web objects using Xpath & CSS path.

Feel free to share your thoughts in the comments.

About the Author

Kavindu is a Full Stack Software Quality Assurance Engineer specialize in Software Test Automation with 5+ years of experience in the software quality assurance industry. He has been served several tech companies in Sri Lanka during the past few years. Selenium, Appium, Waiter, Protractor, NightWatch.js, WinApp Driver tools has been used during his test automation projects

Essential techniques of writing Xpath & CSS path for Automation scripts

Source Code

CHOOSING A SPECIFIC MATCH

About the Author

Written by Qualityholics

Responses (1)