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 Automation, 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, provided 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. The 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 based on attributes such as ID, Name, and Classname.
For example:
In this example, the input tag has an id attribute of name_firstlea2. From this, we can create the following XPath:
//input[id='name_firstlea2']
As you 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 points to any element, that element will be returned as a result.
For example:
< //input[@id=’name_firstlea2”] > is an xpath that you have to execute on the 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() can 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 the returned element on that particular Xpath that 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 the current node’s ancestor elements (grandparent, parent, etc.).
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 have matched the Xpath Condition. Two results are returned in this case 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 as 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 based on indexes.
For example, in the below screenshot, we can identify the node by index[1]:
Adding fields manually to a page object
To manually add fields to a Page Object, create 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 that 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;
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;
Appendix: Axes methods
XPath Axes methods are used to find complex or dynamic elements. The major XPath axes follow family tree terminology.
self:: is you.
Downward:
- child:: are your immediate children.
- descendant:: are your children, and their children, recursively.
- descendant-or-self:: (aka //): are you and your descendants.
Upward:
- parent:: is your mother or father.
- ancestor:: are your parent, and your parent’s parent, recursively.
- ancestor-or-self:: are you and your ancestors.
Sideways (consider elements earlier in the document to be younger):
- previous-sibling:: are your younger siblings, in age order.
- following-sibling:: are your older siblings, in age order.
- previous:: are your younger siblings and their descendants, in age order.
- following:: are your older siblings and their descendants, in age order.
