Skip to main content

Візуальне регресійне тестування зі знімками екрана

Команди розробників використовують Webshot для виявлення помилок, які пропускають юніт-тести — збої верстки, неправильні резервні шрифти, відсутні іконки, зламані адаптивні стани. Зробіть знімок staging-середовища, знімок production, порівняйте їх. Додайте різницю в коментар до PR як доказ того, що ваші зміни безпечні (або що з'явилася нова помилка).

🖥️ Повна сторінка для ПК (PNG, чіткі відмінності) 📱 Повна сторінка для мобільних ⚙️ Використовувати безкоштовний API

Усі кнопки відкривають попередньо налаштовану форму знімка. Ви можете змінити формат і viewport після завантаження сторінки.

Чому Webshot для цього

Попіксельно точні знімки

Режим PNG зберігає чіткість тексту та країв — ідеально для інструментів попіксельного порівняння (`pixelmatch`, ImageMagick `compare`), де шум від стиснення JPG міг би створювати хибні спрацювання.

Однаковий viewport щоразу

Webshot робить знімки з точно однаковим viewport, позицією прокрутки та часом очікування завантаження шрифтів при кожному запуску — результати порівняння надійні.

Зручний API

Підключіть безкоштовний API Webshot до вашого CI: робіть знімки до та після розгортання, порівнюйте за допомогою `pixelmatch` і зупиняйте збірку, якщо кількість змінених пікселів перевищує поріг.

Без шаблонного коду для headless-Chrome

Пропустіть налаштування Puppeteer, встановлення шрифтів, прапори пісочниці. Все це вже працює на нашій інфраструктурі. Ваш CI просто робить HTTP-запит.

Як робити знімки для візуального регресійного тестування

  1. Виберіть сторінки, які ви хочете моніторити — головну, ключові лендінги, процес оформлення замовлення, будь-де, де регресія може зашкодити.
  2. Зробіть знімок кожної у форматі PNG + повна сторінка для ПК + повна сторінка для мобільних, щоб зафіксувати поточний вигляд вашого production.
  3. Після наступного розгортання зробіть знімки тих самих URL-адрес знову. Порівняйте старі та нові за допомогою `pixelmatch` або ImageMagick — будь-яка зміна > 1% пікселів заслуговує на перевірку людиною.
  4. Інтегруйте це у CI: хук перед розгортанням робить знімок staging-середовища, хук після розгортання — production, і збірка завершується невдачею, якщо різниця перевищує ваш поріг.

Часті запитання

Безголовий Chrome у CI означає встановлення Chromium, шрифтів, прапорів ядра для пісочниці, а також постійне оновлення всього цього. З Webshot ви повністю пропускаєте встановлення — ваш CI робить HTTP-запит до нашого API та отримує у відповідь PNG. Ми дбаємо про оновлення Chrome, кешування шрифтів та захист від SSRF.

Так, якщо ви використовуєте PNG + однаковий viewport + однакову стратегію очікування. Webshot фіксує розмір viewport і чекає на `fonts.ready` + `network-idle` + завершення будь-яких анімацій, оголошених через запит `prefers-reduced-motion`. Випадкові анімації (циклічні lottie, фони з `Date.now()`) будуть відрізнятися при кожному запуску; заморозьте їх у вашому тестовому середовищі.

Не за один виклик — ви робите знімок кожної URL-адреси окремо, а потім порівнюєте їх за допомогою окремої бібліотеки. Ми зосереджуємо API на створенні знімків; порівняння — це скрипт на 30 рядків. Приклади коду дивіться на сторінці `/developers`.

Так. Webshot чекає на `network-idle` (немає запитів протягом 500 мс) та `fonts.ready` перед створенням знімка, тому додатки на React, Vue, Svelte та Next.js повністю рендеряться до скріншота. Для сайтів, які ніколи не досягають стану `network-idle` (long polling, websockets), ви можете передати параметр `maxWait` через API.

Безкоштовна публічна форма має ліміт 5 знімків за 15 хвилин з однієї IP-адреси — цього замало для CI. Безкоштовний тарифний план API більш щедрий; дивіться `/developers`. Для великомасштабного регресійного тестування (50+ знімків за збірку) комерційний план API знімає обмеження за IP.

Сам Webshot лише робить знімки — ви забезпечуєте шар порівняння. Рішення у два рядки: `npx pixelmatch baseline.png new.png diff.png`. Або використовуйте керований сервіс візуального порівняння (Percy, Chromatic, BackstopJS) і передавайте їм PNG-файли від Webshot.

Готові робити знімки?

Безкоштовно, без реєстрації, без водяних знаків. Просто вставте URL.

📸 Відкрити форму знімка

Інші сценарії використання: Скріншоти Google Maps · Скріншоти WordPress · QA лендінгів · Скріншоти як юридичні докази · Скріншоти для соціальних мереж · Скріншоти для робочого процесу розробника · Переглянути всі →

Share: 𝕏 Twitter Facebook LinkedIn