В эпоху, когда генеративный искусственный интеллект перестал быть просто генератором текста и превратился в полноценного инженера-разработчика, перед нами встала новая, неочевидная проблема: как доказать, что код, написанный агентом, действительно работает? Традиционные юнит-тесты хороши для проверки логики, но они не передают пользовательский опыт. Они не показывают, как интерфейс реагирует на действия, как плавно открываются модальные окна или как выглядит импорт данных. Именно здесь на сцену выходит инструмент, о котором пишет Саймон Уиллисон (Simon Willison) — разработчик, известный своими глубокими инсайтами в области веб-технологий и AI-агентов.
В июне 2026 года в библиотеке shot-scraper (версия 1.10) появилась новая команда video. Её задача — принимать файл сценария в формате YAML, называемый storyboard, и с помощью движка Playwright записывать видео того, как AI-агент взаимодействует с веб-приложением. Это не просто запись экрана. Это структурированный, воспроизводимый и полностью автоматизированный процесс создания демонстрационных роликов, который может быть запущен без участия человека. В этой статье мы разберем, как это работает, почему это важно для практики разработки с AI и как настроить такой пайплайн у себя.
01Почему видео-демо важнее скриншотов?
Раньше Саймон уже писал о важности того, чтобы кодовые агенты (coding agents) производили демо своей работы. Скриншоты статичны. Они фиксируют один момент, но не показывают динамику. В современном веб-разработке, особенно при работе с сложными интерфейсами, критически важно видеть последовательность действий: клик, ожидание загрузки, появление диалогового окна, ввод данных, подтверждение.
Инструмент shot-scraper video решает эту проблему, предоставляя механизм, который позволяет AI-агенту «пройти» по сценарию и записать результат. Это создает мощный обратную связь: агент не просто пишет код, он должен убедиться, что его код ведет себя предсказуемо в браузере. Это шаг к более зрелой парадигме «agentic engineering», где AI не только генерирует код, но и верифицирует его поведение через визуальные тесты.
На иллюстрации выше показан пример карточки видео, созданной с помощью этого инструмента. Обратите внимание на то, как четко структурирован контент: заголовок, описание функции и сам видеофрагмент. Это стандарт, к которому стоит стремиться в документации проектов, использующих AI для разработки.
02Как устроен сценарий: YAML Storyboard
Сердце системы — это файл storyboard.yml. Это декларативный формат, который описывает, что должно произойти в браузере. Давайте разберем структуру на примере из блога Саймона, где демонстрируется функция импорта CSV/TSV/JSON данных в базу данных Datasette.
Сценарий состоит из нескольких ключевых блоков:
- output: Путь к файлу, куда будет записано видео (например,
/tmp/datasette-bulk-insert-demo.webm). - server: Описание локального сервера, который нужно запустить перед записью. В примере используется
uvдля запускаdatasetteс определенными параметрами (порт, секретный ключ, путь к БД). Это позволяет изолировать тестовую среду. - url: Стартовая страница, на которую переходит браузер.
- viewport: Размеры окна браузера (1280x720), что важно для консистентности демо.
- scenes: Массив сцен, каждая из которых содержит последовательность действий (
do).
Каждое действие в сцене — это команда для Playwright. Например, click для нажатия кнопки, fill для ввода текста, wait_for для ожидания появления элемента на странице. Это делает сценарий похожим на автотесты, но с целью создания видео, а не просто проверки PASS/FAIL.
Пример кода: Запуск записи
Чтобы запустить процесс, разработчику нужно выполнить простую команду в терминале. Важно отметить, что для работы с аутентифицированными сессиями используется файл --auth, содержащий cookie. Это критично для демо, которые требуют входа в систему.
shot-scraper video datasette-bulk-insert-storyboard.yml \
--auth datasette-demo-auth.json --mp4Эта команда запускает сервер, открывает браузер, выполняет сценарий из YAML-файла и сохраняет результат в MP4. Весь процесс может быть запущен в CI/CD пайплайне или локально, что делает его универсальным инструментом для демонстрации фич.
--mp4 для получения универсального формата, совместимого с большинством платформ. Если вам нужна прозрачность или меньший размер, можно использовать WebM, но убедитесь, что ваша целевая аудитория поддерживает этот формат.03Роль AI-агентов в создании сценариев
Самое интересное в этой истории — то, как был создан сам YAML-файл. Саймон отмечает, что сценарий был полностью сгенерирован AI-агентом (GPT-5.5 xhigh) в среде Codex Desktop. Это меняет парадигму: разработчик не пишет сложные селекторы CSS и логику ожидания вручную. Он дает агенту высокоуровневое описание задачи.
Промпт, который использовал Саймон, выглядел так:
Review the changes on this branch. cd to ~/dev/shot-scraper and run the command "uv run shot-scraper video --help". Now use that new video command to record a video demo of the new features from this branch, including running a "uv run datasette -p 6419 --root --secret 1 /tmp/demo.db" development server so you can record the video against a demo DB that you first create.
Агент проанализировал изменения в коде, изучил документацию команды shot-scraper video и сгенерировал корректный YAML-файл. Это демонстрирует мощную концепцию: вывод помощи команды (--help) становится машиночитаемым интерфейсом для AI. Это работает как встроенный файл SKILL.md, который объясняет агенту, как использовать инструмент.
04Технические нюансы и Playwright
За кулисами shot-scraper video использует библиотеку Playwright. Саймон делится опытом, который он накопил за несколько лет экспериментов с записью видео через Playwright. Раньше возникали проблемы с «хромом» (лишними элементами интерфейса отладки) и белыми кадрами в начале записи, так как запись начиналась до полной загрузки страницы.
Ключевым прорывом стала версия Playwright 1.59, добавившая новый механизм screencast, который дает более тонкий контроль над записью. Однако изначально этот механизм фиксировал ширину видео в 800 пикселей. Только после выхода playwright-python 1.61.0, где была исправлена эта проблема, Саймон смог завершить реализацию функции в shot-scraper.
Это подчеркивает важность актуальности зависимостей. Использование последних версий библиотек может открыть новые возможности и устранить старые баги, которые ранее казались непреодолимыми.
Валидация через Pydantic
Для обеспечения надежности формата YAML, агент использовал библиотеку Pydantic. Это позволило не только определить структуру данных, но и валидировать их. Валидация помогает избежать ошибок на этапе выполнения сценария, так как некорректные поля будут отловлены до того, как Playwright попытается их обработать. Это пример того, как типизация и валидация улучшают качество кода, даже в декларативных конфигурациях.
video в shot-scraper был написан AI-агентом. Саймон использовал сгенерированную документацию как основу для ревью, находя в ней противоречия и неточности, и затем диктовал агенту исправления. Это эффективный цикл «генерация-ревью-уточнение».05Что это значит на практике
Для разработчиков и команд, использующих AI-агентов для написания кода, shot-scraper video предлагает несколько конкретных преимуществ:
- Автоматизация документации: Вместо того чтобы вручную записывать видео для новых фич, вы можете описать сценарий в промпте или YAML-файле, и AI сгенерирует видео. Это ускоряет выпуск релизов и обновление документации.
- Визуальное тестирование: Видео-демо служат отличным дополнением к юнит-тестам. Они помогают выявить проблемы с UI/UX, которые не видны в логах тестов.
- Стандартизация демо: Использование YAML-сценариев гарантирует, что демо всегда выглядит одинаково, независимо от того, кто его запускает. Это важно для презентаций перед клиентами или стейкхолдерами.
- Снижение порога входа: Разработчикам не нужно быть экспертами в Playwright, чтобы создавать качественные видео. Достаточно уметь описывать задачи на естественном языке или использовать готовые шаблоны.
Однако есть и вызовы. Поддержка селекторов CSS может быть хрупкой: если интерфейс изменится, сценарий может перестать работать. Поэтому важно регулярно обновлять сценарии и использовать стабильные атрибуты (например, data-testid) для выбора элементов. Также стоит учитывать, что генерация видео требует ресурсов, поэтому запуск в CI должен быть оптимизирован.
В заключение, shot-scraper video — это не просто инструмент для записи экрана. Это пример того, как AI-агенты могут взять на себя рутинные задачи по созданию контента и тестирования, освобождая разработчиков для более творческих и стратегических задач. Интеграция таких инструментов в рабочий процесс становится все более важной для тех, кто хочет оставаться на передовой разработки программного обеспечения в эпоху генеративного ИИ.
Источник: Simon Willison ↗