User Guide to write XPath locators for Mobile apps
What is XPath:
XPath is nothing but XML Path or an expression language that is used to query or transform XML documents.
Different ways of writing XPath:
- XPath using attribute
- To identify the element with entire attribute value :
//tagName[@attributeName=”attributeValue”] - To identify the element with partial attribute value :
//tagName[contains(@attributeName,”attributeValue”)] - To identify the elements by traversing through different levels (top-down) in the App Source:
//tagName[@attributeName=”attributeValue”]//tagName[@attributeName=”attributeValue”]
If the element that we want to locate has attributes such as id, name, label, text etc which contain reliable values that are not dynamic or change frequently and identify the element uniquely, we can construct a XPath using attribute as follows:
Double Slash “//” – Double slash is used to create XPath with relative path i.e. the XPath would be created to start selection from anywhere within the document.
In Appium Inspector, all the attributes listed under the Selected Element can be used as attribute value pair to construct the Xpath using the above syntax.
Let us consider an example for constructing an Xpath using any attribute for an element:
Scenario: In the HICC Android App, let us write the locator for the Age input field.
Here from the available list under the Selected Element section, resource-id attribute appears to be more reliable as its value has the word age which identifies the Age field uniquely as shown in the above screenshot. Hence we can construct the Xpath using the resource-id attribute and its entire value.
Example Xpath:
//android.widget.EditText[@resource-id="com.eureqa.eureqaprod:id/age"]
- XPath using axes
- There are different types of axes which can be used for constructing a Xpath when there are no unique attributes for identifying the required element.
- parent tag
//tagName[@attributeName=”attributeValue”]//parent::tagName - following or preceding tag
//tagName[@attributeName=”attributeValue”]//following::tagName
//tagName[@attributeName=”attributeValue”]//preceding::tagName - following-sibling or preceding-sibling tag
//tagName[@attributeName=”attributeValue”]//following-sibling::tagName
//tagName[@attributeName=”attributeValue”]//preceding-sibling::tagName - ancestor tag
//tagName[@attributeName=”attributeValue”]//ancestor::tagName
These axes are used to traverse from bottom to top elements or the elements that are parallel at the same level. Different types of axes that can be used in the Xpath are as follows:
Identifying Parent, Ancestor and Sibling axes for an element:
Scenario: In the HICC Android App, let us identify the parent, ancestor and sibling tags for the federal poverty details element shown under the estimated income value.
In the above screenshot, the income tag is right above the federal poverty details element at the same level hence it can be considered as a sibling
.
Similarly, the tag which is above the income tag is the parent
tag for both income and federal poverty details tag.
All the above mentioned tags are under the Layout tag hence this is the ancestor
Tag.
Let us now consider an example for constructing an xpath using following-sibling axes:
Scenario 1: In the HICC Android App, after calculating the Insurance premium, let us verify that the income value corresponds to the label Estimated Income in the Results page.
Ideally, if we are verifying only the income value, we can directly construct the Xpath using the income tag i.e, //android.widget.TextView[@text=”$20,000”]
Here in this scenario, we are verifying that the income value corresponds to the Estimated Income label in the Results page hence we need to construct our XPath from the Estimated Income label tag.
Since we cannot traverse to the income value tag directly as there is a tag in between which is sibling to the Estimated Income label tag as shown in the above screenshot, we first traverse to this tag using the following-sibling axes and then traverse to the income tag.
Example Xpath:
//android.widget.TextView[contains(@text,"Estimated Income")]//following-sibling::android.widget.RelativeLayout//android.widget.TextView[@text="$20,000"]
Scenario 2: In HICC iOS App, let us inspect the Age Input field
Here from the available list under the Selected Element section, there are no reliable attributes that uniquely identify the Age input field as shown in the above screenshot. Hence we can construct the Xpath from the label ‘Age of the oldest person on insurance policy’ highlighted in yellow above the Age input field and traverse to the Age tag using the following-sibling axes.
Example Xpath:
//XCUIElementTypeStaticText[@name="Age of the oldest person on insurance policy:"]//following-sibling::XCUIElementTypeTextField