让您的 agent 用 shot-scraper video 录制工作视频演示

shot-scraper video 是今天发布的 shot-scraper 1.10 中引入的一个新命令，它接受一个 storyboard.yml 文件，定义要在 Web 应用上执行的例程，并使用 Playwright 录制该例程的视频。我之前写过关于让编码 agent 生成其工作演示的重要性；这是我为实现这一目标所做的最新尝试。以下是一个使用 shot-scraper video 创建的示例视频，演示了一个仍在开发中的功能——在 Datasette 中通过粘贴 CSV、TSV 或 JSON 数据来创建新表的能力：

该视频是通过运行以下命令创建的： shot-scraper video datasette-bulk-insert-storyboard.yml
--auth datasette-demo-auth.json --mp4

（那个 --auth JSON 文件包含一个 cookie，如文档中所述。）

以下是 datasette-bulk-insert-storyboard.yml 文件的内容： output: /tmp/datasette-bulk-insert-demo.webm server:

• uv
• --directory
• /Users/simon/Dropbox/dev/datasette
• run
• datasette
• -p
• 6419
• --root
• --secret
• "1"
• /tmp/demo.db url: http://127.0.0.1:6419/demo/tasks viewport: width: 1280 height: 720 cursor: true wait_for: 'button[data-table-action="insert-row"]' javascript: | (() => { let clipboardText = ""; Object.defineProperty(navigator, "clipboard", { configurable: true, get: () => ({ writeText: async (text) => { clipboardText = String(text); }, readText: async () => clipboardText, }), }); })(); scenes:
• name: Bulk insert existing table rows do:
  • pause: 0.8
  • click: 'button[data-table-action="insert-row"]'
  • wait_for: "#row-edit-dialog[open]"
  • pause: 0.5
  • click: ".row-edit-bulk-insert"
  • wait_for: ".row-edit-bulk-textarea"
  • pause: 0.5
  • click: ".row-edit-copy-template"
  • wait_for: "text=Copied"
  • pause: 0.8
  • fill: into: ".row-edit-bulk-textarea" text: | title,owner,status,priority,notes Prepare release video,Ana,doing,1,Recorded with shot-scraper Check pasted CSV import,Ben,review,3,Previewed before inserting Share the branch demo,Chen,queued,2,Bulk insert creates three rows
  • pause: 0.8
  • click: ".row-edit-save"
  • wait_for: "text=Previewing 3 rows."
  • pause: 1.2
  • click: ".row-edit-save"
  • wait_for: "text=3 rows inserted."
  • pause: 1.0
  • click: ".row-edit-cancel"
  • wait_for: "text=Prepare release video"
  • pause: 1.0
• name: Create a table from pasted CSV open: http://127.0.0.1:6419/demo wait_for: 'details.actions-menu-links summary' do:
  • pause: 0.8
  • click: 'details.actions-menu-links summary'
  • click: 'button[data-database-action="create-table"]'
  • wait_for: "#table-create-dialog[open]"
  • pause: 0.5
  • fill: into: ".table-create-table-name" text: "launch_metrics"
  • click: ".table-create-from-data"
  • wait_for: ".table-create-data-textarea"
  • pause: 0.5
  • fill: into: ".table-create-data-textarea" text: | metric_id,name,score,recorded_on m001,Activation rate,87.5,2026-06-29 m002,Retention check,72.25,2026-06-30 m003,CSV import health,95,2026-07-01
  • pause: 0.8
  • click: ".table-create-save"
  • wait_for: "text=Previewing 3 rows."
  • pause: 1.2
  • click: ".table-create-save"
  • wait_for_url: "**/demo/launch_metrics"
  • wait_for: "text=Activation rate"
  • pause: 1.2

video 命令的文档中包含更简单的示例，但为了这篇博文的目的，我决定使用一个更全面的例子。这个演示 YAML storyboard 完全由运行在 Codex Desktop 中的 GPT-5.5 xhigh 构建，使用的 prompt 在我本地的 ~/dev/datasette 分支 checkout 中执行：

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.

既然我已经发布了这个功能，prompt 可以改为 "run uvx shot-scraper video --help"，效果相同。我非常喜欢这种模式：命令的 --help 输出提供了足够多的细节，让编码 agent 能够使用它——这有点像将 SKILL.md 文件直接捆绑在工具内部。我在 showboat 和 rodney 中也使用了相同的模式。

我是如何构建的

shot-scraper video 最初是一个实验性原型。shot-scraper 基于 Playwright 构建，它所需的关键功能是让 Playwright 能够录制浏览器会话的视频，并具有足够的控制力来创建所需的演示。我几年前首次尝试过这个功能，发现 Playwright 生成的视频包含额外的 chrome 元素，这些元素对调试测试失败很有用，但对于产品演示来说是不需要的。他们在一段时间前修复了这个问题，但仍然存在一些小的阻碍。特别是，视频开头会出现一些白色帧，因为录制机制在浏览器加载第一个 URL 之前就启动了。

Playwright 1.59 引入了一种新的 screencast 机制，提供了对视频录制更精细的控制。这几乎就是我需要的，但生成的视频宽度固定为 800px。我找到了一个修复该问题的已合并 PR，但它尚未发布。然后昨天，他们在 playwright-python 1.61.0 中发布了这个修复，我终于可以不受阻碍地完成这个功能的实现了！

代码本身全部由 Codex Desktop 中的 GPT-5.5 xhigh 编写。我还让它编写了文档，这为我审查设计提供了一个非常有用的框架——对该功能的大部分迭代都来自于审查文档，发现冗余、不一致或令人困惑的地方，然后请求（或指定）更好的设计。YAML 格式本身也主要由编码 agent 定义。我让它使用 Pydantic 来定义和验证格式，部分原因是为了让设计更容易审查。

这是一个很好的例子，说明如果没有编码 agent 的支持，我几乎肯定不会承担这样的功能。我最初在 2024 年 2 月提交了 issue，但在所有其他项目中很难找到必要的时间来解决这个问题。

标签：projects, python, yaml, ai, datasette, playwright, shot-scraper, generative-ai, llms, pydantic, coding-agents, agentic-engineering