shot-scraper video 是在今天發布的 shot-scraper 1.10 版中引入的新指令。它接受一個 storyboard.yml 檔案，該檔案定義了針對網頁應用程式執行的例行操作，並使用 Playwright 錄製這些操作的影片。我之前曾撰文強調程式碼代理程式生成其工作示範的重要性；這是我最新一次嘗試讓它們實現這一目標。
這裡有一個使用 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 檔案的內容，它詳細定義了影片錄製的步驟和操作。這個 YAML 腳本包含了啟動開發伺服器、設定視窗大小、模擬剪貼簿操作以及一系列點擊和填寫表單的動作，以展示資料的批次插入和新表格的建立。
影片指令的文件中包含了更簡單的範例，但為了這篇文章的目的，我選擇了一個更全面的例子。這個示範用的 YAML 腳本完全是由在 Codex Desktop 中執行的 GPT-5.5 xhigh 生成的。它是在我的 ~/dev/datasette 分支中，使用特定的提示詞來完成的。
現在我已經發布了這個功能，提示詞可以改為「run uvx shot-scraper video --help」，應該會達到相同的效果。我非常喜歡這種模式，即指令的 --help 輸出提供了足夠的細節，讓程式碼代理程式可以使用它。這就像是直接在工具中捆綁了一個 SKILL.md 檔案。我對 showboat 和 rodney 也使用了相同的模式。
我是如何建立這個功能的呢？shot-scraper video 最初是一個實驗性的原型。shot-scraper 是基於 Playwright 構建的，它需要的關鍵功能是 Playwright 能夠錄製瀏覽器會話的影片，並具有足夠的控制能力來創建所需的示範。
我幾年前首次嘗試這個功能時，發現 Playwright 生成的影片包含了額外的瀏覽器介面，這對於偵錯測試失敗很有用，但對於產品示範來說卻是不必要的。他們在一段時間前修復了這個問題，但仍然存在一些小障礙。特別是，我會看到影片開頭有幾個空白畫面，因為錄製機制在瀏覽器載入第一個 URL 之前就啟動了。
Playwright 1.59 增加了一個新的螢幕錄影機制，提供了更精細的影片錄製控制。這幾乎就是我所需要的，但生成的影片寬度固定為 800px。我發現了一個已合併但尚未發布的 PR 解決了這個問題。直到昨天，他們在 playwright-python 1.61.0 中發布了它，我才終於得以完成這個功能的實作！
程式碼本身完全是由在 Codex Desktop 中執行的 GPT-5.5 xhigh 編寫的。我也讓它編寫了文件，這為我審查設計提供了一個非常有用的框架。這個功能的大部分迭代都來自於審查該文件，發現冗餘、不一致或令人困惑的地方，然後要求（或指示）更好的設計。
YAML 格式本身主要由程式碼代理程式定義。我讓它使用 Pydantic 來定義和驗證格式，部分是為了讓設計更容易審查。這是一個很好的例子，說明了如果沒有程式碼代理程式的支援，我幾乎肯定不會承擔這類功能。我早在 2024 年 2 月就提出了最初的問題，但在所有其他專案中很難找到必要的時間來解決這個問題。
