8 chapters · 24 min
Skills
Chapter 4 of 8
Systematically explore and test a web application to find bugs, UX issues, and other problems.
5 minutes · 1,091 words · 13 sections
Systematically explore a web application, find issues, and produce a report with full reproduction evidence for every finding.
Only the Target URL is required. Everything else has sensible defaults – use them unless the user explicitly provides an override.
| Parameter | Default | Example override |
|---|---|---|
| Target URL | (required) | vercel.com, http://localhost:3000 |
| Session name | Slugified domain (e.g., vercel.com -> vercel-com) | --session my-session |
| Output directory | ./dogfood-output/ | Output directory: /tmp/qa |
| Scope | Full app | Focus on the billing page |
| Authentication | None | Sign in to user@example.com |
If the user says something like “dogfood vercel.com”, start immediately with defaults. Do not ask clarifying questions unless authentication is mentioned but credentials are missing.
Always use agent-browser directly – never npx agent-browser. The direct binary uses the fast Rust client. npx routes through Node.js and is significantly slower.
1. Initialize Set up session, output dirs, report file
2. Authenticate Sign in if needed, save state
3. Orient Navigate to starting point, take initial snapshot
4. Explore Systematically visit pages and test features
5. Document Screenshot + record each issue as found
6. Wrap up Update summary counts, close sessionmkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videosCopy the report template into the output directory and fill in the header fields:
cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.mdStart a named session:
agent-browser --session {SESSION} open {TARGET_URL}
agent-browser --session {SESSION} wait --load networkidleIf the app requires login:
agent-browser --session {SESSION} snapshot -i
# Identify login form refs, fill credentials
agent-browser --session {SESSION} fill @e1 "{EMAIL}"
agent-browser --session {SESSION} fill @e2 "{PASSWORD}"
agent-browser --session {SESSION} click @e3
agent-browser --session {SESSION} wait --load networkidleFor OTP/email codes: ask the user, wait for their response, then enter the code.
After successful login, save state for potential reuse:
agent-browser --session {SESSION} state save {OUTPUT_DIR}/auth-state.jsonTake an initial annotated screenshot and snapshot to understand the app structure:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/initial.png
agent-browser --session {SESSION} snapshot -iIdentify the main navigation elements and map out the sections to visit.
Read references/issue-taxonomy.md (opens in a new tab) for the full list of what to look for and the exploration checklist.
Strategy – work through the app systematically:
At each page:
agent-browser --session {SESSION} snapshot -i
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/{page-name}.png
agent-browser --session {SESSION} errors
agent-browser --session {SESSION} consoleUse your judgment on how deep to go. Spend more time on core features and less on peripheral pages. If you find a cluster of issues in one area, investigate deeper.
Steps 4 and 5 happen together – explore and document in a single pass. When you find an issue, stop exploring and document it immediately before moving on. Do not explore the whole app first and document later.
Every issue must be reproducible. When you find something wrong, do not just note it – prove it with evidence. The goal is that someone reading the report can see exactly what happened and replay it.
Choose the right level of evidence for the issue:
These require user interaction to reproduce – use full repro with video and step-by-step screenshots:
agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webmagent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-1.png
sleep 1
# Perform action (click, fill, etc.)
sleep 1
agent-browser --session {SESSION} screenshot {OUTPUT_DIR}/screenshots/issue-{NNN}-step-2.png
sleep 1
# ...continue until the issue manifestssleep 2
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.pngagent-browser --session {SESSION} record stopThese are visible without interaction – a single annotated screenshot is sufficient. No video, no multi-step repro:
agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}.pngWrite a brief description and reference the screenshot in the report. Set Repro Video to N/A.
For all issues:
Append to the report immediately. Do not batch issues for later. Write each one as you find it so nothing is lost if the session is interrupted.
Increment the issue counter (ISSUE-001, ISSUE-002, …).
Aim to find 5-10 well-documented issues, then wrap up. Depth of evidence matters more than total count – 5 issues with full repro beats 20 with vague descriptions.
After exploring:
### ISSUE- block must be reflected in the totals.agent-browser --session {SESSION} closesnapshot -i — for finding clickable/fillable elements (buttons, inputs, links)snapshot (no flag) — for reading page content (text, headings, data lists)rm screenshots, videos, or the report mid-session. Do not close the session and restart. Work forward, not backward.type instead of fill – it types character-by-character. Use fill only outside of video recording when speed matters.| Reference | When to Read |
|---|---|
| references/issue-taxonomy.md (opens in a new tab) | Start of session – calibrate what to look for, severity levels, exploration checklist |
| Template | Purpose |
|---|---|
| templates/dogfood-report-template.md (opens in a new tab) | Copy into output directory as the report file |
Install this repository
npx skills add vercel-labs/agent-browser/plugin marketplace add vercel-labs/agent-browserSkills install per repository, not per chapter — the CLI has no documented per-skill form, so we do not print one.
Systematically explore and test a web application to find bugs, UX issues, and other problems. Use when asked to "dogfood", "QA", "exploratory test", "find issues", "bug hunt", "test this app/site/platform", or review the quality of a web application. Produces a structured report with full reproduction evidence -- step-by-step screenshots, repro videos, and detailed repro steps for every issue -- so findings can be handed directly to the responsible teams.
The verbatim description from this skill’s front matter — the string an agent matches on to decide whether to load it.
Bash(agent-browser:*),Bash(npxagent-browser:*)skill-data/dogfood/SKILL.mdmain, last pushed 8 August 2026.SKILL.md, not by matching a directory convention. 2 distinct layouts observed: skill-data/*/SKILL.md, skills/*/SKILL.md.h1 and no skipped levels:.claude-plugin/marketplace.json by Vercel, declaring 1 plugin. It is read for editorial metadata only — never as the skill index, which is always the repository tree.sleep 1sleep 2agent-browser commands in a single shell call when they are independent (e.g., agent-browser ... screenshot ... && agent-browser ... console). Use agent-browser --session {SESSION} scroll down 300 for scrolling – do not use key or evaluate to scroll..md2 files · 5 KB
Everything this skill ships beside its prose. All of it is set here, as subchapters of chapter 4.
Documentation the agent loads on demand, rather than up front.
Templates, schemas and fixtures the skill draws on.