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

Класичний 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 секунди після завантаження, щоб анімація вгамувалася.