Правила проверяют конкретные вещи: есть ли на странице кнопка, тот ли у неё текст. А сдвиг вёрстки, поменявшийся цвет или пропавший блок так не заметишь — зато это сразу видно, если сравнить картинки. На этом и построена визуальная проверка: снимок страницы сравнивается с образцом, который человек однажды одобрил.
Снимок шага
Шаг теста объявляет, что именно снимать. Видов картинки четыре:
- Часть экрана — то, что видно без прокрутки. Самый быстрый и предсказуемый вид.
- Вся страница целиком — включая то, что ниже сгиба. Полезно для длинных страниц.
- Компонент — крупный блок целиком: форма входа, таблица заказов, шапка.
- Элемент — одна деталь: кнопка, поле, значок.
Отдельно бывают снимки без картинки — текстовые. Они хранят структуру страницы, её стили, дерево доступности (то, что «видят» программы чтения с экрана) и последовательность адресов. Такие снимки ловят то, чего на картинке не видно: например, кнопка стоит на месте, а ссылка под ней ведёт уже на другой адрес.
Эталон
Снимок сравнивают не с предыдущим снимком, а с эталоном — образцом, который человек однажды одобрил. У эталона есть история версий: видно, кто и когда его одобрил и из какой сборки он взялся.
Первая сборка заводит эталоны сама — иначе сравнивать было бы не с чем. Поэтому первая сборка нового шага не считается провалом: она просто запоминает, как всё выглядит сейчас. Подробнее — в разделе Эталоны.
Сначала дешёвое, потом ИИ
Сравнение идёт по порядку — от самого дешёвого способа к самому дорогому:
- Отпечаток содержимого. По картинке считается короткий код, и если коды совпали, содержимое одинаковое. На этом сравнение заканчивается: пиксели не считаются, ИИ не вызывается, деньги не тратятся.
- Строгое сравнение. Коды не совпали — картинки сравниваются попиксельно, а текстовые снимки построчно.
- Разбор ИИ. Только на непонятных случаях подключается ИИ: он смотрит на отличие и пробует объяснить словами, что изменилось.
Последнее слово всё равно за человеком. ИИ может поднять важность отличия, но никогда не может её понизить и не может одобрить снимок вместо вас.
Отсюда и экономика: повторные прогоны почти ничего не стоят — одинаковые картинки отсеиваются по отпечатку, а платить приходится только за разбор новых непонятных случаев.
Что такое сборка
Запуск с визуальными проверками называется сборкой. У неё есть ветка (метка, к которой привязаны эталоны), режим и состояние ревью — что человек уже посмотрел, а что ещё ждёт решения. Режимов три: полная сборка прогоняет все объявленные проверки, умная — только затронутые, сравнительная — сравнивает две среды между собой. Подробнее — в разделе Проверка сборок.
Что видит человек
У сборки есть одна строка-вердикт. Смотреть на неё проще, чем разбирать список отличий:
- Визуально: успех — все отличия разобраны, ничего не осталось.
- Визуально: требуется ревью — есть отличия, которые должен посмотреть человек.
- Визуально: провал — что-то сломалось: проверки не сработали или сборка упала.
- Визуально: нет данных — снимков нет вообще. Обычно это значит, что шаги теста ещё не объявляют, что снимать.
Честные границы
Что визуальная проверка не делает — чтобы не было завышенных ожиданий:
- Не проверяет бизнес-логику. Правильность расчётов, остатков и прав доступа с картинки не видно.
- Отличие не объясняет причину. Оно показывает, что страница выглядит иначе, но не говорит, почему так вышло.
- Картинка и доступность ловят разное. Снимок видит цвета и вёрстку, но не заметит, что кнопка стала нечитаемой для программы чтения с экрана.
- Это доказательства, а не разрешение на выпуск. Решение о выпуске всё равно принимает человек.
- Первые две-три недели уходят на настройку. Пока не отмечены области, которые не сравниваются (даты, баннеры, случайные отзывы), будет много ложных отличий.
Дальше: как устроена вкладка «Проверка» — список сборок, режимы и состояния ревью — в разделе Проверка сборок.