Главное
XPath — один из способов поиска элементов веб-страницы при тестировании. Название означает «XML Path Language», что отражает первичное предназначение: навигацию (поэтому «путь» в названии) по структуре и атрибутам XML-документа. В автоматизации тестирования (особенно в Selenium) XPath применяется для идентификации и проверки веб-элементов. Далее рассмотрим некоторые базовые концепции и синтаксис XPath, а также важнейшие оси.
В практическом рассмотрении XPath представляет собой последовательность шагов, которая описывает, как перейти к какому-то нужному узлу (или группе узлов) в XML-документе. Узлом может считаться элемент страницы, атрибут, текст, комментарий, или любая другая часть страницы, что очень полезно в автоматизации веба, а также и при тестировании мобильных приложений.
Абсолютный и относительный путь
Абсолютный 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’».
Значения всегда в одинарных кавычках, атрибуты — в квадратных скобках.
К примеру,
//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, для указания нескольких условий поиска и сочетания условий.
Например,
//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:
Axes::tagName[@attribute='value']
Далее на рисунках каждый прямоугольничек представляет собой id каждого элемента с div-тегом.
Parent
Выбирает верхний (родительский) узел (по отношению к текущему узлу). На рисунке:
Пример:
//div[@id='Y2']/parent::* — выбрать любой элемент, являющийся прямым родительским для div-элемента с id ‘Y2’, это B2 в нашем случае.
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
Вибирает все предковые элементы текущего узла, включая и сам текущий узел.
То есть то же самое что Ancestor, и плюс сам этот узел.
Child
Выбирает непосредственные элементы-потомки (но только первые дочерние) текущего узла:
Примеры:
//div[@id='B2']/child::* — выбрать все элементы, являющиеся прямыми потомками div-элемента с id B2.
//div[@id='B2']/child::div[@id='Y2'] — выбор всех div-элементов с id Y2, прямых потомков div-элемента с id B2.
Descendant
Выбрать всех потомков («во всех коленах») текущего узла.
Примеры:
Выражение //div[@id='B2']/descendant::* выбирает все элементы, которые являются потомками div-элемента с id B2.
//div[@id='B2']/descendant::div[@id='L1'] — выбрать div-элементы-потомки от div-элемента с id L1.
Following
Выбрать все элементы в документе, идущие после закрывающего тега текущего узла. Другими словами, ниже текущего элемента по дереву (на всех уровнях и слоях), но исключая собственных потомков (смотрим рисунок):
Пример:
//div[@id='B2']/following::* — выбрать все div-элементы ниже текущего элемента с id B2.
Following-sibling
Все элементы «братского», то есть того же уровня (= уровня этого узла).
Пример:
//div[@id='B2']/following-sibling::* выбирает все элементы на том же уровне что и div-элемент с id B2, и ниже его в дереве. Иначе говоря, «все братские ниже».
Preceding
Preceding аналогичен Following, но в обратную сторону, то есть все элементы выше указанного.
Пример:
//div[@id='B2']/preceding::* выбирает все элементы идущие перед div-элементом с id B2.
Preceding-sibling
Аналогично Preceding, но выбирает только на том же уровне и перед указанным, иными словами любой элемент с тем же родителем и на том же уровне.
Итак
Этого, может быть, достаточно для ознакомления с XPath. Если тема заинтересовала, и нужно продолжение, пишите в коменты здесь или в коменты в наш ТГ к любому посту (всё читаем).
***
