Dogfood

网页应用探索性 QA：发现缺陷、收集证据、生成报告。

Skill 元数据

来源	内置（默认安装）
路径	skills/dogfood
版本	1.0.0
平台	linux, macos, windows
标签	qa, testing, browser, web, dogfood

参考：完整 SKILL.md

信息

以下是 AigenLabs 在触发此 skill 时加载的完整 skill 定义。这是 agent 在 skill 激活时所看到的指令内容。

Dogfood：系统化网页应用 QA 测试

概述

本 skill 指导你使用浏览器工具集对网页应用进行系统化探索性 QA 测试。你将浏览应用、与元素交互、收集问题证据，并生成结构化缺陷报告。

前提条件

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

输入

用户提供：

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

工作流程

遵循以下 5 阶段系统化工作流程：

阶段 1：规划

1. 创建输出目录结构：

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

2. 根据用户输入确定测试范围。
3. 通过规划待测页面和功能，构建粗略站点地图：
   • 落地页/首页
   • 导航链接（页头、页脚、侧边栏）
   • 关键用户流程（注册、登录、搜索、结账等）
   • 表单和交互元素
   • 边界情况（空状态、错误页面、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="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", 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="What changed after the interaction?")
   • 预期行为与实际行为

阶段 3：收集证据

对于发现的每个问题：

1. 截图以记录问题：

   browser_vision(question="Capture and describe the issue visible on this page", annotate=false)

   保存响应中的 screenshot_path — 将在报告中引用它。

2. 记录详情：

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

3. 按问题分类法对问题分类（参见 references/issue-taxonomy.md）：

   • 严重程度：Critical（严重）/ High（高）/ Medium（中）/ Low（低）
   • 类别：Functional（功能）/ Visual（视觉）/ Accessibility（无障碍）/ Console（控制台）/ UX（用户体验）/ Content（内容）

阶段 4：分类整理

1. 审查所有收集到的问题。
2. 去重 — 合并在不同位置表现为同一缺陷的问题。
3. 为每个问题分配最终严重程度和类别。
4. 按严重程度排序（Critical 优先，依次为 High、Medium、Low）。
5. 按严重程度和类别统计问题数量，用于执行摘要。

阶段 5：报告

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

报告必须包含：

1. 执行摘要，含问题总数、按严重程度的分布情况及测试范围
2. 每个问题的章节，包含：
   • 问题编号和标题
   • 严重程度和类别标签
   • 观察到问题的 URL
   • 问题描述
   • 复现步骤
   • 预期行为与实际行为
   • 截图引用（使用 MEDIA:<screenshot_path> 内联显示图片）
   • 相关控制台错误（如有）
3. 所有问题的汇总表
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。
• 使用有效和无效输入分别测试 — 表单验证缺陷十分常见。
• 滚动浏览长页面 — 折叠线以下的内容可能存在渲染问题。
• 测试导航流程 — 端到端点击多步骤流程。
• 通过截图中可见的布局问题检查响应式行为。
• 不要忽视边界情况：空状态、超长文本、特殊字符、快速连续点击。
• 向用户报告截图时，请包含 MEDIA:<screenshot_path>，以便他们能内联查看证据。