Пусть агент сам снимет демо: shot-scraper video в деле

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