Визуальная регрессия (сравнение скриншотов)

Классический HTTP-монитор сообщает "сервер отвечает 200 OK", но не знает, что главный файл CSS не загрузился и сайт отображается сломанным. Визуальная проверка (по-английски visual regression) делает снимок страницы и сравнивает его с эталонным снимком (baseline) - она замечает визуальные изменения даже тогда, когда сервер говорит, что всё в порядке.

Визуальная проверка доступна в тарифах Pro и Business.

Как это работает

1. При первом включении визуальной проверки делается эталонный снимок (baseline) - образец, с которым потом происходит сравнение.
2. При каждой следующей проверке мы делаем новый снимок и сравниваем его с baseline пиксель за пикселем.
3. Если разница превышает заданный порог (по умолчанию 5 %), монитор помечается как изменённый, и вы получаете уведомление.
4. В деталях монитора вы видите baseline и текущий снимок рядом, а также выделенные места, где они различаются.

Когда это использовать

• После развёртывания новой версии сайта - автоматически замечает сломанные шрифты, CSS или вёрстку
• Для маркетинговых лендингов - чтобы вы знали, что тег GA и другие элементы не сдвинулись со своего места
• Для интернет-магазинов - проверка, что кнопка "Добавить в корзину" по-прежнему видна
• Для страниц статуса - чтобы вы знали, что ваша собственная страница статуса отображается правильно

Настройка

1. При создании монитора выберите тип Визуальная проверка - первый снимок автоматически сохраняется как baseline
2. В деталях монитора в разделе Визуальная проверка вы видите эталонный снимок, текущий снимок и выделенные различия
3. Лимит изменения вы задаёте ползунком Лимит визуального изменения (от 0,5 до 30 %, по умолчанию 5 %)
4. После каждого развёртывания новой версии обновите baseline кнопкой Сделать текущий эталоном

Осторожно с ложными тревогами

• Дата и время на странице - каждая проверка отображает их по-разному. После развёртывания такого изменения всегда обновляйте baseline.
• Реклама и баннеры - они меняются между снимками и часто вызывают ложную тревогу. Лучше всего визуальная проверка работает на страницах без рекламы.
• Анимации - первый и следующий снимок могут отличаться. Визуальная проверка ждёт 1,5 секунды после загрузки, чтобы анимация устоялась.