Xpath Functions

Introduction

Functions allow us to manipulate data and perform complex searches on web pages. This is useful when an element doesn't have attributes associated with it, and we need to use other methods in order to identify it.

Functions are sections of code that complete tasks. You can think of them as tools that help you retrieve certain information that would be difficult to get without using the tool.

Functions usually have syntax that looks like this:

function_name(argument_1)

Arguments are a way to provide more information to a function. The information, or data, you provide is called a parameter.

Some common functions for Xpaths are:

• Contains(): selects all elements that contain a specific string of text.
• Text(): selects the text of an element.
• Count(): counts the number of nodes that match a specific XPath expression.
• Position(): returns the position of the current node in a list of nodes.
• Concat(): concatenates two or more strings.

Pre-requisities

We'll be using our demo e-commerce website for the exercises in this practice section:

http://magento.testinsights.io/

You will also need to know how to inspect a webpage to view the HTML. We'll be using Chrome DevTools throughout this series. 

Please review the following links to get started with DevTools:

Overview of Chrome DevTools

How to open Chrome DevTools

To open the inspector, right click on any element of a webpage and click "Inspect" or F12. For our purposes, we'll be interested in what is in the Elements pane. This pane will show the HTML structure of the page.

Practice

Exercise 1 - Contains()

Let's practice finding the "Home Page" text on the Magento landing page. Open up the Chrome DevTools and press ctrl + F to bring up the Xpath search bar.

If we click on the upper left hand corner of DevTools, there is an option for us to select an element from a page. Click on the button, and then click on the Home Page text on the page to view the node in the DOM.

We now know that the element's tag is "span". We'll write our Xpath like the below into the search bar.

//span[contains(text(),"Home Page")]

You'll find only the Home Page text is selected.

Note: Xpaths searching for text must be an exact match. If we had typed in "home page" or "Homepage", our search would return no results.

Exercise 2 - Text()

Now let's practice searching by the Text() function. While the Contains() function could possibly return multiple results, the Text() function will only return a result if it contains the full text specified. If we had typed in "Home" rather than "Home Page" in our previous example using Contains(), it would still return a result, while using a Text() function, it would not.

For this exercise, let's try searching for the Sign In element in the ribbon of the page. We'll using the Inspect tool to select the element.

Now we know that this is a link element (represented by the "a" tag), so we can write the Xpath like below:

//a[text()="Sign In"]

When we type this into the search bar, we can see our element selected:

Additional Resources

A list of Xpath Functions by Mozilla

Xpath Functions and Numeric Operators by O'Reilly

A tutorial on Xpath Functions with examples by Software Testing Help