В этой статье хочу дать обзор xpath локаторов. Что это такое и как их писать.

Итак, начнем:

Вот определение из википедии:

XPath (XML Path Language) — язык запросов к элементам XML-документа.

Данный язык представляет собой возможность «гулять» по XML или по DOM как вниз, так и вверх. Это достаточно мощная штука, хотя и очень медленная (по отношению к CSS-локаторам или выбору по id). В xpath есть много функций, которые позволяют сделать красивые, читаемые и гибкие локаторы в вашем проекте. В данной статье я буду рассматривать на примере DOM-дерева.

Выглядит этот язык примерно вот так:

 

//div[@id="logo"]

Разберем структуру данного запроса:

// — означает, что мы будем искать элемент от корня до тех пор, как не встретим нужный нам div, при этом не важно сколько элементов будет до этого дива. Эти слеши можно так же вставлять в середину пути, тогда это будет означать, что между двумя элементами может находиться сколько угодно элементов, например,

 

//ul//div[@id="logo"]

 

означает, что мы где-то в ul ищем нужный нам div и не важно сколько элементов стоит между ними. Можно так же строить полный путь от корня вида

 

/html/body/div/ ....

, но данная конструкция очень загромождена и некрасива

div — означает какой нам конкретно элемент нужен (в данном случае div). Если же нам не важен какой элемент это будет, то можно вместо элемента поставить *, например,

 

//*[@id="logo"]

— в этом случае будут найдены элементы, у которых id = logo

[] — в квадратных скобках пишем дополнительные «фильтры» поиска нашего элемента. Здесь могут применяться различные xpath-функции, булева логика или простой выбор какого-то атрибута

@id=»logo» — означает, что у нашего элемента есть атрибут «id», который равен «logo». Здесь работает принцип полного совпадения. Если айди будет с пробелами или дополнительными словами — элемент в данном случае не будет найден. Атрибуты могут использоваться любые, которые есть у элемента, например, @class, @style, @href и т.д.

Также могут присутствовать . и .., что означает текущее место в дереве или уровень выше, например,

 

//div[@id="logo"]/../li

вначале найдет div с id = logo, а потом выберет элемент li уровня выше элемента div.

Можно указывать номер последовательности элемента, к примеру, у нас есть таблица и нам нужна 3я строка сверху, мы можем написать

 

//table//tr[3]

Перейдем к более сложным примерам и начнем с осей xpath.

Моя любимая картинка из интернета:

Как ее «читать»:

Вот у нас есть какой-то элемент, на котором мы сейчас стоим, например,

 

//div[@id="logo"]

На картинке этот элемент обозначается self. Если мы хотим указать на родительский элемент, то можем написать так:

 

//div[@id="logo"]/parent::*

Если нам нужно добраться до какого-то элемента, который находится на том же уровне, что и выбранный элемент, то можем написать так:

 

//div[@id="logo"]/following-sibling::div[@class="some-class"]

Не стоит использовать оси там, где можно построить более простые локаторы, но иногда они бывают очень полезны.

Давайте немного отвлечемся и подумаем, а что же такое хороший локатор? Я считаю, что это тот локатор, прочитав который, можно примерно сказать что это за элемент на странице. Так же «хорошесть» определяется устойчивостью к изменениям верстки. Посмотрите разницу между локаторами:

 

//*[@id="c_wrapper"]/div/div[3]/div[2]/div/table/tbody/tr[10]/td[2]/a

и

 

//table[@class="my_table"]//td/a[@href="mylink"]

Второй легче читается, легче редактируется при изменениях, а самое главное если таблица куда-то переедет по дереву, то первый локатор сломается, а второй нет

Еще немного возможностей:

Можно писать не одно условие, а несколько:

 

//*[@class="one" and @style="height: 48px;"]
//*[@class="one" and not contains(@style, "48px")]
//*[@class="one" or @style="height: 48px;"]

 

В языке xpath есть множество функций. Например, если у нас есть класс с длинным названием и нужно проверить, что название этого класса содержит какие-то слова, нужные нам, то можем использовать функцию contains:


//div[contains(@class, "name")]

 

Есть какой-то текст с пробелами, например, »           Login  «. Такой элемент можно найти с помощью функции, которая удалит пробелы:

 

//*[normalize-space(text())="Login"]

Есть таблица и нам нужна последняя строчка — функция last():

 

//table[@class="my_table"]//tr[last()]

И еще очень-очень много функций, которые можно посмотреть тут

Please follow and like us:
error

Оставить комментарий

avatar