dogfood

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Dogfood: Systematic Web Application QA Testing

Dogfood：系统化Web应用QA测试

Overview

概述

This skill guides you through systematic exploratory QA testing of web applications using the browser toolset. You will navigate the application, interact with elements, capture evidence of issues, and produce a structured bug report.

本技能指导你使用浏览器工具集对Web应用开展系统性探索性QA测试。你可以导航访问应用、与页面元素交互、留存问题证据，并生成结构化的漏洞报告。

Prerequisites

前置条件

Browser toolset must be available (

browser_navigate

browser_snapshot

browser_click

browser_type

browser_vision

browser_console

browser_scroll

browser_back

browser_press

)

A target URL and testing scope from the user

必须可用的浏览器工具集（

browser_navigate

、

browser_snapshot

、

browser_click

、

browser_type

、

browser_vision

、

browser_console

、

browser_scroll

、

browser_back

、

browser_press

）

用户提供的目标URL和测试范围

Inputs

输入项

The user provides:

Target URL — the entry point for testing
Scope — what areas/features to focus on (or "full site" for comprehensive testing)
Output directory (optional) — where to save screenshots and the report (default:
```
./dogfood-output
```
)

用户需提供：

目标URL — 测试的入口地址
测试范围 — 需要重点测试的板块/功能（如需全量测试可填写「全站」）
输出目录（可选） — 保存截图和报告的路径（默认值：
```
./dogfood-output
```
）

Workflow

工作流程

Follow this 5-phase systematic workflow:

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

Phase 1: Plan

阶段1：规划

Create the output directory structure:

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

Identify the testing scope based on user input.
Build a rough sitemap by planning which pages and features to test:
- Landing/home page
- Navigation links (header, footer, sidebar)
- Key user flows (sign up, login, search, checkout, etc.)
- Forms and interactive elements
- Edge cases (empty states, error pages, 404s)

创建输出目录结构：

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

根据用户输入明确测试范围。
规划需要测试的页面和功能，搭建大致的站点地图：
- 落地页/首页
- 导航链接（头部、底部、侧边栏）
- 核心用户流程（注册、登录、搜索、结算等）
- 表单和交互元素
- 边界场景（空状态、错误页面、404页面）

Phase 2: Explore

阶段2：探索

For each page or feature in your plan:

Navigate to the page:

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

Take a snapshot to understand the DOM structure:
```
browser_snapshot()
```
Check the console for JavaScript errors:
```
browser_console(clear=true)
```
Do this after every navigation and after every significant interaction. Silent JS errors are high-value findings.
Take an annotated screenshot to visually assess the page and identify interactive elements:
```
browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)
```
The
```
annotate=true
```
flag overlays numbered
```
[N]
```
labels on interactive elements. Each
```
[N]
```
maps to ref
```
@eN
```
for subsequent browser commands.
Test interactive elements systematically:
- Click buttons and links:
```
browser_click(ref="@eN")
```
- Fill forms:
```
browser_type(ref="@eN", text="test input")
```
- Test keyboard navigation:
```
browser_press(key="Tab")
```
  ,
```
browser_press(key="Enter")
```
- Scroll through content:
```
browser_scroll(direction="down")
```
- Test form validation with invalid inputs
- Test empty submissions
After each interaction, check for:
- Console errors:
```
browser_console()
```
- Visual changes:
```
browser_vision(question="What changed after the interaction?")
```
- Expected vs actual behavior

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

