Xpath in automation testing

Xpath in automation testing


When writing automation tests there are several ways to locate the web elements using Selenium such as: id, linkText, name, partialLinkText, tagName and xpath. The following link describes the documentation of By class in selenium in case you are interested for more details.There is no silver bullet solution for locating the web elements when writing the automation tests. The automation tester should determine the best solution for locating the web elements, but in many cases xpath strategy is omitted. The reason for this is that many tester use the browser option for retrieving the absolute xpath for a specific web element. This can be easily achieved by inspecting the web element, and clicking right click on the web element Copy -> Copy xpath. This is the worst thing you can do when writing the automation tests because the xpath is absolute, and it can be easily broken. The preferable way of using xpath is when the xpath is relative, it can be parameterized and re-used for locating the elements.

Start understanding Xpath

In order to understand Xpath you need two things:

  1. Material from which you can study Xpath syntax.
  2. Tool for practicing Xpath.

The best way to start with xpath is through w3school xpath tutorial, which explains the syntax of xpath through simple examples. The best way to test your xpath syntax is through ChroPath extension for Chrome. This tool gives the relative xpath, absolute xpath, css selector, and also allows to write your xpath. When you are going to enter the xpath the tool selects the elements on the website, which allows you to see which elements are going to be selected using the entered xpath. Note that the given relative xpath is better than the absolute xpath, but you would have to make some changes in order to satisfy your needs, but for starting point is really handy.

Here is a list of common expressions and operators when writing your xpath:

  • / –¬†Selects from the root node.
  • // –¬†Selects nodes in the document from the current node that match the selection no matter where they are.
  • . – Selects the current node.
  • .. – Selects the parent of the current node.
  • @ – Selects attributes.
  • text() – Retrieves the text of the node
  • contains() – returns true if the string is contained in the text or attribute.
  • and – operator for “and” condition.
  • or – operator for “or” condition.

If you are interested for all operators and expressions, you can visit the w3schools tutorial.

Practice real scenario

Everything is nice said, but it is always best when there is real scenario involved. For this case I’m going to use the Youtube home page, and use the described expressions to select the elements that I desire. You can test the following examples by copy pasting the xpath selector in the ChroPath tool.

Example 1, describes selecting the Recommended title of the home screen section with recommended videos. In this case the selector can be used with span or with wildcard, in both cases the same element is going to be selected.

//span[text() = ‘Recommended’]
//*[text() = ‘Recommended’]

Example 2, describes selecting all elements under the Recommended section.

//span[text() = ‘Recommended’]//../..//..//..//.

Example 3, describes selecting the title of each video under the Recommended section.

//*[text() = ‘Recommended’]//../..//..//..//*[@id = ‘video-title’]

Example 4, describes selecting specific video title under the Recommended section.

//*[text() = ‘Recommended’]//../..//..//..//*[@id = ‘video-title’ and text() = ‘Top 10 Rick and Morty Theories’]

Example 5, describes selecting video title which contains specific text.

//*[text() = ‘Recommended’]//../..//..//..//*[@id = ‘video-title’ and contains(text(), ‘Rick and Morty’)]

Example 6, describes selecting video title which contains the text Rick and Morty or Imagine Dragons.

//*[text() = ‘Recommended’]//../..//..//..//*[@id = ‘video-title’ and (contains(text(), ‘Rick and Morty’) or contains(text(), ‘Imagine Dragons’))]

Final thoughts

Above I have written couple of examples for xpath selectors, but the main question right know is how you can benefit from xpath, in order to optimize your code. Let’s have a look into the fourth example, where the title of the video is selected. If you are going to use the xpath as it is, you are limited to just on title, in order to optimize your code, you would have to create method with input parameters. In this case the optimized method would look like this:

public By getVideoTitleLocator(String categoryName, String videoTitle) {
    String xpathString = String.format("//*[text() = '%s']//../..//..//..//*[@id = 'video-title' and text() = '%s']", categoryName, videoTitle);
    return By.xpath(xpathString);

With this code the xpath is re-used in order to select any video title in the specified category.