e2e-flow-verifier

E2E 流程验证器

产品验证技能，使用 qe-browser fleet 技能（Vibium 引擎）驱动用户流程，在每个步骤断言状态，并将证据记录为包含截图和 DOM 快照的 ZIP 文件。

激活

/e2e-flow-verifier [flow-name]

依赖项

此技能使用 .claude/skills/qe-browser/ 进行所有浏览器自动化。vibium 二进制文件由 aqe init 自动安装。完整命令参考请参阅 qe-browser/SKILL.md。

流程验证模式（qe-browser + batch + assert）

将流程定义为 JSON 批处理计划，并使用 qe-browser 批处理运行器执行：

# flows/{{flow-name}}.json
cat > /tmp/{{flow-name}}.json <<'EOF'
[
  {"action": "go",      "url": "{{base_url}}"},
  {"action": "wait_load"},
  {"action": "fill",    "selector": "[data-testid=email]",    "text": "{{test_user}}"},
  {"action": "fill",    "selector": "[data-testid=password]", "text": "{{test_password}}"},
  {"action": "click",   "selector": "[data-testid=login-btn]"},
  {"action": "wait_url","pattern": "/dashboard"},
  {"action": "assert",  "checks": [
    {"kind": "url_contains",    "text": "/dashboard"},
    {"kind": "selector_visible","selector": "[data-testid=dashboard]"},
    {"kind": "no_console_errors"},
    {"kind": "no_failed_requests"}
  ]},
  {"action": "click",   "selector": "[data-testid={{action_element}}]"},
  {"action": "assert",  "checks": [
    {"kind": "text_visible", "text": "{{expected_text}}"}
  ]}
]
EOF

# Record evidence AND drive the flow
vibium record start --screenshots --snapshots --name "{{flow-name}}"
node .claude/skills/qe-browser/scripts/batch.js --steps "@/tmp/{{flow-name}}.json"
FLOW_EXIT=$?
vibium record stop -o "test-results/{{flow-name}}/evidence.zip"
exit $FLOW_EXIT

如果任何步骤失败，批处理运行器会以非零状态码退出，因此 CI 门禁可以直接检查 $?。

证据收集

每次流程验证后，vibium record 都会生成一个 ZIP 文件，其中包含：

1. 截图 — 每个操作对应一张截图，另有带注释的失败截图
2. DOM 快照 — 每次交互前后各一份
3. 时间线 — 按顺序排列的事件日志，包含 URL 和耗时
4. 控制台/网络日志 — 内联捕获

如有需要，可使用 vibium har-export 导出单独的 HAR 1.2 网络日志。

同时断言后端状态与 UI 状态

qe-browser 的 assert.js 检查类型包括网络断言，可捕获页面发出的后端调用：

node .claude/skills/qe-browser/scripts/assert.js --checks '[
  {"kind": "response_status", "url": "/api/{{resource}}", "status": 200},
  {"kind": "request_url_seen", "url": "/api/{{resource}}"}
]'

对于并非由页面发起的 API 调用，请在单独的步骤中运行 API 检查（curl + jq，或专用的 API 测试技能）。

常见验证流程

流程	步骤	关键断言
注册	注册 → 验证电子邮件 → 登录	url_contains /dashboard、no_failed_requests
购买	浏览 → 加入购物车 → 结账 → 支付	response_status /api/orders 201、text_visible "Thank you"
个人资料	登录 → 编辑个人资料 → 保存	重新加载的表单中 value_equals、no_console_errors
搜索	输入查询 → 筛选 → 选择结果	element_count .result >= 1、text_visible <query>

在不同运行中复用身份验证状态

# Once: log in and save state
vibium go "{{base_url}}/login"
vibium fill "[data-testid=email]" "$USERNAME"
vibium fill "[data-testid=password]" "$PASSWORD"
vibium click "[data-testid=login-btn]"
vibium wait url "/dashboard"
vibium storage -o test-results/auth/state.json

# Every subsequent run
vibium storage restore test-results/auth/state.json
vibium go "{{base_url}}/dashboard"

注意事项

• DOM 更改后重新映射 — 导航会使 Vibium 的 @e1 引用失效；使用 vibium diff map 查看更改内容，并在需要时重新映射。
• 部署后选择器可能失效 — 优先使用 data-testid，而非 CSS 类。
• 身份验证令牌会过期 — 每次运行时使用新登录，或轮换 storage 快照。
• 证据 ZIP 文件会增大 — 在 CI 中仅保留失败运行的文件，并在 N 天后进行垃圾回收。
• 不使用原始 Playwright — 此技能过去使用 @playwright/test。如果需要 Playwright 的网络拦截功能（page.route），请在单独的技能中使用，并将其作为一个步骤调用；不要在此处重新引入该依赖。