XPath — быстрый гайд

Главное

XPath — один из способов поиска элементов веб-страницы при тестировании. Название означает «XML Path Language», что отражает первичное предназначение: навигацию (поэтому «путь» в названии) по структуре и атрибутам XML-документа. В автоматизации тестирования (особенно в Selenium) XPath применяется для идентификации и проверки веб-элементов. Далее рассмотрим некоторые базовые концепции и синтаксис XPath, а также важнейшие оси.

В практическом рассмотрении XPath представляет собой последовательность шагов, которая описывает, как перейти к какому-то нужному узлу (или группе узлов) в XML-документе. Узлом может считаться элемент страницы, атрибут, текст, комментарий, или любая другая часть страницы, что очень полезно в автоматизации веба, а также и при тестировании мобильных приложений.

Абсолютный и относительный путь

Absolute и Relative XPath
Абсолютный и относительный путь в XPath

Абсолютный xpath начинается с одного слэша ( / ) и указывает на полный путь из корневого узла (root) к целевому (target). Например, следующее выражение в XPath:

/html/body/div[1]/h1

— означает: «выбрать первый div-элемент под body-элементом под html-элементом, и далее выбрать его вложенный (или дочерний, child) h1-элемент».

Относительный путь начинается с дабл-слэша (двух //) и указывает на путь из любого узла (= нода) который отвечает критериям, к целевому узлу. Например,

//div[@id='main']

— означает «выбрать любой div-элемент, имеющий id-атрибут со значением ‘main’»

Синтаксис XPath

Запись выражений XPath зависит от того какой элемент нужно найти. Базовый синтаксис:

//tagname[@attribute='value']

Это значит «выбрать любой tagname-элемент, обладающий атрибутом со значением ‘value’».

XPath - синтаксис
Синтаксис Xpath

Значения всегда в одинарных кавычках, атрибуты — в квадратных скобках.

К примеру,

//input[@type='text']

— это значит «выбрать любой input-элемент, имеющий атрибут типа со значением ‘text’ ».

  • // — начать поиск с любого места на странице
  • input — HTML-тег, то есть любой тег в HTML (например p, button, span, div …)
  • type — атрибут, любой атрибут в HTML (id, class, link, src, alt …)
  • text — значение атрибута type.

Еще пример:

//a[@href='https://testengineer.ru']

Означает «выбрать любой элемент-якорь с href-атрибутом ‘testengineer.ru’».

Логические операторы

В XPath широко применяются логические операторы типа AND, OR и NOT, для указания нескольких условий поиска и сочетания условий.

Тэги и условия XPath
XPath — тэги и условия

Например,

  • //input[@type='text' AND @name='username']

Означает «выбрать любой input-элемент, имеющий одновременно атрибут типа со значением ‘text’ и атрибут имени со значением ‘username’».

  • //a[@href='https://testengineer.ru' OR @class='link']

Означает «выбрать любой якорный элемент, имеющий или href-атрибут со значением ’https://testengineer.ru’», или с атрибутом класса со значением ‘link’».

  • //div[NOT(@id)]

Означает «выбрать любой div-элемент, не имеющий id-атрибута».

Функции

Также в XPath применяются функции типа text(), contains(), starts-with() и ends-with() для проверки точного или частичного совпадения текста (текстовых значений). Примеры:

  • //h1[text()='Welcome'] — это выбрать любой h1-элемент, имеющий текстовое значение ‘Welcome’.
  • //p[contains(text(),'Hello')] — выбрать любой p-элемент, имеющий значение ‘Hello’.
  • //img[starts-with(@src,'logo')] — выбрать любой рисунок с src-атрибутом, который начинается со значения ‘logo
  • //span[ends-with(@id,'_title')] — выбрать любой span-элемент, который заканчивается значением ‘_title’.

Примечание. Следует учитывать, что функция end-with есть только в версии XPath 2.0, которую большинство современных браузеров не поддерживают. Если нужен такой поиск, для этого лучше использовать CSS-селектор вместо XPath. Например, вместо //span[ends-with(@id,'_title')] можно использовать CSS-селектор span[id$='_title'].

Оси XPath

Оси — это база языка Xpath. Для навигации по узлам применяются оси parent, ancestor, ancestor-or-self, child, descendant, following, following-sibling, preceding и preceding-sibling.

Оси XPath
Оси XPath

Синтаксис оси XPath:

Axes::tagName[@attribute='value']

Далее на рисунках каждый прямоугольничек представляет собой id каждого элемента с div-тегом.

Parent

Выбирает верхний (родительский) узел (по отношению к текущему узлу). На рисунке:

XPath - Parent
XPath — ось Parent

Пример:

//div[@id='Y2']/parent::* — выбрать любой элемент, являющийся прямым родительским для div-элемента с id ‘Y2’, это B2 в нашем случае.

Ancestor

Выбирает всех предков текущего узла. Иными словами, первый родительский и все старше, то есть «по направлению к корням дерева». На рисунке:

Ancestor
Ось Ancestor

Примеры:

//div[@id='Y2']/ancestor::div[@id='B2'] выбирает div-элемент с id ‘B2’, который является предком div-элемента с id ‘Y2’.

//div[@id='Y2']/ancestor::div[@id='A'] — выбрать div-элемент с id A, являющийся предком div-элемента с id ‘Y2’.

Ancestor-or-self

Вибирает все предковые элементы текущего узла, включая и сам текущий узел.

XPath - Ancestor-or-self
Ось ancestor-or-self

То есть то же самое что Ancestor, и плюс сам этот узел.

Child

Выбирает непосредственные элементы-потомки (но только первые дочерние) текущего узла:

Ось Child
Ось Child

Примеры:

//div[@id='B2']/child::* — выбрать все элементы, являющиеся прямыми потомками div-элемента с id B2.

//div[@id='B2']/child::div[@id='Y2'] — выбор всех div-элементов с id Y2, прямых потомков div-элемента с id B2.

Descendant

Выбрать всех потомков («во всех коленах») текущего узла.

XPath - Descendant
Ось descendant

Примеры:

Выражение //div[@id='B2']/descendant::* выбирает все элементы, которые являются потомками div-элемента с id B2.

//div[@id='B2']/descendant::div[@id='L1'] — выбрать div-элементы-потомки от div-элемента с id L1.

Following

Выбрать все элементы в документе, идущие после закрывающего тега текущего узла. Другими словами, ниже текущего элемента по дереву (на всех уровнях и слоях), но исключая собственных потомков (смотрим рисунок):

xpath-following
Ось following

Пример:

//div[@id='B2']/following::* — выбрать все div-элементы ниже текущего элемента с id B2.

Following-sibling

Все элементы «братского», то есть того же уровня (= уровня этого узла).

xpath-following-sibling
Ось following-sibling

Пример:

//div[@id='B2']/following-sibling::* выбирает все элементы на том же уровне что и div-элемент с id B2, и ниже его в дереве. Иначе говоря, «все братские ниже».

Preceding

xpath-preceding
Ось xpath-preceding

Preceding аналогичен Following, но в обратную сторону, то есть все элементы выше указанного.

Пример:

//div[@id='B2']/preceding::* выбирает все элементы идущие перед div-элементом с id B2.

Preceding-sibling

Ось preceding-sibling
Ось preceding-sibling

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

Итак

Этого, может быть, достаточно для ознакомления с XPath. Если тема заинтересовала, и нужно продолжение, пишите в коменты здесь или в коменты в наш ТГ к любому посту (всё читаем).

Логотип XPath

***

Источники: 1,2,3

Какой была ваша первая зарплата в QA и как вы искали первую работу?

Мега обсуждение в нашем телеграм-канале о поиске первой работы. Обмен опытом и мнения.

2 КОММЕНТАРИИ

Подписаться
Уведомить о
guest

2 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
macaroni
macaroni
1 год назад

Лучшая визуализация осей, что я видел. Большое спасибо!

ROMA BULAVA
ROMA BULAVA
30 дней назад

я аж всю страницу целиком сохранил на компе

Мы в Telegram

Наш официальный канал
Полезные материалы и тесты
Готовимся к собеседованию
Project- и Product-менеджмент

? Популярное

? Telegram-обсуждения

Наши подписчики обсуждают, как искали первую работу в QA. Некоторые ищут ее прямо сейчас.
Наши подписчики рассказывают о том, как не бояться задавать тупые вопросы и чувствовать себя уверенно в новой команде.
Обсуждаем, куда лучше податься - в менеджмент или по технической ветке?
Говорим о конфликтных ситуациях в команде и о том, как их избежать
$1100*
медианная зарплата в QA в июне 2023

*по результатам опроса QA-инженеров в нашем телеграм-канале

Собеседование

19%*
IT-специалистов переехало или приняло решение о переезде из России по состоянию на конец марта 2022

*по результатам опроса в нашем телеграм-канале

live

Обсуждают сейчас