Visual regression (сравнение screenshots)

5 мин чтения

Классический HTTP-монитор скажет "сервер отвечает 200", но не знает, что главный CSS-файл не загрузился и сайт отображается сломанным. Visual regression делает screenshot и сравнивает его с baseline - обнаруживает визуальные изменения, даже если сервер говорит OK.

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

1. При первом включении visual regression делается baseline screenshot (референс).
2. При каждом следующем check делается новый screenshot и сравнивается pixel-by-pixel с baseline.
3. Если разница превысит порог (default 5%), монитор помечается как changed и получаете оповещение.
4. В детали монитора видите baseline и текущий screenshot рядом + diff overlay.

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

• После deploys - автоматически обнаруживает сломанные fonts, CSS, layout
• Для маркетинговых landing pages - чтобы вы знали, что GA-тег не потерял позицию
• Для e-shops - проверка, что кнопка "Добавить в корзину" по-прежнему видна
• Для status pages - чтобы вы знали, что собственная status page рендерится

Настройка

1. В деталях монитора перейдите на вкладку Visual regression
2. Нажмите Enable - сделается baseline (10-30 секунд)
3. Опционально установите threshold (1-20%, default 5%)
4. После deploy обновите baseline через Refresh baseline

Внимание к false positives

• Дата / время на странице - каждый check их рендерит иначе. Либо игнорируйте, либо настройте CSS selector mask.
• Реклама / banners - ротируют между запусками. Mask домен рекламного провайдера.
• Анимации - первый frame vs следующий. Visual regression ждёт 2 с после load, чтобы анимация остановилась.
• Cookie banner - всегда auto-accepted, но иногда остаётся видимым. Добавьте CSS rule через user-config.