Что такое визуальное регрессионное тестирование? Скриншоты как проверки

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

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

Что даёт один прогон

Три картинки на проверку, и только третью кто-то вообще смотрит.

• Эталон - утверждённый скриншот, лежащий в репозитории рядом с кодом.
• Кандидат - то, что интерфейс рисует сейчас.
• Разница - оба изображения наложены друг на друга, изменившиеся пиксели отмечены.

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

Падения, которые не падения

Почти всё сложное здесь - это ложные срабатывания, и приходят они из короткого списка одних и тех же причин.

• Сглаживание и отрисовка шрифтов. Один и тот же текст на двух машинах или на двух графических драйверах - это не одни и те же пиксели.
• Всё, что показывает текущее время. Отметка времени, “3 дня назад”, год в копирайте.
• Динамические данные. Список, отсортированный по свежести, случайное имя из фикстуры, растущее число.
• Анимации и переходы. Скриншот, снятый посреди перехода, - это подбрасывание монеты.
• Поздно приезжающие шрифты. Скриншот снимается до того, как загрузился веб-шрифт, поэтому у эталона одна гарнитура, а у кандидата другая.
• Полосы прокрутки. Разные в разных операционных системах и часто попадающие внутрь снимаемой области.

У каждой причины есть скучное лекарство: остановить часы, подменить данные, отключить анимацию, дождаться шрифтов и снимать всё в одной управляемой среде, а не на той машине, которая случайно оказалась свободна. Последнее обычно решается через Docker, и если этот шаг пропустить, он и будет самым крупным источником шума.

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

Пороги - неверный первый порыв

Очевидный ответ на шум - разрешить расхождение какого-то процента пикселей. Это работает, и это же способ, которым проходит настоящий дефект.

Слабо

Падать, если расходится больше 0,5 % пикселей - а на большой странице этого с запасом хватает, чтобы кнопка сдвинулась, цена изменилась или подпись поля исчезла

Лучше

Нулевой допуск и поимённо исключённые области: часы в шапке, аватар, перерисовывающийся график. Каждое исключение - это решение, которое кто-то записал

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

Чего он вам сказать не может

Он не может сказать вам, что изменение неправильное. Он говорит, что изменение произошло, а какое из двух это - решает человек.

Это выглядит мелким различием, пока не посчитаешь ревью. Каждое намеренное визуальное изменение рождает очередь диффов, которые кто-то должен посмотреть и утвердить, и если этот человек не назван по имени, за месяц очередь превращается в штамповку. С этого момента набор запускается, он зелёный и он бесполезен.

Ещё он проверяет только то, на что вы его навели, в тех браузерах и размерах окна, о которых вы ему сказали. Именно этот пробел стоит назвать вслух, потому что в нём и живут интересные баги. Вёрстка, которая ломается только в Safari, или только на ширине 320 пикселей, или только когда браузер не может раскодировать видео, которое вы отдаёте, невидима для набора, снимающего Chrome в одном размере.

Когда он себя окупает

Ключ - повторяемость. Визуальное тестирование окупается там, где одни и те же компоненты отрисовываются много раз так, что человек их перепроверить на практике не в состоянии.

Дизайн-система или библиотека компонентов - самый сильный случай: одна правка отступа задевает всё, и набор скажет вам ровно то, что она задела. Маркетинговые страницы - второй, потому что они почти целиком вёрстка, а сломанная стоит денег напрямую. Всё, что отрисовывается на нескольких языках или в нескольких темах, - третий: одна и та же страница на семи языках даёт семь шансов переводу оказаться длиннее своего контейнера, а вручную все семь к каждому релизу никто не открывает.

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

Где он стоит рядом со всем остальным

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

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

Мы не продаём инструмент визуального тестирования, и это честная граница того, что мы можем рассказать вам о работе с таким инструментом. Мы видим другой конец - отчёт, который приходит потому, что у кого-то что-то отрисовалось неправильно, в браузере или на размере экрана, которые никто не снимал.

Начало, которое переживает встречу с реальностью

Пять страниц, один браузер, один размер окна, прогон в CI на каждый пул-реквест, в контейнере, чтобы пиксели были стабильными. Диффы утверждает один названный по имени человек. Исключённые области вместо процента.

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