vibeflow-test-qa

浏览器 QA 验证

在系统测试通过后，对含 UI 的项目运行浏览器导向的视觉和交互质量保证。此阶段关注系统测试中自动化检查可能遗漏的视觉一致性、交互细节和用户体验问题。

启动宣告： "正在使用 vibeflow-test-qa 运行浏览器 QA 验证。"

适用条件

• .vibeflow/workflow.yaml 中 QA 标记为 required
• 项目包含 "ui": true 的功能
• 系统测试已通过（docs/changes/<change-id>/verification/system-test.md 存在）

如工作流标记 QA 为可选且无 UI 功能：跳过此阶段，直接进入 vibeflow-ship。

检查清单

1. 准备环境

• 运行 python scripts/get-vibeflow-paths.py --json
• 读取 docs/changes/<change-id>/verification/system-test.md — 系统测试结果和已知问题
• 读取 UCD 风格指南 docs/changes/<change-id>/ucd.md（如存在）或 design.md 中的 UI/UX 章节 — 视觉基准
• 启动服务（使用 .vibeflow/guides/services.md）
• 验证应用在浏览器中可达

2. 视觉走查

调用 skills/vibeflow-browser-testing/SKILL.md 做真实浏览器验证，优先使用：

• Playwright MCP：执行关键交互和断言
• Chrome DevTools MCP：补充 screenshot / console / network / DOM / a11y 诊断
• MCP 不可用时，回退到 python scripts/browser_verify.py --url <url> --out-dir <dir>

涉及页面交互时，不得跳过真实浏览器验证。

2a. 页面级检查

对 UCD 中定义的每个页面：

1. 在真实浏览器打开页面 URL
2. 捕获全页截图
3. 对照 UCD 页面提示词验证：
   • 布局结构是否匹配
   • 视觉层次是否正确
   • 响应式行为（至少检查桌面和移动两个断点）

2b. 组件级检查

对关键交互组件：

1. 验证各状态（默认、悬停、激活、禁用、错误、加载）
2. 检查 CSS 属性匹配 UCD Token：
   • 颜色值匹配调色板
   • 字体匹配排版比例
   • 间距匹配间距 Token
3. 交互反馈正确（点击、悬停、焦点状态）

2c. 跨浏览器检查（如 SRS 指定）

在目标浏览器中重复关键页面检查，记录差异。

3. 交互流走查

对 SRS 中定义的关键用户工作流：

1. 模拟完整用户旅程（从入口到完成）
2. 验证每步的视觉反馈和状态转换
3. 检查加载状态、错误状态、空状态的视觉处理
4. 验证表单验证的视觉提示
5. 检查 console 是否干净、network 是否存在失败请求

4. 无障碍手工检查

自动化扫描已在系统测试中完成，此处做手工补充：

• 键盘导航流畅性（Tab 顺序合理，焦点指示器可见）
• 屏幕阅读器体验（ARIA 标签有意义）
• 色彩对比在实际内容下是否足够
• 触控目标大小足够（移动端）

5. 记录发现

对每个发现记录：

• 截图：通过真实浏览器采集
• 位置：页面 URL + 元素定位
• 预期：UCD 定义的外观/行为
• 实际：当前外观/行为
• 严重度：严重 / 重要 / 次要 / 外观

6. 生成 QA 报告

保存到 docs/changes/<change-id>/verification/qa.md：

# QA 验证报告

**日期**：YYYY-MM-DD
**浏览器**：[测试的浏览器及版本]
**设备/视口**：[测试的断点]

## 摘要
- 检查页面数：X
- 检查组件数：Y
- 发现总数：Z
  - 严重：A
  - 重要：B
  - 次要：C
  - 外观：D

## 发现详情

### QA-001：[标题]
- **页面**：[URL]
- **严重度**：[级别]
- **预期**：[来自 UCD]
- **实际**：[当前行为]
- **截图**：[如有]
- **状态**：[待修复 / 已修复 / 推迟]

### QA-002：...

## 裁定
[PASS — 可发布 / FAIL — 需修复]

7. 处理发现

• 严重/重要：修复后重新验证受影响区域
• 次要/外观：与用户确认是否修复或推迟
• 最多 3 轮修复-重验循环

8. 清理与过渡

• 停止服务（.vibeflow/guides/services.md）
• Git 提交 QA 报告
• 更新 .vibeflow/logs/session-log.md

QA 通过后进入 vibeflow-ship。

集成

调用者： vibeflow-router 或 vibeflow-test-system 依赖： 系统测试通过、UCD 文档存在 产出： docs/changes/<change-id>/verification/qa.md 可调用： vibeflow-browser-testing 链接到： vibeflow-ship