Локаторы: роль, подпись, текст и data-testid

Ника · фронтенд, #qa-antrakt

Переверстала страницу события под телефоны: обёртки, CSS-модули, корзина теперь выше схемы зала, «Убрать» стала крестиком. Поведение не трогала, руками всё работает. А в tests_final_v2/ui/ у Глеба красные все восемь тестов. Мне откатывать?

Вера Ланская · лид QA, #qa-antrakt

Не откатывай. Тест, который краснеет от смены класса, проверяет вёрстку, а не продукт. Посмотри заодно, что эти тесты пропускают, когда сломано по-настоящему.

В уроке 70 ты разобрал страницу события по косточкам: дерево, теги, роли, доступные имена и состояния. Сегодня научимся описывать элементы так, чтобы тест находил их и сейчас, и после следующей переделки Ники. Восемь тестов Глеба будут материалом урока, а заодно задачей.

Как объяснить курьеру, куда нести

Курьер везёт билеты Ане. Можно описать дорогу: «третий подъезд, второй этаж, вторая дверь слева от лифта». Работает, пока дом прежний. Управляющая компания пристроит подъезд или переставит лифт, и курьер позвонит в чужую дверь. Хуже того, он не узнает, что ошибся: дверь же вторая слева.

Можно назвать адрес: «квартира 42». Номер не зависит от того, где лифт, но его надо знать заранее и договориться, что он не поменяется.

А можно назвать Аню: «Анна Смирнова, на двери табличка». Это ровно то, что видит любой гость дома. Если таблички нет, курьер не найдёт квартиру, и это честный сигнал: гость без подсказки тоже бы не нашёл.

У тестов те же три способа. Описание дороги это путь в разметке от корня страницы. Номер квартиры это data-testid. Табличка на двери это роль и имя элемента, которые видит пользователь и слышит программа чтения с экрана. Описание, по которому тест находит элемент, называется локатором, и выбор между тремя способами решает, переживёт ли тест переверстку.