# Пусть агент сам снимет демо: shot-scraper video в деле
Каноническая страница: https://plainews.ru/posts/shot-scraper-video-agent-demo-recording
Опубликовано: 2026-07-01T07:01:30.970Z

shot-scraper 1.10 добавил команду video — агент пишет storyboard.yml и записывает демо через Playwright. Пошаговый гайд с примером конфига.
30 июня вышел shot-scraper 1.10 с новой командой video. Теперь можно описать сценарий работы с веб-приложением в YAML-файле — и получить готовое видео без единого ручного клика. А если поручить написание этого YAML кодинг-агенту, цикл замыкается полностью.

## Зачем вообще записывать демо через агента

Демо — это не маркетинг, это инструмент проверки. Когда агент реализовал фичу, он же может записать, как она работает: вы смотрите видео и сразу видите, что сломано или выглядит странно. Саймон Уиллисон, автор shot-scraper, описывает этот паттерн как обязательный шаг в работе с кодинг-агентами — и video стал его последней итерацией в этом направлении.

Раньше Playwright записывал видео с лишними элементами отладочного интерфейса, а ещё давал белые кадры в начале, потому что запись стартовала до загрузки первого URL. Playwright 1.59 добавил новый механизм screencast с тонкой настройкой, но видео было зафиксировано на ширине 800px. Это исправили в playwright-python 1.61.0, вышедшем 29 июня, — и на следующий день появился shot-scraper 1.10.

## Установка и первый запуск

Установить shot-scraper можно через uvx — тогда не нужно заводить отдельное окружение:

``bash uvx shot-scraper video --help ``

Или через pip в существующем проекте:

``bash pip install shot-scraper==1.10 playwright install chromium ``

Базовый вызов команды:

``bash shot-scraper video storyboard.yml --mp4 ``

Флаг --mp4 конвертирует результат из .webm в .mp4. Если нужна авторизация через куки — передаёте JSON-файл:

``bash shot-scraper video storyboard.yml --auth auth.json --mp4 ``

## Структура storyboard.yml

Файл состоит из четырёх блоков: настройки вывода, запуск сервера, начальный URL и сами сцены.

```yaml output: /tmp/demo.webm

server:

- uv
- --directory
- /path/to/your/app
- run
- your-server-command

url: http://127.0.0.1:6419/ viewport:   width: 1280   height: 720 cursor: true

wait_for: 'button[data-action="some-button"]'

scenes:

do:

into: ".some-textarea"           text: |             строка 1             строка 2

```

- name: Первая сцена
- pause: 0.8
- click: 'button[data-action="some-button"]'
- wait_for: "#dialog[open]"
- pause: 0.5
- fill:
- click: ".save-button"
- wait_for: "text=Сохранено"
- pause: 1.0

Ключевые поля:

- server — список аргументов для запуска dev-сервера прямо из storyboard. shot-scraper сам его запустит и остановит.
- wait_for — CSS-селектор или текст, которого нужно дождаться перед следующим шагом.
- cursor: true — курсор будет виден на видео.
- pause — задержка в секундах для читаемости демо.

Если нужно перехватить буфер обмена (например, чтобы эмулировать вставку из clipboard), можно инжектировать JavaScript прямо в storyboard:

``yaml javascript: |   (() => {     let clipboardText = "";     Object.defineProperty(navigator, "clipboard", {       configurable: true,       get: () => ({         writeText: async (text) => { clipboardText = String(text); },         readText: async () => clipboardText,       }),     });   })(); ``

## Как поручить написание storyboard агенту

Именно здесь паттерн становится интересным. Уиллисон отдал написание YAML GPT-4.5 в Codex Desktop одним промптом:

> Посмотри на изменения в этой ветке. Перейди в ~/dev/shot-scraper и выполни uv run shot-scraper video --help. Теперь используй эту команду, чтобы записать демо новых фич из ветки — включая запуск dev-сервера и создание тестовой БД.

Агент прочитал --help, понял формат storyboard и написал полный YAML самостоятельно. Это работает, потому что вывод --help у shot-scraper достаточно подробный — по сути, встроенный SKILL.md прямо в инструмент. Тот же подход Уиллисон использовал в своих инструментах showboat и rodney.

Если вы работаете не с локальным чекаутом, а с опубликованным пакетом, промпт меняется на uvx shot-scraper video --help — результат тот же.

Весь код команды video, включая Pydantic-схему для валидации storyboard, написан агентом. Документацию тоже писал агент — и именно просмотр документации помог выловить избыточные и противоречивые части дизайна до релиза.

## Где ломается

**Порядок запуска сервера.** Если сервер стартует медленно, wait_for на первом экране может сработать до того, как приложение готово. Добавляйте pause перед первым wait_for или используйте более специфичный селектор, который появляется только после полной инициализации.

**Clipboard API в браузере.** В headless-режиме Playwright блокирует реальный буфер обмена. Если ваш сценарий использует copy/paste, нужен JavaScript-перехват, как в примере выше — без него readText() вернёт пустую строку.

**Версия Playwright.** Команда video требует playwright-python >= 1.61.0. Если у вас старее — видео будет зафиксировано на 800px по ширине или вообще не запишется корректно. Проверьте версию перед запуском:

``bash python -c "import playwright; print(playwright.__version__)" ``

**Белые кадры в начале.** В версиях Playwright до 1.59 это была системная проблема. В 1.61.0 она решена, но если вы видите белый старт — скорее всего, стоит обновить пакет.

## Что попробовать дальше

Добавьте запуск shot-scraper video в CI — тогда на каждый PR агент будет автоматически записывать демо изменений, и ревьюер сразу видит, что поменялось визуально. Репозиторий shot-scraper-demo на GitHub показывает, как это организовать через GitHub Actions с записью артефактов.

## Источники

- Simon Willison: Have your agent record video demos of its work with shot-scraper video