Treat your README demo like a test: Playwright checked GIF

说明与用途

使用 Demo Forge 记录 README 演示的工作流程，利用 Playwright 验证 UI 交互，并仅在检查通过时导出 GIF/MP4。

问题

Ensuring README demos are accurate by performing UI interactions, verifying results, and exporting media only when checks pass.

结果

When the UI meets the specified success selector, Demo Forge exports a GIF, MP4, WebM, cover image, and a detailed report. If the expectation fails, only a report is produced and the command exits with code 1.

工作流

• Clone the Demo Forge repo and set up a Python 3.11+ virtual environment. Install Playwright 1.58.0 and its Chromium dependency. Run the `forge.py --doctor` command to confirm prerequisites. Start the example app in terminal one: `python experiments/demo-forge/examples/brief-app/server.py --port 3000`. Create an operation JSON file (e.g., `my-operation.json`) describing the input, steps, and success selector. In terminal two, run the forge command with `--url http://127.0.0.1:3000/ --operation my-operation.json --output <run_dir> --tail-seconds 8`. On success, the output directory contains `run.json, demo-forge.webm, demo-forge.mp4, demo-forge.gif, and cover.png`. To test rejection, modify the expected success text, run the forge command again, and verify it exits with code 1 and only exports a report. Use a fresh temporary directory for each run to avoid mixing files.

证据

Demo Forge is a small open‑source experiment around that workflow. It drives a local app with Playwright and exports MP4, GIF, and a cover image with FFmpeg after the specified UI checks pass.

来源

The last command checks the prerequisites. Continue when its JSON reports "status": "ready".

来源

On success, that directory contains run.json, demo-forge.webm, demo-forge.mp4, demo-forge.gif, and cover.png.

来源

That command should exit with code 1. In the two local runs on October 7, 2026, the results were: ...

来源