浏览器自动化验证

概述

浏览器自动化验证是一种前端变更的 E2E 验证方法，要求 Agent 在标记前端 User Story 为完成之前，必须通过 Puppeteer MCP 执行真实的浏览器交互操作（导航、截图、填表、点击）并验证最终状态，禁止主观判断"应该能用"。

核心原则：前端变更必须用浏览器自动化验证，而非主观判断"应该能用"而不实际验证。这是 Ralph Loop 系统中的非谈判项（UNACCEPTABLE 列表明确列出）。
标准验证流程：
puppeteer_navigate：导航到目标页面
puppeteer_screenshot(name="before")：记录操作前状态
puppeteer_fill / puppeteer_click：执行用户交互操作
puppeteer_screenshot(name="after")：记录操作后状态
验证三项：URL 跳转正确、DOM 元素存在、文本内容符合预期
与 API 验证的对比：API Story 使用 curl 命令行验证响应状态和 JSON 内容，前端 Story 必须使用 Puppeteer MCP 进行视觉和交互验证。两者都是 passes: true 的前置条件。
在 Agent 迭代循环中的位置：验证步骤位于实现功能之后、更新 prd.json 之前。验证通过 → 设置 passes: true → Git 提交 → 更新 progress.txt。验证失败 → 进入 Bug 处理流程。
截图的双重作用：
验证证据：before/after 截图作为验证通过的客观证据
调试辅助：失败时截图帮助后续 Agent 实例理解问题所在
与 Session 交接机制的关系：验证结果（PASS/FAIL）记录在 progress.txt 中，截图作为 Git 提交的一部分持久化，供后续 Agent 实例参考。

raw/articles/ai-tools/ralph-loop/CLAUDE.md — Ralph Coding Agent 提示词模板中的验证约束和流程
raw/articles/ai-tools/ralph-loop/coding-agent.md — Coding Agent 完整协议中的铁规则（所有前端变更必须用 dev-browser skill 验证）
raw/articles/ai-tools/ralph-loop/testing-patterns.md — Testing Patterns 文档（Playwright 脚本验证模式、截图回归测试）