# 生图画布视觉验收套件 ## 诊断流程样例 ### 入口 ```bash cd /Users/bytedance/Documents/product-bu/20-products/image-canvas-lab/canvas-app npm run qa:visual -- --url http://localhost:5178 ``` ### 输入 | 输入 | 来源 | 用途 | |---|---|---| | 页面 URL | dev server 或 `--url` | 打开生图画布 | | 测试图片 | `50-ops/fixtures/paste-image.png` | 模拟直接粘贴参考图 | | 模型白名单 | app 配置或 fixture | 检查模型下拉 | | env | `.env.local`、`canvas-app/secret.env`、`~/.codex/secret.env` | 只检查变量名是否可用 | ### 步骤 1. 探测 `localhost:5178`，不可达则提示启动命令。 2. 用 Playwright 走系统 Chrome channel 打开页面，保存首屏截图。 3. 断言标题、右侧面板、按钮、状态和默认提示词为中文。 4. 打开模型下拉，断言只出现允许的模型。 5. 将 fixture 图片写入剪贴板并模拟 `Cmd+V`，检查画布新增 reference image card。 6. 采集 console error、页面截图、节点摘要和 env preflight，写入 `50-ops/visual-qa/latest/report.json`。 ### 成功信号 - `home.png` 和 `after-paste.png` 非空且画布可见。 - 中文文案断言全部通过。 - 粘贴前后参考图节点数从 0 变 1。 - 模型列表和配置一致。 - `OPENROUTER_API_KEY` 可被读取到变量名，但报告不包含 key 值。 ### 失败样例 ```text FAIL paste-image: expected referenceImageCards=1, got 0 Screenshot: 50-ops/visual-qa/latest/after-paste.png Likely fix: check clipboard paste handler focus target and image MIME parsing. ``` ### 落地路径 先把它作为 `image-canvas-lab` 的 app 内脚本，服务单次需求；稳定后抽成 Night Gym 的 `image-canvas-visual-qa-kit`，给所有生图/画布类项目复用。