Important! Read this.
We have launched a new documentation website. If you're using Enterpise Edition 10 (or higher) or Express/Business Edition 2.4.1 (or higher), visit this page.
We have moved to a new documentation platform. This section is no longer supported. For the up-to-date information, see XPath guide.
The topic is a brief introduction to XPath to present a quick overview of the main techniques you can use in your recordings to handle elements on a web-page, for example, to click on a link or an object, get or set value from/to fields or menus. The tutorial explains the basics of XPath with suitable examples
XPath is a query language that is used for traversing through an XML (or HTML) document identifying different parts of documents by indicating nodes by position, relative position, type, content, etc.
In other words, XPath is a quick way to reference an element on a web page and search the page top to bottom looking for elements that match the criteria defined in the expression.
Commonly, XPath is used to search for particular elements or attributes with matching patterns. The patterns are defined with expressions to identify an element on a web page that does not have an easy, unique identifier.
Similar to the Document Object Model (DOM), XPath allows us to pick nodes and sets of nodes out of the HTML tree. There are four main node types XPath has access to in HTML, including:
The path to our element (link) is as follows.
Thus, we can locate the element by the full or absolute path adhering to the following order used on the screenshot above:
Root Node/Parent Element/Current Element, e.g.,
Within the element node, attribute and text nodes are differentiated to locate the element by:
//a[contains(text(),'Create New Invoice')]
XPath can use location paths, attribute location steps, and compound location paths to very quickly and efficiently retrieve nodes from an XML/HTML document. First, let's have a look at basic location paths in the example below.
There are several location paths to that field. These are as follows.
/html/body/div/div/form/div/div/inputor an absolute XPath
//input[@id='email'], or a relative XPath
//input[contains(@id,'email')], or a partial XPath
All the paths are correct and all can be used to search for the element in the document.
The following XPath types are differentiated.
The absolute XPath is the direct way to find the element looking for it through the HTML tree top to bottom. A single slash (/) at the start instructs the XPath engine to search for the element starting from the root node and then proceed to the nested elements following the order of precedence.
The absolute path for the email input field in the previous example is as follows.
The absolute location path always refers to the root node and calls for each of those nested relationships to be present 100% of the time, or the Xpath will not function. That is why this type of XPaths is not considered to be a reliable one.
As the absolute XPath is too lengthy, there is a possibility of getting a shorter XPath. A double slash (//) at the start instructs the XPath engine to search for the matching element in any place in the document. That means that the relative XPath searches through the entire web page to find the locator specified, while the absolute XPath goes strictly along the path defined from the root node.
There is a good chance that such XPath will work in case the web page is changed. It is always better to choose a relative XPath, as it helps us to reduce the chance of the Element not found exception.
The easiest way to build a relative XPath is to using the 'id' attribute. Let's have a look on the HTML code of the input field from the example above.
Let's take the id class to build an XPath for this element. In the brackets , we specify the
id attribute with the @ symbol. We can chain as many of these together as we need. The attribute value is taken into a single quote sign ('), though Chrome DevTool generate XPaths with double quote sign (").
The operand can replace input thus searching for elements regarding of the type.
Quite often, we can face issues when the element’s properties are dynamically generated or changed by web developers as the time passes. In this case, we can search for an element using the
contains, we can create the following XPath expression to find the input field for the email:
An axis represents a relationship to the context node, and is used to locate nodes relative to that node on the tree. The XPath axes methods are used to find dynamic elements, which otherwise not possible to find by normal XPath method
You use an axis by using it's name, along with a node test, and optionally, one or more predicates. The axis and node test are separated by
::, and the predicate/s (if there are any) are enclosed in
|Contains the ancestors of the context node beginning with the parent node and traveling through to the root node|
|Contains the context node and the ancestors of the context node; thus, the ancestor axis will always include the root node|
|Contains the attributes of the context node, only elements have attributes|
|Contains the children of the context node|
|Contains the descendants of the context node, i.e. all of the children of the context node, and all of their children, and so forth|
|Сontains the context node and the descendants of the context node|
|Contains all the nodes that appear after the context node, except any |
Contains all the nodes that have the same parent as the context node and appear after the context node in the source document
|Contains all the nodes that are in scope for the context node; in this case, the context node must be an element node|
|Contains the single node that is the parent of the context node|
|Contains all the nodes that precede the context node in the document except any |
|Contains all the nodes that have the same parent as the context node and appear before the context node in the source document|
|Contains the context node itself|
XPath contains the path of the element situated at the web page. A simple example of syntax for creating XPath is as follows.
Where the following elements are defined:
//– current node to select
nodename– name of the particular node
attribute– attribute name of the node
value– value of the attribute
XPath uses path expressions to select nodes in an XML document. The node is selected by following a path or steps. The most common XPath expressions are listed in the table below.
Defines an absolute XPath and searches all child elements from the root node only
Defines a relative XPath and searches all descendant elements from the current node in any place in the document
|Searches elements regardless of the type|
|Specifies an element attribute|
|Specifies information about the element you are looking for, e.g., an order number or an attribute|
|Searches for the text of the element|
|Searches for a specific value in an attribute or the element text in case a full string match cannot be done|
|Computes several paths|
|Means any one condition should be true to find the element|
|Means both conditions should be true to find the element; it fails to find the element if any one condition is false|
Predicates are used to find a specific node or a node that contains a specific value. Predicates are always embedded in square brackets.
Finding XPaths in IFrames can present some difficulties. IFrame is a web element which is embedded in another web element or an HTML document embedded inside another HTML document. The
<iframe> tag specifies an inline frame.
<iframe> tag is used for embedding another HTML page into the current page. To see how it works, see the following use case.
Let's take an example from w3schools.com. We will open the web page and click the Next element located in an IFrame to open the next topic of the embedded page.
IFrame (XPath to IFrame with the embedded document) –
Next button –
Create the recording to automate clicking Next on the embedded document.
|3.1||Create three String variables in Recorder|
|3.2||Open the website to work with an IFrame||Open Website|
|3.3||Click Next on the web page embedded in the IFrame||Click Mouse|
In some cases, XPath expression can return more than one element.
|HTML structure||XPath expression||Result|
To pick a certain element from the list, you can use the following pattern:
(expression)[index] where index starts from 1.
Therefore, you can use this trick to loop through a list of elements in WorkFusion Studio.
There are a lot of plugins that can be very helpful for finding and building XPaths, though here we will cover using native browser solutions.
Chrome Developer Tools (DevTools for short) are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers with deep access into the internals of the browser and their web application.
The Elements panel lets you see everything in one DOM tree and allows inspection and on-the-fly editing of DOM elements.
Open a web page in Google Chrome and do the following steps to get the XPath of a web page element.
Choose Copy > Copy XPath from the context menu. The XPath to the selected element is copied to Clipboard.
Working with Firefox Developer Tools is almost identical to working with Google Chrome.
In order to copy the XPath in Firefox, open the web page and perform the following actions.
XPaths copied from Google Chrome or Firefox, as a rule, work in Internet Explorer too.
However, if you need to use an XPath on a web page or application that can only be opened in Internet Explorer, you can do it using IE Inspector or Fire IE Selenium Tool. As IE Inspector has a limited functionality to view the elements in the tree, it is better to use Fire IE Selenium Tool. The tool uses Excel based WebBrowser Control.
If you need to verify that your XPath expression is correct and unique, use Chrome DevTools.
It is correct, if you are going to iterate through these elements. A set of elements, which can be accessed with the same XPath, is called Collection. Each single element from a collection can be accessed by index.
For example, an HTML page contains a collection of elements with the same class that is
sample_class. The XPath to access the collection is
You can access the first element in the collection via the XPath:
the second one via XPath:
and so on.
In the recording, you can iterate through the collection with the following XPath to get each single element:
recorder_var is a Recorder variable of Number type.
The samples explain how you can use XPath in your recordings to automate interactions with a web application.
For getting XPath, we will use Google Chrome DevTools, so for details, you can refer to the respective section above.
XPaths of the elements in the examples below can be provided using Recorder variables of String type.
In this example, we will use Express Edition to log into a web application (Invoice Plane).
Email input field –
Password input field –
Login button –
Create the recording to automate the login process.
|3.1||Create Recorder variables for email and password to log in.|
|3.2||Open the website to enter email and password and log into the application.||Open Website|
|3.3||Enter the email.||Web Element|
|3.4||Enter the password.||Web Element|
|3.5||Click the Login button to log into the application with the email and password provided.||Click Mouse|
In this example, we will use Express Edition to click the Create Invoice button in Invoice Plane. The step in the example is an extension to Example 1, as it is performed after log into Invoice Plane.
Create Invoice button on the Quick Actions panel –
The XPath of the Create Invoice menu item will be as follows:
You can find the locator is using the following expression to search for a text in the link:
//a[contains(text(), 'Create Invoice')]
or, if the text is known and unique:
Add the following step to the previous recording.
Click Create Invoice to open the input mask to create a new invoice.
As Invoice Plane is used for tests, the input mask does not open.
In this example, we will use Express Edition to click a link pointing to an invoice in the image format to download the image. The step is an extension to Example 1, as it is performed after we log into Invoice Plane.
Open DevTools and get XPath for the following element.
The XPath to the first element is as follows:
As we want to iterate through all the available invoices in the panel, we need an XPath to get the links from all table rows. It looks like this:
To get each link, we create a counter in Recorder variables (for example,
counter with type Number) and use it in the XPath:
Create the following recording.
|3.1||Open the web site to download invoices.||Open Website|
|3.2||Create and use a List variable to save all links to invoices.||Web Element|
|3.3||Create a loop to iterate through all elements in the list ||For Each Loop|
Perform the nested action for each element in
|3.4||Increment Counter (initially defined as 0).||Variables > Expression Value|
Right-click a link to download an invoice in the image format from Recent Invoices.
Click Save Link As... in the context menu.
Capture the context menu.
|3.7||Click Save in the Save As window.||Click Mouse|
Capture the Save window.