СправочникXPath и CSS селекторов
Шпаргалка по синтаксису XPath и CSS: базовые селекторы, поиск по тексту, сложные выражения, динамические элементы и лучшие практики для автоматизации тестирования.
Назад к тренажеруБыстрый справочниклокаторов
Самые популярные паттерны поиска элементов для UI автотестирования — всё в одном месте
Базовые XPath
основы поиска элементов
//divВсе div элементы на странице
//div[@id='myId']Div с конкретным ID
//div[@class='myClass']Div с точным классом
//*[@data-testid='element']По data-testid (рекомендуется)
Поиск по тексту
text functions
//button[text()='Нажми']Точное совпадение текста
//button[contains(text(), 'Нажми')]Частичное совпадение
//a[normalize-space()='Ссылка']Убирает лишние пробелы
//span[starts-with(text(), 'Начало')]Начинается с определенного текста
Сложные селекторы
advanced patterns
//div[contains(@class, 'btn')]Частичное совпадение класса
//input[@type='text'][1]Первый элемент определенного типа
//div[@id='parent']//buttonЛюбой потомок элемента
//input[@required and @type='email']Логические операторы (AND)
CSS селекторы
быстрые и простые
#myIdЭлемент по ID
.myClassЭлементы по классу
input[type="email"]По атрибуту
div > button:first-childПервый дочерний элемент
Динамические элементы
состояния и условия
//button[not(@disabled)]Активные кнопки (не заблокированы)
//div[contains(@class, 'visible')]Видимые элементы
//input[@value != '']Заполненные поля ввода
//div[starts-with(@id, 'dynamic-')]Элементы с динамическими ID
Лучшие практики
стабильные локаторы
[data-testid="user-button"]Специальные атрибуты для тестов
//button[contains(@aria-label, 'Save')]Accessibility атрибуты
//form[@name='login']//inputКонтекстный поиск в форме
//div[@role='dialog']Семантические роли
XPath vs CSS сравнение
Когда использовать каждый тип селекторов
Преимущества XPath
- Поиск по тексту элементов
- Навигация к родительским элементам
- Сложные логические условия
- Мощные оси для навигации
Преимущества CSS
- Значительно быстрее выполнение
- Простой и понятный синтаксис
- Лучше поддержка в браузерах
- Знаком большинству разработчиков
Практические советы
Стабильность
Используйте data-testid атрибуты вместо классов CSS для более стабильных тестов
Ожидания
Всегда используйте явные ожидания для динамических элементов
Читаемость
Делайте локаторы понятными и самодокументируемыми
Тестирование
Проверяйте локаторы в DevTools перед использованием в тестах
Производительность
CSS селекторы обычно быстрее XPath для простых случаев
Динамичность
Избегайте хрупких селекторов, зависящих от структуры DOM
Главное правило локаторов
Лучший локатор — тот, который не ломается при изменениях UI. Используйте data-testid атрибуты для критически важных элементов и комбинируйте CSS с XPath в зависимости от задачи.
Справочная информация
xpath · css · best practices · automation
Этот справочник содержит наиболее часто используемые паттерны XPath и CSS селекторов для автоматизации тестирования. Здесь собраны базовые выражения, поиск по тексту, сложные селекторы, CSS-синтаксис и советы по написанию стабильных локаторов.
Ключевое правило: используйте data-testid атрибуты для стабильных тестов. Они не зависят от CSS классов и структуры DOM, которые могут меняться при рефакторинге.
Готовы применить знания на практике? Перейдите к базовым элементам или продвинутым сценариям.