Dogfood

对 Web 应用程序进行系统性的探索性 QA 测试——发现缺陷、捕获证据并生成结构化报告

技能元数据


来源	捆绑（默认安装）
路径	`skills/dogfood`
版本	`1.0.0`
标签	`qa`, `testing`, `browser`, `web`, `dogfood`

参考：完整 SKILL.md

信息

以下是 Hermes 在触发此技能时加载的完整技能定义。这是技能激活时代理所看到的指令。

Dogfood：系统性 Web 应用程序 QA 测试

概述

此技能指导你使用浏览器工具集对 Web 应用程序进行系统性的探索性 QA 测试。你将导航应用程序、与元素交互、捕获问题证据，并生成结构化的缺陷报告。

前提条件

必须可用浏览器工具集（browser_navigate、browser_snapshot、browser_click、browser_type、browser_vision、browser_console、browser_scroll、browser_back、browser_press）
用户提供目标 URL 和测试范围

输入

用户提供：

目标 URL — 测试的入口点
范围 — 需要关注的区域/功能（或“全站”以进行全面测试）
输出目录（可选）— 保存截图和报告的位置（默认：./dogfood-output）

工作流

遵循以下 5 个阶段的系统性工作流：

阶段 1：计划

创建输出目录结构：

{output_dir}/
├── screenshots/       # Evidence screenshots
└── report.md          # Final report (generated in Phase 5)

根据用户输入确定测试范围。
通过规划要测试的页面和功能来构建粗略的站点地图：
- 落地页/主页
- 导航链接（页眉、页脚、侧边栏）
- 关键用户流程（注册、登录、搜索、结账等）
- 表单和交互元素
- 边界情况（空状态、错误页面、404 页面）

阶段 2：探索

对于计划中的每个页面或功能：

导航至该页面：

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

拍摄快照以了解 DOM 结构：
```
browser_snapshot()
```
检查控制台是否有 JavaScript 错误：
```
browser_console(clear=true)
```
在每次导航后以及每次重要交互后执行此操作。静默的 JS 错误是高价值的发现。
拍摄带标注的截图以直观评估页面并识别交互元素：
```
browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)
```
annotate=true 标志会在交互元素上叠加带编号的 [N] 标签。每个 [N] 映射到引用 @eN，用于后续的浏览器命令。
系统地测试交互元素：
- 点击按钮和链接：browser_click(ref="@eN")
- 填写表单：browser_type(ref="@eN", text="test input")
- 测试键盘导航：browser_press(key="Tab")、browser_press(key="Enter")
- 滚动浏览内容：browser_scroll(direction="down")
- 使用无效输入测试表单验证
- 测试空提交
每次交互后，检查以下内容：
- 控制台错误：browser_console()
- 视觉变化：browser_vision(question="What changed after the interaction?")
- 预期行为与实际行为

阶段 3：收集证据

对于发现的每个问题：

拍摄截图以展示问题：
```
browser_vision(question="Capture and describe the issue visible on this page", annotate=false)
```
保存响应中的 screenshot_path — 你将在报告中引用它。
记录详细信息：
- 问题发生的 URL
- 复现步骤
- 预期行为
- 实际行为
- 控制台错误（如果有）
- 截图路径
使用问题分类法对问题进行分类（参见 references/issue-taxonomy.md）：
- 严重程度：严重 (Critical) / 高 (High) / 中 (Medium) / 低 (Low)
- 类别：功能 (Functional) / 视觉 (Visual) / 无障碍 (Accessibility) / 控制台 (Console) / 用户体验 (UX) / 内容 (Content)

阶段 4：分类

审查所有收集到的问题。
去重 — 合并在不同位置表现的同一缺陷的问题。
为每个问题分配最终的严重程度和类别。
按严重程度排序（首先是严重，然后是高、中、低）。
按严重程度和类别统计问题数量，用于执行摘要。

阶段 5：报告

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

报告必须包括：

执行摘要，包含问题总数、按严重程度细分以及测试范围
每个问题的部分，包含：
- 问题编号和标题
- 严重程度和类别徽章
- 观察到的 URL
- 问题描述
- 复现步骤
- 预期行为与实际行为
- 截图引用（使用 MEDIA:<screenshot_path> 嵌入图片）
- 相关的控制台错误
所有问题的汇总表
测试说明 — 测试了什么、未测试什么、任何阻碍因素

将报告保存至 {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。
使用有效和无效输入进行测试 — 表单验证错误很常见。
滚动浏览长页面 — 首屏下方的内容可能存在渲染问题。
测试导航流程 — 端到端地点击完成多步骤流程。
通过注意截图中可见的任何布局问题来检查响应式行为。
不要忘记边界情况：空状态、非常长的文本、特殊字符、快速点击。
向用户报告截图时，请包含 MEDIA:<screenshot_path>，以便他们可以内联查看证据。

技能元数据​

参考：完整 SKILL.md​

Dogfood：系统性 Web 应用程序 QA 测试

概述​

前提条件​

输入​

工作流​

阶段 1：计划​

阶段 2：探索​

阶段 3：收集证据​

阶段 4：分类​

阶段 5：报告​

工具参考​

提示​