dogfood

Dogfood：Web 应用系统化 QA 测试

概览

本 Skill 指导你使用浏览器工具链对 Web 应用进行系统化的探索性 QA 测试。你将深入浏览应用、与界面元素交互、抓取问题证据，并最终输出一份结构化的 Bug 报告。

前置条件

• 必须具备可用的浏览器工具链（browser_navigate、browser_snapshot、browser_click、browser_type、browser_vision、browser_console、browser_scroll、browser_back、browser_press）
• 用户已提供目标 URL 及测试范围（Scope）

输入参数

用户需提供：

1. 目标 URL — 测试的入口页面
2. 测试范围（Scope） — 重点关注的区域/功能（或传入 "full site" 进行全站深度测试）
3. 输出目录（可选）— 保存截图与报告的路径（默认为：./dogfood-output）

工作流

请严格遵循以下 5 个阶段的系统化工作流：

阶段 1：规划

1. 创建输出目录结构：

   {output_dir}/
   ├── screenshots/       # 证据截图
   └── report.md          # 最终报告（将在阶段 5 生成）
   

2. 根据用户输入确定测试范围。
3. 梳理测试页面与功能，建立初步的站点地图（Sitemap）：
   • 落地页 / 首页
   • 导航链接（页头、页脚、侧边栏）
   • 核心用户链路（注册、登录、搜索、下单结算等）
   • 表单与交互元素
   • 边界情况（空白状态、错误页、404 等）

阶段 2：探索

针对规划中的每个页面或功能：

1. 访问页面：

   browser_navigate(url="https://example.com/page")
   

2. 获取快照以解析 DOM 结构：

   browser_snapshot()
   

3. 检查控制台是否有 JavaScript 报错：

   browser_console(clear=true)
   

   每次页面跳转以及发生重大交互后，都应执行此操作。隐蔽的 JS 报错往往具有极高价值。

4. 截取带标注的屏幕截图，对页面进行视觉评估并识别交互元素：

   browser_vision(question="描述页面布局，识别是否存在视觉缺陷、损坏元素或无障碍访问问题", annotate=true)
   

   设置 annotate=true 参数后，会在可交互元素上叠加编号标记 [N]。每个 [N] 会映射到后续浏览器命令引用的 @eN 标记。

5. 系统化测试交互元素：

   • 点击按钮和链接：browser_click(ref="@eN")
   • 填写表单：browser_type(ref="@eN", text="test input")
   • 测试键盘导航：browser_press(key="Tab")、browser_press(key="Enter")
   • 滚动浏览内容：browser_scroll(direction="down")
   • 使用无效输入测试表单校验规则
   • 测试空表单提交

6. 每次交互后，重点排查：

   • 控制台报错：browser_console()
   • 视觉变化：browser_vision(question="交互发生后页面发生了什么变化？")
   • 实际行为与预期是否一致

阶段 3：收集证据

对于发现的每一个问题：

1. 截取现场截图以证明问题存在：

   browser_vision(question="截取并描述此页面上可见的问题", annotate=false)
   

   保存返回结果中的 screenshot_path — 你将在报告中引用该路径。

2. 记录详细信息：

   • 发生问题的 URL
   • 复现步骤
   • 预期行为
   • 实际行为
   • 控制台报错（如有）
   • 截图路径

3. 分类问题（参考问题分类法标准 references/issue-taxonomy.md）：

   • 严重程度（Severity）：Critical（致命） / High（严重） / Medium（一般） / Low（轻微）
   • 缺陷类型（Category）：Functional（功能） / Visual（视觉） / Accessibility（无障碍） / Console（控制台报错） / UX（交互体验） / Content（文案内容）

阶段 4：归类与整理

1. 复盘已收集的所有问题。
2. 问题去重 — 如果同一个 Bug 只是在不同页面表现出来，请进行合并。
3. 为每个问题确定最终的严重程度和缺陷类型。
4. 按严重程度排序（致命 Critical 优先，其次是 High、Medium、Low）。
5. 统计各严重程度及缺陷类型的 Bug 数量，用于写入执行摘要。

阶段 5：生成报告

使用 templates/dogfood-report-template.md 模板生成最终报告。

报告必须包含以下内容：

1. 执行摘要：包含 Bug 总数、按严重程度分类统计、以及测试范围说明
2. Bug 明细章节，每项应包含：
   • Bug 编号与标题
   • 严重程度与类型标签
   • 复现问题的 URL
   • 问题描述
   • 复现步骤
   • 预期行为 vs 实际行为
   • 截图引用（内联图片请统一使用 MEDIA:<screenshot_path> 格式）
   • 相关的控制台报错日志
3. Bug 汇总表格
4. 测试说明 — 覆盖了哪些内容、哪些未测试、是否存在阻塞项

将最终报告保存至 {output_dir}/report.md。

工具速查表

工具	用途
browser_navigate	跳转至指定 URL
browser_snapshot	获取 DOM 文本快照（无障碍树）
browser_click	通过元素引用 (@eN) 或文本点击元素
browser_type	在输入框中输入文本
browser_scroll	页面向上/向下滚动
browser_back	返回上一页历史记录
browser_press	按下键盘按键
browser_vision	截图并进行 AI 视觉分析；如需生成元素标记请设 annotate=true
browser_console	获取 JS 控制台输出及报错信息

实战建议

• 在页面跳转和重大交互后，务必执行 browser_console()。 隐蔽的静态 JS 报错往往是最有价值的发现之一。
• 需要定位交互元素位置或快照引用不明确时，结合 browser_vision 使用 annotate=true。
• 同时使用合法与非法输入进行测试 — 表单校验相关的 Bug 极为常见。
• 保持向下滚动长页面 — 首屏以下的内容可能会存在渲染错乱或布局崩溃。
• 完整测试业务链路 — 端到端点击体验多步骤操作流程。
• 关注响应式表现 — 注意截图呈现出的排版错位问题。
• 不要忽视边界情况：空白无数据状态、超长文本溢出、特殊字符注入、频繁快速点击等。
• 在向用户提交截图报告时，请附带 MEDIA:<screenshot_path> 格式，方便直观查看内联图片。