Урок 6. Почему автотест падает после редизайна?
Локаторы Playwright и DOM
Темы урока
Как устроен DOM, Locator API, getByRole / getByText / getByLabel / getByTestId, CSS и XPath, data-testid, filter / first / nth, Locator-тренажёр, Codegen как разведка
Видео урока
Конспект урока
Конспект — Урок 6: Почему автотест падает после редизайна?
Главное за урок
Редизайн кнопки валит автотесты не потому, что продукт сломался, а потому что тест зацепился за хрупкий селектор: класс, абсолютный XPath, старый data-testid. Локатор — способ сказать Playwright: «найди этот узел в DOM».
Практика на двух полигонах: Locator-тренажёр и живой booking-flow.spec.ts (карта локаторов сверху файла, разные типы якорей).
DOM
Браузер парсит HTML в DOM — дерево элементов с атрибутами. DevTools → Elements показывает то же дерево, которое видит Playwright. Локатор ищет узел в этом дереве.
За что зацепиться
Официальный приоритет Playwright — сначала то, что видит пользователь (role / label / text), потом testid, потом CSS / XPath.
| Якорь | Как в Playwright | Надёжность |
|---|---|---|
| role + имя | getByRole('button', { name: 'Войти' }) |
Высокая, как у пользователя |
| label / aria-label | getByLabel('Имя') |
Высокая на формах |
| placeholder | getByPlaceholder('email@...') |
Средняя: текст часто меняют |
| видимый текст | getByText('Забронировать') |
Средняя |
| data-testid | getByTestId('person-card') |
Высокая при редизайне, если контракт с разработкой живой |
id / [name] / [data-*] |
locator('#...'), locator('[name=email]') |
Зависит от стабильности атрибута |
| CSS-класс | locator('.btn-primary') |
Хрупко |
| Абсолютный XPath | xpath=/html/body/div[3]/... |
Очень хрупко |
data-testid не ломается от смены цвета кнопки — это про стабильность якоря. Это не отменяет правило «сначала user-facing локаторы», если они уникальны и стабильны.
CSS, XPath, filter и nth
CSS: короткий, нативный, хорошо с #id и [data-*]. Не умеет «пойти к родителю». Класс .btn — плохой якорь.
XPath: умеет вверх по дереву (/..), поиск по тексту, contains. Абсолютный путь от /html ломается от любой обёртки. Относительный XPath — осознанный инструмент, не запрет.
Когда элементов несколько:
| Метод | Смысл |
|---|---|
.filter({ hasText }) |
Оставить те, где есть этот текст |
.filter({ has: locator }) |
Оставить те, внутри которых есть другой локатор |
.first() / .last() / .nth(n) |
По порядку — хрупко, если список живой |
Locator-тренажёр и Codegen
Locator-тренажёр — миссии на учебных сценах PomidorQA: пишешь локатор, попадаешь в нужный узел, кликаешь. Как Git-тренажёр на Уроке 5: можно ошибаться без страха сломать общий репозиторий.
Codegen (npx playwright codegen) — быстрая разведка: что видит инструмент. Не копируй сгенерированные селекторы вслепую: часто вылезает хрупкий CSS. То же про ИИ/MCP: локатор из чата всё равно проверяешь в DevTools и прогоном.
В ДЗ новый файл не пишем: правим существующий booking-flow.spec.ts, выносим карту локаторов вверх, в действиях используем разные типы якорей.
Ключевые тезисы для теста
- Тест падает после редизайна чаще из‑за хрупкого селектора, а не из‑за бага продукта.
- DOM — дерево узлов; локатор указывает на узел.
- Сначала user-facing (role / label / text), затем testid, затем CSS / XPath.
- Класс и абсолютный XPath — типичные хрупкие якоря.
.nth()и.first()завязаны на порядок в списке — это хрупко.- Codegen — разведка, не готовый продакшен-локатор.
Полезные ссылки
- Locator-тренажёр: https://aiqa.su/base/locator-lab
- Playwright — Locators: https://playwright.dev/docs/locators
- Playwright — Best Practices: https://playwright.dev/docs/best-practices
- Playwright — Codegen: https://playwright.dev/docs/codegen
- MDN — DOM: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
- Репозиторий курса: https://github.com/lebed52/pomidorqa-course-tests
Домашнее задание
Индивидуальная проверка ДЗ — на Boosty
Конспект, видео и тест открыты всем. Текст задания и проверка работы — по подписке.
Индивидуальная проверка ДЗ на Boosty