XPath Locators Cheat Sheet
Use this cheat sheet to build a strategy for locating elements known as XPath
- 1 What Is XPath?
- 2 The Basics of XPath
-
-
-
- 2.1 The difference between absolute and relative XPath
- 2.2 Basic XPath syntax
-
-
- 3 XPath functions
-
-
-
- 3.1 XPath operators
- 3.2 XPath axes
-
-
- 4 XPath and Selenium
- 5 参考资料
When working in web development and web testing, it can be necessary to traverse an HTML document and identify specific elements on a web page. One case in which this is particularly useful is in the development of automated UI tests. Oftentimes, automating web application testing is dependent upon programmatically locating elements on a web page and leveraging these elements to perform specific actions.
1 What Is XPath?
XML Path Language, known as XPath, is a language that enables the pinpointed querying of elements in an XML document. As HTML documents are similar in nature to XML documents (being composed of tags and attributes and organized in a hierarchical, tree-like manner), XPath serves as a flexible tool for traversing the DOM of these documents as well.
2 The Basics of XPath
2.1 The difference between absolute and relative XPath
<html>
<body>
<form>
<div>
<input id=“other-field”>input>
div>
<div>
<input id=“search-field”>input>
div>
…
form>
body>
html>
Considering the above sample HTML, an example of an absolute XPath for the input element with an id value of “search-field” would be as follows:
/html/body/form/div[2]/input
div[2] representing the second div. Therefore, if using XPath to locate this element as part of a test script, the expression would need to be updated following this unrelated HTML change in order for the test case to succeed again. However, an alternative way to avoid this scenario would be to use a relative XPath expression for the input element:
//input[@id=‘search-field’]
如果有id的话，谁还用XPath呢？
Here, the expression begins with two forward slashes to indicate that the path need not begin at the root of the document. The expression queries for an input element with an id attribute value of “search-field.” This expression will succeed in locating the input element as long as the input element itself is not modified in a way that invalidates the expression.
2.2 Basic XPath syntax
| / | 绝对路径 |
|---|---|
| // | 相对路径 |
| Element type | （tag name) being selected as part of the path expression (i.e. div, select, input, etc.) |
| Predicate | Encapsulated by square brackets[] and used to identify an element based on provided conditions. One manner in which a predicate can be used is to impose a condition on a particular attribute value. In this case, the attribute name is preceded by the @ character, as shown here: [@id=‘search-field’] |
基本样子：
/ Element_1 [Predicate] // Element_2 [Predicate]
3 XPath functions
contains() – The contains function in XPath works similarly to that in other languages. For instance, the contains function can be used to locate an element when an attribute on the element has a value that contains a particular substring:
//div[contains(@class,‘sample-class’)] The above expression can be used to locate div elements with a class attribute that includes the substring “sample-class” anywhere in the HTML document.
3.1 XPath operators
The following are examples of XPath operators:
and – The and operator can be used to locate elements based on the evaluation of multiple conditions. See the following expression:
//div[@id=‘container’ and @name=‘container-name’]
In this example, the div element will only be returned if both the id and name attributes match the provided values.
or – Like the and operator, the or operator in XPath can also be used to locate elements based on the evaluation of multiple conditions. Consider the following example:
//div[@id=‘container’ or @id=‘other-container’]
Here, the div element will be returned if the id attribute value is either “container” or “other-container.”
3.2 XPath axes
The following are examples of XPath axes. These allow us to select elements based on their relationship to the currently selected element or elements given the XPath expression when the axis is invoked.
parent – In the case of parent, this means selecting the parent elements of the context elements (those currently selected by the XPath expression). Consider the following:
//div[@id=‘container’]/parent::*
This expression selects the parent element to the div with the id attribute value “container” (regardless of the tag name).
child – The child axis is used to locate all children of the context elements:
//div[@id=‘container’]/child::*
This expression selects the child elements for the div with the id attribute value “container” (regardless of the tag name).
Let’s take a look at one more example:
//div[@id=‘container’]/child::input
This expression selects all input elements that are children of the div with the id attribute value “container.”
4 XPath and Selenium
Selenium is a highly utilized open-source framework for automating browser actions in an effort to provide thorough testing of web applications. XPath can be used in conjunction with Selenium to enable efficient element location in web application test scripts.
As discussed above, XPath enables you to locate elements on a web page. When used with Selenium, XPath can assist in locating elements that can then be leveraged to perform actions to test functionality. This could mean testing search functionality by using XPath expressions to locate the search field and submit button. Or, it could mean testing new user registration by using XPath expressions to locate the required form fields in which a new user must enter data, then using another XPath expression to locate the submit button to execute the registration process.
In this way, XPath helps traverse HTML documents and locate the elements necessary to automate tests for critical web application functionality.
5 参考资料
- Locating Elements
- SauceLabs
- XPath