Visual regression (порівняння скріншотів)

5 хв читання

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

Як це працює

1. При першому увімкненні visual regression робиться baseline скріншот (референс).
2. При кожній наступній перевірці робиться новий скріншот і порівнюється pixel-by-pixel з baseline.
3. Якщо різниця перевищить поріг (типово 5%), монітор позначається як changed і отримуєте сповіщення.
4. У деталях монітора бачите baseline і поточний скріншот поруч + diff overlay.

Коли це використовувати

• Після deploy - автоматично виявить зламані шрифти, CSS, layout
• Для маркетингових landing pages - щоб ви знали, що GA tag не втратив позицію
• Для e-shop - перевірка, що кнопка "Додати до кошика" все ще видима
• Для status pages - щоб ви знали, що власна status page рендериться

Налаштування

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

Увага на хибні спрацювання

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