Локаторы. Стратегии поиска веб-элементов05.03.2025 00:01

На примере списка:

  
Первый
  
Второй


  
Третий
  
Четвертый

CSS селектор li:nth-child(2) выберет «Второй» в первом

и «Четвертый» во втором
, так как nth-child работает в пределах каждого родителя
.


XPath //li[2] выберет только «Второй», потому что он считает элементы по всему документу, а не внутри отдельных

.

Еще одно преимущество XPath — возможность искать элементы по тексту, что часто привлекает новичков. Например, //button[text()='Отправить'] находит кнопку с нужным текстом, тогда как CSS такой возможности не дает. Однако привязка к тексту ненадежна: локализация, динамическое изменение контента или скрытые пробелы могут сделать такой селектор нестабильным. В общем и целом меньше всего рекомендую цепляться за текст.

Основные символы в XPath

№	Символ	Пример	Описание
1	//Поиск в любом месте документа. Ищет элементы в любом месте документа, на любом уровне вложенности.	//div	Найдет все элементы   на странице, независимо от их расположения.
2	/ Поиск от корня или переход на уровень ниже. - Есла прописан в начале (/html), начинает поиск от корневого элемента. - Когда стоит между элементами (div/span), переходит на уровень ниже.	/html/body/div	Найдет элемент  , который является прямым потомком , который, в свою очередь, является прямым потомком .
3	[] Квадратные скобки (предикаты). Используется для указания условий (фильтрации элементов).	//div[@class='container']	Найдет все элементы  , у которых атрибут class равен container.
4	@ Собачка (атрибуты). Указывает, что мы работаем с атрибутом элемента.	//input[@type='submit']	Найдет все элементы , у которых атрибут type равен submit.
5	* Звездочка (любой элемент). Заменяет любой тег.	//*[@class='button']	Найдет все элементы (независимо от тега), у которых атрибут class равен button.
6	. Точка (текущий элемент). Обозначает текущий элемент (контекст).	.//span	Найдет все элементы , которые являются потомками текущего элемента.
7	.. Двойная точка (родительский элемент). Переходит к родительскому элементу.	//input[@type='text']/…	Найдет родительский элемент для  с type=«text».
8	text() — Функция для работы с текстом. Позволяет искать элементы по тексту.	//button[text ()='Submit']	Найдет все элементы  с текстом «Submit».
9	contains() — Функция для частичного совпадения. Позволяет искать элементы, у которых атрибут или текст содержит указанную строку.	//div[contains (@class, 'menu')]	Найдет все элементы  , у которых атрибут class содержит menu.
10	and,  or — Логические операторы. Позволяют комбинировать условия.	//input@type='text' and @name='username']	Найдет все элементы , у которых type=«text» и name=«username».

Примеры XPath-селекторов

Формально, XPath использует выражения (expressions), а не селекторы, как CSS. Но в разговорной и технической среде «XPath‑селекторы» тоже встречается, особенно в контексте тестирования. Здесь простые селекторы тоже выбирают элементы на основе тега элемента, идентификатора и класса, но записываются по‑другому. В таблице приведены примеры XPath, включая основные символы и конструкции выражений. По-прежнему важно обращать внимание на знаки, символы и их роль в синтаксисе.


XPath-селектор