导航访问对应页面：

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?")
```
- 预期行为与实际行为的差异

Phase 3: Collect Evidence

阶段3：收集证据

For every issue found:

Take a screenshot showing the issue:

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

Save the

screenshot_path

from the response — you will reference it in the report.

Record the details:
- URL where the issue occurs
- Steps to reproduce
- Expected behavior
- Actual behavior
- Console errors (if any)
- Screenshot path
Classify the issue using the issue taxonomy (see
```
references/issue-taxonomy.md
```
):
- Severity: Critical / High / Medium / Low
- Category: Functional / Visual / Accessibility / Console / UX / Content

针对每一个发现的问题：

截取能展示问题的截图：

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

保存返回结果中的

screenshot_path

——你会在报告中引用它。

记录详情信息：
- 问题出现的URL
- 复现步骤
- 预期行为
- 实际行为
- 控制台错误（如有）
- 截图路径
使用问题分类体系对问题进行归类（参考
```
references/issue-taxonomy.md
```
）：
- 严重程度：致命/高/中/低
- 问题类别：功能/视觉/可访问性/控制台/UX/内容

Phase 4: Categorize

阶段4：分类整理

Review all collected issues.
De-duplicate — merge issues that are the same bug manifesting in different places.
Assign final severity and category to each issue.
Sort by severity (Critical first, then High, Medium, Low).
Count issues by severity and category for the executive summary.

复查所有收集到的问题。
去重——合并同一漏洞在不同场景下出现的问题。
为每个问题确定最终的严重程度和类别。
按严重程度排序（优先致命，然后高、中、低）。
按严重程度和类别统计问题数量，用于执行摘要。

Phase 5: Report

阶段5：生成报告

Generate the final report using the template at

templates/dogfood-report-template.md

The report must include:

Executive summary with total issue count, breakdown by severity, and testing scope
Per-issue sections with:
- Issue number and title
- Severity and category badges
- URL where observed
- Description of the issue
- Steps to reproduce
- Expected vs actual behavior
- Screenshot references (use
```
MEDIA:<screenshot_path>
```
  for inline images)
- Console errors if relevant
Summary table of all issues
Testing notes — what was tested, what was not, any blockers

Save the report to

{output_dir}/report.md

使用

templates/dogfood-report-template.md

模板生成最终报告。

报告必须包含：

执行摘要：包含问题总数、按严重程度的分布、测试范围
单问题详情板块，包含：
- 问题编号和标题
- 严重程度和类别徽章
- 发现问题的URL
- 问题描述
- 复现步骤
- 预期与实际行为对比
- 截图引用（使用
```
MEDIA:<screenshot_path>
```
  实现图片内嵌）
- 相关控制台错误（如有）
所有问题的汇总表格
测试备注：已测试内容、未测试内容、遇到的所有阻塞项

将报告保存到

{output_dir}/report.md

。

Tools Reference

工具参考

Tool	Purpose
`browser_navigate`	Go to a URL
`browser_snapshot`	Get DOM text snapshot (accessibility tree)
`browser_click`	Click an element by ref ( `@eN` ) or text
`browser_type`	Type into an input field
`browser_scroll`	Scroll up/down on the page
`browser_back`	Go back in browser history
`browser_press`	Press a keyboard key
`browser_vision`	Screenshot + AI analysis; use `annotate=true` for element labels
`browser_console`	Get JS console output and errors

工具	用途
`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控制台输出和错误

Tips

使用提示

Always check
browser_console()
after navigating and after significant interactions. Silent JS errors are among the most valuable findings.
Use
annotate=true
with
browser_vision
when you need to reason about interactive element positions or when the snapshot refs are unclear.
Test with both valid and invalid inputs — form validation bugs are common.
Scroll through long pages — content below the fold may have rendering issues.
Test navigation flows — click through multi-step processes end-to-end.
Check responsive behavior by noting any layout issues visible in screenshots.
Don't forget edge cases: empty states, very long text, special characters, rapid clicking.
When reporting screenshots to the user, include
```
MEDIA:<screenshot_path>
```
so they can see the evidence inline.

每次导航和重大交互后务必检查
browser_console()
。无提示的JS错误属于价值最高的发现之一。
当你需要判断交互元素位置或快照引用不清晰时，为
browser_vision
设置
annotate=true
。
同时使用有效和无效输入进行测试——表单校验漏洞非常常见。
滚动浏览长页面——首屏以下的内容可能存在渲染问题。
测试导航流程——从头到尾点击走完多步流程。
通过留意截图中的布局问题检查响应式表现。
不要遗漏边界场景：空状态、超长文本、特殊字符、快速点击。
向用户反馈截图时，包含
```
MEDIA:<screenshot_path>
```
即可让用户直接看到内嵌的证据。