intermediate

Avoiding brittle selectors

Предпочитайте user-facing roles, labels и explicit test contracts вместо implementation selectors, которые меняются при harmless refactors.

Хрупкие селекторы ломаются при безобидном рефакторинге: хеши CSS modules, nth-child, глубокие DOM-пути, runtime ID. Предпочитайте доступные имена — role, label, placeholder — и `data-testid` как явный контракт dev/QA, когда семантики мало.

В Playwright `getByRole('button', { name: 'Save' })` переживает смену разметки при том же UX.

На интервью: перепишите хрупкий XPath/CSS в запросы Testing Library и разницу в поддержке.

Типовые ошибки: test id на каждом div; текст, меняющийся с i18n; привязка к внутренностям виджетов.

Компромисс — чуть больше работы над a11y upfront против резкого снижения churn E2E.

Чеклист:

Приоритет: role, label, text, затем test id.
test id только для несемантических целей.
Без селекторов, завязанных на layout.