[Блог и руководства](https://openscreenshot.app/ru/blog/) · Разработчикам и агентам

# Скриншоты сайтов для CI и проверки релизов

Создавайте воспроизводимые артефакты PNG с OpenScreenShot CLI и узнайте, что скриншот может проверить в конвейере сборки.

Автор: [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

Используйте OpenScreenShot CLI в CI, чтобы сохранить PNG работающего приложения для проверки. Подготовьте браузер, совместимый с Chrome, запустите приложение, дождитесь его готовности, затем снимите фиксированный URL с фиксированным размером окна. Загрузите полученный файл через механизм артефактов вашего CI.

## Сделайте окружение воспроизводимым

Если проект уже использует pnpm, добавьте CLI как зависимость для разработки и закоммитьте изменения манифеста и lock-файла:

```
pnpm add -D -E openscreenshot
```

В CI устанавливайте зависимости с замороженным lock-файлом проекта. Пакет использует `puppeteer-core` и не скачивает браузер, поэтому раннеру также нужен Chrome или Chromium. Задайте `CHROME_PATH`, если исполняемый файл лежит не в поддерживаемом месте по умолчанию.

При сравнении снимков держите неизменными версию браузера, шрифты, размер окна, данные приложения и версию пакета. Другой шрифт или движок отрисовки браузера может изменить изображение, даже если код приложения не менялся.

## Снимайте после готовности приложения

Запустите сервер разработки или предпросмотра собственной командой проекта. Перед запуском этого примера дождитесь готовности маршрута и его зависимостей; порт 4321 — только пример и должен совпадать с вашим приложением:

```
mkdir -p artifacts
pnpm exec openscreenshot shot http://127.0.0.1:4321 --out artifacts/desktop.png --width 1440 --height 900
pnpm exec openscreenshot shot http://127.0.0.1:4321 --out artifacts/narrow.png --width 390 --height 844
```

Эти команды создают снимки окна. Добавьте `--full` для проверки всей страницы. Передайте шагу загрузки артефактов в CI папку `artifacts/`, чтобы проверяющий мог открыть файлы рядом с pull request или релизом.

CLI ждёт затишья сети при переходе, но это не гарантирует, что работа самого приложения завершена. Настраиваемого ожидания селектора или подставляемого скрипта подготовки у него нет. Если обычный маршрут содержит анимации, меняющееся содержимое или вход в аккаунт, используйте отдельный стабильный маршрут для проверки с детерминированными данными.

## Снятое изображение — это ещё не пройденный визуальный тест

Команда может успешно завершиться после скриншота ошибки сервера или экрана загрузки. Считайте PNG артефактом для проверки. Системе визуальной регрессии также нужны эталон, метод сравнения изображений, пороги и процесс принятия намеренных изменений; OpenScreenShot CLI этих частей не предоставляет.

Узкий скриншот полезен для проверки адаптивного макета, но это не эмуляция мобильного устройства. Точно так же скриншот не проверяет взаимодействие, доступность или поведение API. Оставьте соответствующие проверки приложения рядом с шагом съёмки.

## Устранение проблем в конвейере

**Chrome не найден:** убедитесь, что образ раннера содержит браузер и что `CHROME_PATH` указывает на его исполняемый файл.

**Переход не удался или превысил время ожидания:** убедитесь, что сервер доступен из процесса съёмки, использует ожидаемый порт и готов до начала съёмки. Таймаут перехода — 30 секунд.

**Появляется неожиданная страница входа:** CLI запускает новый сеанс браузера. Он не использует ваш локальный профиль и не предоставляет подстановку cookie.

**Выходного файла нет:** создайте папку для вывода, проверьте код завершения команды и путь к артефакту относительно рабочей папки CI.

Флаги и коды выхода описаны в [справочном руководстве по CLI](https://openscreenshot.app/ru/blog/screenshot-cli/). Если решать, какую страницу проверить следующей, должен человек или агент, используйте [процесс скриншотов через MCP](https://openscreenshot.app/ru/blog/screenshot-mcp-server/).

## Что дальше

[Прочитайте документацию](https://openscreenshot.app/ru/docs/), [посмотрите все руководства](https://openscreenshot.app/ru/blog/) или [получите помощь со снимком](https://openscreenshot.app/ru/support/).

---

Canonical page: https://openscreenshot.app/ru/blog/screenshots-for-ci/