Guide to searching for items using XPath
Примеры
//li[contains(translate(., 'NATIONAL', 'national'), 'national')] - with different transliteration
//li[contains(text() , '09.11.1982')] [1] - indexed
//li[contains(text() , 'substitution')]
//*[text()='TEXT']
//*[contains(text(), 'TEXT')]
//form[@id='f']//a[@class='test']
div[contains(text() , '90') and contains(text()[2], '%')] - if the text is "90" and "%"
There are 7 types of nodes in Xpath, we are only interested in 3: Element, Attribute, Text (which we see on a button, in a field or anywhere else)
Node | View in DevTools | Syntax | Examples |
Element - The main node to be searched for | //Element[ ] | //div[ ], //span[ ], //button[ ] | |
Attribute (or property, parameter) of an element and its value after equal sign | //Element[@Attribute = 'Value'] | //span[@class = 'ui-button-text'] But in general, the name of the attribute can be specified in the page code and can be anything you like | |
Text | //Element[text() = 'Text'] | //span[text() = 'Войти'] In this example we see that the text of the element contains spaces, we deal with them with the help of the normalize-space() function (There are examples of it further down the text). |
Next are the special characters:
Special Symbol | Description | Examples |
* | Corresponds to any element node Use if we don't know the name of the element or if we think it will change frequently. | //*[text() = 'Login'] |
@* | Corresponds to any attribute node Use if we don't know the attribute name of the element or if we think it will change frequently. | //span[@*='ui-button-text'] |
Xpath Functions
Only string functions are highlighted. (If you need something else, go here.
String functions
- string concat(string, string, …) — returns the concatenation of the arguments;
- boolean contains(string, string) — takes two string arguments as input and returns true if the first string contains the second and false otherwise;
- string normalize-space(string?) — removes start and end delimiter characters, normalizes all internal consecutive delimiters into a single space. If the argument is omitted, it is executed with the string value of the context node;
- boolean starts-with(string, string) — takes two string arguments as input and checks if the first string starts with the second one;
- string string(object?) — casts the object to a string type explicitly. If the argument is omitted, it applies to the set of the context node;
- number string-length(string?) — returns the length of the string argument passed to it. If the argument is omitted, it is applied to the context node;
- string substring(string, number, number?) — returns a substring of the string argument passed to it, starting at the position specified by the second argument and the length specified by the third argument. If no third argument is passed, the substring continues to the end of the string;
- string substring-after(string, string) — takes two string arguments as input, finds the second string in the first string and returns the substring that follows it;
- string substring-before(string, string) — takes two string arguments as input, finds the second string in the first and returns the substring that precedes it;
- string translate(string, string, string) — replaces the characters of its first string argument that are present in the second argument with the corresponding characters of the third argument.
Operators
You can also use the or and logical operators in xpath:
For example, we want to find a span element that has id equal to 'span1' and contains the text ''Login' or 'Login as'. We can do this as follows: //span[(text(), 'Login' or text(),'Loginn as') and @id='span1']
You can find the full list of operators here.
Element Relationship
Xpath has concepts such as:
- Parent(/parent:: or /ancestor::),
- Descendant (/child:: or /descendant::)
- A sister (sister element), which may be below or above (following-sibling or preceding-sibling)
Relationships with examples are described here.
Most often the search is done by the text contained in the element, simply because the text is the easiest to find, it is present in almost all elements and does not change that often.
- Search by text within an element:
- Normal search. //span[text()='Login']. Very often the text of the element may contain extra spaces, in this case we use the normalize-space() function. //span[normalize-space(text())='Login']
- Search for an item containing the specified text. //span[contains(text(),'Login')]
- Search for text content at the beginning or at the end. While starts-with() makes sense, ends-with has problems, as it doesn't work in xpath v1.0.
But there is a workaround: //div[substring(text(), string-length(text())- string-length('system') + 1) = 'system']. This is how we find an element whose text ends in "system" - Searching for an item (//a[@class='test']) within a particular element (in this case, the form //form[@id='f'])
//form[@id='f']//a[@class='test'] - It's case sensitive
//*[contains(translate(., 'TEST', 'test'), 'test')]