Introduction to XPaths

The purpose of this help page is to assist you in creating your own XPaths if you’re a beginner.

What is an XPath?

In Provar, If you’re working with Page Objects or if the elements on UI are not found by a standard Salesforce locator, you can use an XPath to find an element on the web page.

An XPath is defined as an XML path. It is a syntax or language for finding any element on a webpage using an XML path expression, providing the webpage has an HTML DOM structure.

The basic format of XPath is explained below:

An XPath contains the path of the element situated on the web page. Standard syntax for creating XPath is:

XPath=//tagname[@Attribute=’Value’]

//: Select current node.
Tagname: Tagname of the particular node.
@: Select attribute.
Attribute: Attribute name of the node.
Value: Value of the attribute.

Creating XPaths

Basic XPath

XPath expressions select a node or a list of nodes from the XML document on the basis of attributes such as ID, Name, and Classname.

For example:

In this example, we can see the input tag has an id attribute of name_firstlea2. From this we can create the following XPath:

//input[id='name_firstlea2']

As you start to build your XPath in a text editor, you can test whether it is pointing to the correct element using the Console tab of Google Chrome.

You can open this by:

Pressing the F12 key on your keyboard, or
Right-clicking anywhere on the page and selecting Inspect

After switching to Console, type $x(“your XPath”) and press Enter.

If the XPath is pointing to any element then that element will be returned as a result.

For example:

< //input[@id=’name_firstlea2”] > is a xpath which you have to execute on browser console. It will search for the input tag with id ‘name_firstlea2’ in HTML Dom. If that Xpath matches any condition in the same dom it will return that element or elements. If you hover on that returned element that element will get highlighted.

Using functions

Contains()

Contains() is a method used in XPath expressions. It is used when the value of any attribute changes dynamically, or when the attribute value is partially static and partially changing with each execution, such as login information.

Contains() has the ability to find an element with partial text, as shown in the example below.

Here is an input tag where id=“opp3”:

When we enter the following XPath:

//input[contains(@id,'opp')]

We get the following result:

This shows that the returned element on that particular Xpath which we are executing. In this case the XPath matches the Opportunity name field.

Text()

Text() is another method used in XPath expressions. With Text(), we can find an element with an exact text match.

For example, here is a Description label tag:

When we enter the following XPath:

//label[text()='Description']

We get the following result:

XPath Axes

XPath Axes methods are used to find complex or dynamic elements. Below we will see some of these methods. Refer to the Appendix below for more information on Axes methods.

Ancestor

The Ancestor axis selects all ancestor elements (grandparent, parent, etc.) of the current node.

For example, in the screenshot below we want to find the ancestors of the current node (label) with table tags:

When we enter the following XPath:

//label[text()='Description']/ancestor::table

We get the following result:

We may have a condition where our Xpath matches more than one element on the particular HTML Dom, so it will return all the elements that has matched with the Xpath Condition. In this case, two results are returned because we have two ancestor tables with that node.

Following-Sibling

The Following-Sibling axis selects the following siblings of the context node. Siblings are at the same level of the current node.

For example:

When we enter the following XPath:

//label[text()='Assistant']/../following-sibling::td

We get the following result:

Parent

The Parent axis selects the parent of the current node. There are two ways to achieve this, using Parent or using “..”.

For example:

Using Parent:

Using “..”

Indexing

Indexing helps with selecting one node uniquely on the basis on indexes.

For example, in the below screenshot we can identify the node by index[1]:

Adding fields manually to a page object

To add fields manually to a Page Object, start by creating a new Page Object.

Clicking the downwards arrow next to the New Test button in the top-left of Provar Desktop. Select New Page Object from the dropdown:

On the pop-up which appears, provide a Name for the Page Object and select a Connection:

Then click the Finish button. This creates the Page Object.

Finally, click the Java Source tab of the Page Object. This is where we can add new fields.

Example 1: Text Fields

To add a text/input field to the Page Object, first build the XPath by inspecting the field’s page in Chrome:

Add the following code snippet to the Page Object:

@TextType()

@FindBy(XPath = "//input[@id='cas14']")

public WebElement subject;

It should look as follows:

Example 2: Buttons

To add a button to the Page Object, first build the XPath by inspecting the button’s page in Chrome:

Add the following code snippet to the Page Object:

@ButtonType()

@FindBy(XPath = "//input[@name='save']")

public WebElement save;

It should look as follows:

Example 3: Hyperlinks

To add a hyperlink to the Page Object, first build the XPath by inspecting the hyperlink’s page in Chrome:

Add the following code snippet to the Page Object:

@LinkType()

@FindBy(XPath = "//a[contains(@title,'Google Search')]")

public WebElement googleSearch;

It should look as follows:

Example 4: Checkboxes and radio buttons

To add a checkbox or radio button to the Page Object, first build the XPath by inspecting the page in Chrome:

Add the following code snippet to the Page Object:

@BooleanType()

@FindBy(XPath = "//input[@id='IsRecurrence']")

public WebElement recurrence;

It should look as follows:

Example 5: Picklists and drop-downs

To add a picklist/dropdown field to the Page Object, first build the XPath by inspecting the page in Chrome:

Locating fields inside a frame

To locate an element inside a frame, write the below piece of code inside a Page Object:

@PageFrame()

    public static class Frame

    {

            @AnnotationType()

            @FindBy(XPath = "XPath expression for the element")

            public WebElement element;

    }

    @FindBy(XPath = "XPath expression for the frame")

    public Frame frame;

For example:

In this scenario, the code snippet should look as follows:

 @PageFrame()

    public static class Frame

    {

            @ButtonType()

            @FindBy(XPath = "//input[@value='Save']")

            public WebElement saveButton;

    }

    @FindBy(XPath = "//iframe[@id='theIframe']")

    public Frame frame;

Locating fields inside a table

While locating an element inside a table, write the below piece of code inside a Page Object.

@PageRow()

public static class TableName

{

            @AnnotationType()

            @FindBy(XPath = "XPath expression for Element")

            public WebElement element;           

}

@FindBy(XPath = "XPath expression for Table")

@PageTable(firstRowContainsHeaders = true/false, row = TableName.class)

public List<TableName> tableName;

For example:

In this scenario, the code snippet should look as follows:

@PageRow()

public static class AccountTable

{

            @LinkType()

            @FindBy(XPath = ".//th[1]//a")

            public WebElement accountName;           

}

@FindBy(XPath = "//table[@class='list']//tr")

@PageTable(firstRowContainsHeaders = true, row = AccountTable.class)

public List<AccountTable> accountTable;