Какие селекторы использовать для поиска конкретных элементов на странице?

Что проверяют

Умеете ли вы писать локаторы, которые переживут следующий релиз вёрстки, а не просто находят элемент сегодня. Следом обычно просят сравнить CSS и XPath и спрашивают, что делать, когда у элемента нет ни id, ни стабильного класса.

Как отвечать

Выстройте порядок предпочтения от самого устойчивого к самому хрупкому:

• тестовые атрибуты: data-testid, data-qa, data-cy, которые разработчики добавляют специально для автотестов. В Playwright это getByTestId(), в Cypress cy.get('[data-cy=submit]'), в Selenium By.cssSelector("[data-testid='submit']");
• роль и доступное имя: Playwright рекомендует getByRole('button', { name: 'Войти' }), getByLabel(), getByPlaceholder(). Такой локатор ищет элемент так, как его видит пользователь, и заодно проверяет доступность;
• стабильный id: хорош, если фреймворк не генерирует его заново при каждой сборке;
• CSS-селекторы: по атрибутам, классам, вложенности, :nth-child(). Короткие и читаемые, но долго не умели подниматься к родителю: :has() появился во всех основных браузерах только к концу 2023 года;
• XPath: когда нужно найти элемент по тексту (//button[normalize-space()='Сохранить']), подняться к предку по оси ancestor:: или взять соседа через following-sibling::.

Разница в скорости между CSS и XPath в современных браузерах несущественна. Выбор определяется устойчивостью и читаемостью, а не миллисекундами.

Хорошая практика: хранить локаторы в Page Object, а не размазывать по тестам, и договориться с фронтендом, что тестовые атрибуты входят в критерии готовности задачи.

Где спотыкаются

Копируют абсолютный XPath из DevTools вида /html/body/div[3]/div[2]/form/button. Он ломается от любой новой обёртки в разметке.

Цепляются за сгенерированные классы вроде css-1x2y3z или хэши CSS Modules. Они меняются при каждой сборке, и тесты падают без единого изменения в функциональности.

Ищут по видимому тексту в мультиязычном интерфейсе или по индексу элемента в списке. При смене языка или порядка данных тест находит не тот элемент или не находит ничего.