Quick guide to creating XPath

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

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:

 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. 

  1. Search by text within an element:
  2. 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']
  3. Search for an item containing the specified text. //span[contains(text(),'Login')]
  4. 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"
  5. 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']
  6. It's case sensitive
    //*[contains(translate(., 'TEST', 'test'), 'test')]