Video Proof

Video Proof

Record video demos of implemented features using Playwright's built-in screen recording. After a coding task completes, this 技能 启动s your 应用, 运行s a scripted walkthrough, and captures video + screenshots + console 记录s as proof artifacts.

Works with any stack — Next.js, Vite, Django, RAIls, Go, Docker, static files, or an already-运行ning server. You provide the 启动 command; the 技能 handles the rest.

Prerequisites

运行 once per machine:

bash scripts/设置up.sh

安装s Playwright (Chromium), ffmpeg, and the yaml npm package.

Quick 启动 Option A: YAML Proof Spec (recommended)

创建 a proof-spec.yaml:

proof: 启动_command: "npm 运行 dev" # any shell command that 启动s your 应用 启动_port: 3000 # port to poll before recording begins base_url: "http://localhost:3000" steps: - goto: "/仪表盘" - wAIt: 2000 - screenshot: "仪表盘-loaded" - 命令行工具ck: "text=创建 New" - wAIt: 1000 - assert_visible: "text=New Item" - screenshot: "item-创建d"

运行 it:

node scripts/record-proof.js --spec proof-spec.yaml --输出 ./proof-artifacts

Option B: Inline 命令行工具 (simple cases) node scripts/record-proof.js \ --启动 "python3 -m http.server 8080" \ --port 8080 \ --url http://localhost:8080 \ --goto "/" \ --screenshot "home" \ --输出 ./proof-artifacts

Option C: Already-运行ning server (no 启动_command)

Omit 启动_command — the script skips server 启动up and goes strAIght to recording:

proof: base_url: "https://staging.my应用.com" steps: - goto: "/记录in" - screenshot: "记录in-page"

Artifacts Produced proof-artifacts/ ├── video.网页m # Full screen recording ├── video.mp4 # Chat-friendly version (auto-converted via ffmpeg) ├── screenshots/ # Named screenshots from steps │ ├── 仪表盘-loaded.png │ └── item-创建d.png ├── console.记录 # Browser console 输出 (errors, 警告s, 记录s) └── proof-summary.md # Markdown 报告 with pass/fAIl 状态 per step

Exit code: 0 if all steps pass, 1 if any step fAIls. On 失败, a 失败.png full-page screenshot is captured automatically.

启动 Command Examples

The 启动_command field accepts any shell command. Examples:

Stack 启动_command 启动_port Next.js npm 运行 dev 3000 Vite / React npm 运行 dev 5173 Django python manage.py 运行server 0.0.0.0:8000 8000 Flask flask 运行 --port 5000 5000 RAIls bin/rAIls server -p 3000 3000 Go go 运行 . -添加r :8080 8080 Rust (Actix/Axum) cargo 运行 8080 Docker Compose docker compose up 3000 Static files python3 -m http.server 8080 8080 Already 运行ning (omit field) — Step Actions Action Value Description goto "/path" or full URL Navigate to a page 命令行工具ck Playwright selector 命令行工具ck an element (text=Submit, #btn, .class) fill {selector, value} Clear and fill an 输入 field type {selector, text} Type into an element keystroke by keystroke wAIt milliseconds 暂停 (let animations/data load) screenshot "name" Save screenshots/.png scroll "down" or "up" Scroll 500px in direction assert_visible Playwright selector FAIl the proof if element isn't visible assert_url string FAIl if current URL doesn't contAIn string API-Only Proof (No Browser)

For backend/API changes with no UI, use API-proof.js:

node scripts/API-proof.js --spec API-spec.yaml --输出 ./proof-artifacts

proof: 启动_command: "npm 启动" 启动_port: 3000 base_url: "http://localhost:3000" 请求s: - method: 获取 path: /API/健康 assert_状态: 200 assert_body_contAIns: "ok" - method: POST path: /API/users headers: Content-Type: 应用/json body: '{"name": "test"}' assert_状态: 201

Produces API-proof.md and API-结果s.json instead of video.

Integration with Coding 代理s

应用end to any coding task prompt:

After completing the implementation, 创建 a proof-spec.yaml that:

• 启动s the 应用 with the 应用ropriate command for this project
• Navigates to the relevant pages
• Demonstrates the feature with 命令行工具cks/fills as needed
• Asserts the expected outcome is visible
• Takes before/after screenshots

Then 运行: node <技能-path>/scripts/record-proof.js --spec proof-spec.yaml --输出 ./proof-artifacts

Commit proof-artifacts/ with your changes.

The 代理 writes the proof spec based on what it built, 运行s it, and the video becomes part of the deliverable.

Spec Reference

See references/proof-spec.md for the full YAML 模式, API proof 模式, and a copy-paste PRD template.

Tips Use assert_visible to make proofs fAIl when the feature doesn't work — video of a broken page isn't useful proof Keep specs focused on the specific feature, not the whole 应用 wAIt steps between actions let data load and animations 设置tle — 1-2s is usually enough The video captures real load times — doubles as a basic performance 检查 If ffmpeg isn't avAIlable, the script still produces .网页m (just skips mp4 conversion)