tools
Около 5 мин чтения
CSS-селекторы и XPath-выражения — это два основных способа нахождения элементов на веб-странице. Они используются в автоматизированном тестировании (Selenium, Playwright, Cypress) и в DevTools для поиска элементов.
| Селектор | Описание | Пример |
|---|---|---|
* | Все элементы | * |
tag | По тегу | div, input, a |
.class | По классу | .btn-primary, .error-message |
#id | По ID | #login-form, #submit-btn |
[attr] | По атрибуту | [type="text"], [data-testid="login"] |
| Комбинатор | Описание | Пример |
|---|---|---|
A B | B внутри A (вложенный) | div .error |
A > B | B — прямой потомок A | ul > li |
A + B | B — соседний sibling A | label + input |
A ~ B | B — все sibling после A | h1 ~ p |
/* По позиции */
li:first-child /* Первый дочерний */
li:last-child /* Последний дочерний */
li:nth-child(2) /* Второй дочерний */
li:nth-child(odd) /* Нечётные */
li:nth-child(even) /* Чётные */
/* По состоянию */
input:focus /* В фокусе */
input:enabled /* Активный */
input:disabled /* Неактивный */
input:checked /* Отмеченный (checkbox/radio) */
a:visited /* Посещённая ссылка */
/* По содержимому */
button:contains("Login") /* Содержит текст (не стандартный, поддерживается не везде) */
/* Точное совпадение */
input[type="email"]
/* Начинается с */
a[href^="https://"]
/* Заканчивается на */
img[src$=".png"]
/* Содержит */
div[class*="modal"]
/* Слово в списке */
div[class~="active"]
/* С разделителем (lang) */
div[lang|="en"]
/* Несколько классов */
.form-control.is-invalid
/* Тег + класс + атрибут */
input.form-control[type="text"]
/* Вложенность */
#login-form input[type="email"]
| Выражение | Описание | Пример |
|---|---|---|
//tag | Все элементы tag | //div |
//tag[@attr='val'] | По атрибуту | //input[@type='email'] |
//tag[@class='cls'] | По классу | //button[@class='btn'] |
//*[@id='myid'] | По ID (любой тег) | //*[@id='login'] |
//tag[text()='txt'] | По тексту | //a[text()='Войти'] |
//tag[contains(text(),'txt')] | Содержит текст | //button[contains(text(),'Отправ')] |
//tag[contains(@attr,'val')] | Содержит в атрибуте | //div[contains(@class,'error')] |
| Ось | Описание | Пример |
|---|---|---|
// | Потомки (на любом уровне) | //div//span |
/ | Прямой потомок | //div/span |
.. | Родитель | //input/.. |
parent:: | Родитель (явная) | //input/parent::div |
child:: | Дочерний | //div/child::input |
ancestor:: | Предок | //span/ancestor::form |
descendant:: | Потомок | //form/descendant::input |
following-sibling:: | Следующие sibling | //label/following-sibling::input |
preceding-sibling:: | Предшествующие sibling | //input/preceding-sibling::label |
following:: | Все следующие элементы | //h1/following::p |
preceding:: | Все предшествующие | //h2/preceding::h1 |
-- По частичному совпадению текста
//button[contains(text(), 'Войти')]
//button[contains(translate(text(), 'АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ', 'абвгдеёжзийклмнопрстуфхцчшщъыьэюя'), 'войти')]
-- По частичному совпадению атрибута
//div[contains(@class, 'modal')]
//div[starts-with(@id, 'user-')]
//div[substring(@id, string-length(@id) - 3) = '-list']
-- Нумерация (позиция)
(//li[@class='item'])[3] -- Третий элемент
//li[@class='item'][last()] -- Последний
//li[@class='item'][position() > 2] -- Все после второго
-- Логические операторы
//input[@type='text' and @name='email']
//div[@class='error' or @class='warning']
//input[not(@disabled)]
-- Конкатенация атрибутов
//div[@data-testid and @data-id]
| Критерий | CSS | XPath |
|---|---|---|
| Скорость | Быстрее | Чуть медленнее |
| Читаемость | Проще для простых случаев | Яснее для сложных |
| Навигация вверх | Невозможно | .., parent::, ancestor:: |
| По тексту | Не нативно (:contains не стандарт) | text(), contains(text()) |
| По позиции | :nth-child(n) | [position()=n], [last()] |
| Рекомендация | Первый выбор для простых локаторов | Для сложных: текст, оси, условия |
// Проверить, находит ли элемент
document.querySelector('#login-btn') // CSS
document.evaluate("//button[@id='login']", document) // XPath
// Подсчитать количество
document.querySelectorAll('.error-message').length // CSS
data-testid / data-test / data-cy — стабильные тестовые атрибуты
[data-testid="submit-button"]
#login-form
input[name="email"]
[aria-label="Close"]
.login-form
//button[contains(text(), 'Войти')]
.css-1a2b3c, .jss123 — меняются с каждым билдом/html/body/div[3]/div[2]/form/input[1] — ломаются при любом изменении DOM//div[5] — ненадёжны/* Хорошо: data-testid */
[data-testid="login-form"] input[type="email"]
/* Хорошо: стабильный ID */
#registration-form .submit-btn
/* Хорошо: атрибут name */
input[name="user_password"]
/* Хорошо: по значимому тексту */
//button[contains(text(), 'Войти')]
/* Хорошо: по aria-label */
//*[@aria-label='Закрыть диалог']
/* Хорошо: комбинация атрибутов */
//div[@data-testid='user-card']//span[contains(@class, 'name')]
npx playwright codegen с записью локаторов