2026年6月30日，shot-scraper 1.10版本发布，引入了一个新命令 shot-scraper video。该命令接受一个 storyboard.yml 文件，定义需要在Web应用上执行的一系列操作，并利用Playwright录制整个过程的视频。之前曾讨论过编码袋里生成演示的重要性——这是让它们做到这一点的最新尝试。

下面这个示例视频就是通过 shot-scraper video 生成的，展示了一个仍在开发中的功能：将粘贴的CSV、TSV或JSON数据直接创建为Datasette新表。

该视频通过运行以下命令生成：

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"]'
ja vascript: |
  (() => {
    let clipboardText = "";
    Object.defineProperty(na vigator, "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-sa ve"
  - wait_for: "text=Previewing 3 rows."
  - pause: 1.2
  - click: ".row-edit-sa ve"
  - 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-sa ve"
  - wait_for: "text=Previewing 3 rows."
  - pause: 1.2
  - click: ".table-create-sa ve"
  - wait_for_url: "**/demo/launch_metrics"
  - wait_for: "text=Activation rate"
  - pause: 1.2

视频命令的文档中还包含更简单的示例，不过这里选择了一个更全面的用例来展示。这个演示YAML故事板完全由在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中的命令可以改为 uvx shot-scraper video --help，也能达到相同效果。这个模式很有价值——一个命令的 --help 输出提供足够详细的信息，让编码袋里能够直接使用它，这相当于把 SKILL.md 文件直接嵌入到了工具中。同样的模式也被应用于 showboat 和 rodney。

实现过程

shot-scraper video 最初只是一个实验性原型。shot-scraper 基于Playwright构建，其核心需求是让Playwright能够录制浏览器会话视频，并且具备足够的控制力来生成理想的演示。几年前曾尝试过这个功能，但发现Playwright生成的视频中包含了额外的UI元素，这些元素对于调试测试失败很有用，但对于产品演示来说却是不必要的。

之后Playwright修复了这个问题，但仍存在一些小障碍。例如，视频开头会出现几帧白色画面，因为录制机制在浏览器加载第一个URL之前就已经开始。Playwright 1.59新增了一种更精细的屏幕录制机制，提供了对视频录制更细粒度的控制。这已经非常接近需求，但生成的视频宽度固定在800像素。

后来发现一个已合并的PR解决了这个问题，但尚未发布。直到昨天，playwright-python 1.61.0正式发版，才最终得以实现。

代码本身由在Codex Desktop中运行的GPT-5.5 xhigh编写。还让它编写了文档，这为审查设计提供了一个非常有用的框架——很多迭代改进正是来自对文档的审阅，发现其中冗余、不一致或令人困惑的地方，然后请求（或直接口述）更好的设计。

YAML格式本身也主要由编码袋里定义。使用Pydantic来定义和验证格式，部分原因是为了让设计更容易审查。这是一个很好的例子，说明在编码袋里的支持下才能实现的功能。最初的问题报告于2024年2月，但在此之前，由于其他项目的优先级，很难抽出时间来解决这个问题。