Skip to main content

Визуальное регрессионное тестирование с помощью скриншотов

Команды разработки используют Webshot, чтобы ловить ошибки, которые упускают юнит-тесты — поломки вёрстки, подмены шрифтов, пропавшие иконки, сломанные адаптивные состояния. Снимите staging, снимите production, сравните пару. Прикрепите дифф в комментарии к PR как доказательство, что ваше изменение безопасно (или как доказательство, что только что появился новый баг).

🖥️ Вся страница на компьютере (PNG, чёткие диффы) 📱 Вся страница на мобильном ⚙️ Использовать бесплатный API вместо этого

Все кнопки открывают форму захвата с предварительной настройкой. Вы можете изменить формат и область просмотра после загрузки страницы.

Почему для этого подходит Webshot

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

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

Одинаковая область просмотра каждый раз

Webshot снимает при точно одинаковом размере области просмотра, позиции прокрутки и времени ожидания загрузки шрифтов при каждом прогоне — результаты сравнения надёжны.

Удобство для API

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

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

Пропустите настройку puppeteer, установку шрифтов, флаги sandbox. У Webshot всё это уже работает на нашей инфраструктуре. Ваш CI просто делает HTTP-запрос.

Как делать снимки для визуального регрессионного тестирования

  1. Выберите страницу (или страницы), которые хотите отслеживать — главную, ключевые лендинги, оформление заказа, везде, где регрессия была бы болезненной.
  2. Снимите каждую в PNG + desktop_full + mobile_full, чтобы зафиксировать эталон текущего вида production.
  3. После следующего деплоя снимите те же URL снова. Сравните старые и новые с помощью `pixelmatch` или ImageMagick — всё, что > 1% изменённых пикселей, заслуживает проверки человеком.
  4. Встройте это в CI: хук перед деплоем снимает staging, хук после деплоя снимает production, и сборка проваливается, если дифф превышает ваш порог.

Часто задаваемые вопросы

Headless Chrome в CI означает установку Chromium, шрифтов, kernel-флагов sandbox, а также поддержание всего этого в актуальном состоянии. С Webshot вы полностью обходитесь без установки — ваш CI делает HTTP-запрос к нашему API и получает обратно PNG. Мы берём на себя обновления Chrome, кеширование шрифтов и защиту от SSRF.

Да, если вы используете PNG + одинаковую область просмотра + одинаковую стратегию ожидания. Webshot фиксирует размер области просмотра и ждёт 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