Раздел 43 · Автотестирование с нуля

Визуальная регрессия и снапшоты разметки

middle~70 мин

без входаВойди, чтобы отмечать прогресс, вести заметки и решать задачи в редакторе. войти

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

Переверстала схему зала под телефоны. Все тесты зелёные: 1120 кнопок мест на месте, подписи верные, «Ряд 14, место Б» нажимается. А Савва прислал фото с телефона: правый край зала обрезан, места после «Ш» не видно вообще. Как тест мог это пропустить, если разметка та же? Предлагаю снимать скриншот каждой страницы на каждом PR, тогда такое не проскочит.

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

Скриншот каждой страницы мы будем обновлять каждый день и через неделю перестанем смотреть. Найди, где картинка правда важна, и сними там.

В уроке 77 ты проверял корзину так, как её видит пользователь: по ролям, подписям и тексту. Такие тесты не знают про CSS, и это их сила: Ника может переписать стили, и ни один тест не покраснеет. Но у силы есть обратная сторона. Если сломались сами стили, такие тесты тоже промолчат. Сегодня научимся ловить то, что видно глазом и не видно в дереве элементов.

Сверка на просвет

В типографии старой газеты корректор проверял полосу так: клал свежий оттиск на вчерашний утверждённый макет и смотрел на просвет, на стекле с лампой снизу. Где листы совпадали, просвечивал один чёткий текст. Где строка уехала на полмиллиметра, буквы двоились, и это было видно с метра.

Читать каждое слово корректору не нужно: слова проверяли до него. Он ловит другое: сдвиг, обрезанную колонку, картинку не на своём месте. А дату номера, которая меняется каждый день, он перед сверкой заклеивал полоской бумаги, иначе двоилась бы она одна, и на каждой полосе.

Визуальный тест работает так же. Это визуальная регрессия: свежий скриншот кладётся на утверждённый эталон, и тест считает пиксели, которые не совпали.

урок из курса

Урок из курса «Автотестирование с нуля». Курс покупается один раз и остаётся навсегда: 500 ₽.

Оплата пока не подключена: премиум и курсы открываются промокодом.