№	Конструкция	Пример	Описание
1	Выбор элемента по тегу	//div	Выберет все элементы на странице.
2	Выбор элемента по атрибуту	//input[@type='submit']	Выберет все элементы с атрибутом type=«submit».
3	Выбор элемента по тексту	//button[text ()='Submit']	Выберет все элементы с текстом «Submit».
4	Выбор элемента по частичному совпадению текста	//button[contains (text (), 'Sub')]	Выберет все элементы , текст которых содержит «Sub».
5	Выбор элемента по нескольким условиям	//input[@type='text' and @name='username']	Выберет все элементы , у которых type=«text» и name=«username».
6	Выбор элемента по позиции	(//div@class='item'])[2]	Выберет второй элемент с классом item.
7	Выбор элемента по вложенности	//div@class='container']//input	Выберет все элементы , которые находятся внутри с классом container.
8	Выбор элемента по дочернему элементу	//ul/li	Выберет все элементы , которые являются прямыми детьми .
9	Выбор элемента по атрибуту с частичным совпадением	//div[contains@class, 'menu')]	Выберет все элементы , у которых класс содержит menu.
10	Выбор элемента по родителю	//input@type='text']/parent: div	Выберет элемент , который является родителем с type=«text».

XPathпозволяет использовать абсолютные пути (начинающиеся с корня, например, /html/body/div), но они хрупкие и ломаются при изменении структуры страницы. Лучше использовать относительные пути (начинающиеся с //), которые ищут элементы в любом месте документа и более устойчивы к изменениям.

Еще один плюс, что поддерживает поиск по тегам, атрибутам, тексту и сложным условиям (например, contains() или and/or), но важно избегать излишне сложных запросов, так как они могут быть медленными и трудными для поддержки. В целом, XPath — это гибкий инструмент, но его стоит применять с умом. Не рекомендую злоупотреблять сложными XPath и если можно использовать CSS‑селектор, лучше использовать второй, так как они проще и быстрее.

Локаторы в Playwright и Cypress

Playwright поддерживает как CSS так и XPath напрямую, можно искать элементы по тексту, структуре и сложным правилам, и есть еще собственные нативные локаторы, например, getByRole (), getByText (), getByTestId (), которые упрощают работу с элементами, но под капотом они всё равно используют CSS и XPath.

await page.locator("//button[text()='Submit']").click();

Cypress поддерживает только CSS‑селекторы, но при необходимости можно подключить поддержку XPath через плагин.

//Установить пакет:
npm install -D cypress-xpath

 // Затем подключить в cypress/support/e2e.js:
import 'cypress-xpath';

Теперь можно писать:

cy.xpath("//button[text()='Submit']").click();

Cypress рекомендует по возможности использовать все-таки CSS‑селекторы и предлагает некоторые следующие решения для замены XPath:

cy.get('[data-test="submit-button"]') //лучший вариант (через data-* атрибут).
cy.contains('Submit') // если нужно найти элемент по тексту.
cy.get('button').contains('Submit') // если нужен  с текстом "Submit".

При выборе локаторов важно учитывать возможности фреймворка, чтобы тесты оставались стабильными и удобными в поддержке.

Оптимальная стратегия выбора локаторов

Выбор локаторов зависит от контекста, структуры приложения и требований к тестам. Автоматизация тестирования WEB требует учитывать динамическую природу UI, скорость тестов и устойчивость локаторов. Вот базовые рекомендации:

1. Приоритетность. Используйте самый простой, стабильный и быстрый вариант, комбинируя методы при необходимости. В приоритете тестовые атрибуты и id. Если их нет — class + уточняющий контекст. В крайнем случае — XPath по тексту, но с осторожностью: в многоязычных приложениях и в интерфейсах с переводом текст меняется и локатор ломается. В общем и целом меньше всего рекомендую цепляться за текст.

2. Уникальность и валидность локаторов. Локатор должен уникально идентифицировать элемент. При необходимости комбинируйте атрибуты, например:

   div.button[name='submit'];

   Проверяйте локаторы в DevTools перед использованием в коде. Убедитесь, что локаторы работают в разных браузерах и разрешениях экрана.

3. Стабильность локаторов. Избегайте слишком сложных XPath или CSS-селекторов, они могут сломаться при малейших изменениях в HTML.

4. Производительность. CSS-селекторы работают быстрее, чем XPath. Минимизируйте использование XPath.

5. Читабельность и поддержка. Локаторы должны быть понятны разработчикам и тестировщикам.

6. Адаптация к изменениям. Используйте относительные пути, чтобы локаторы были менее чувствительны к изменениям в HTML. Избегайте слишком длинных выражений и вложенные XPath.

7. Локаторы для динамических элементов. Для поиска элементов с динамическими классами используйте частичные совпадения:

   //xpath
   div[contains(@class, 'dynamic-class')];

   //css
   div[class*='dynamic-class'];

Надеюсь, это статья останется не просто справочником, каких много, а помогла вам понять тему. Для лучшего результата, рекомендую провести время за обучением в игровой форме на тренажере по ссылке https://flukeout.github.io

Успехов нам в автоматизации тестирования!