ASD

Dogfood

Explora y prueba sistemáticamente una aplicación web para encontrar bugs y problemas de UX, generando un reporte con capturas paso a paso, videos de reproducción y pasos detallados por cada hallazgo.

Oficial
Solicitabash(agent-browser:*)bash(npx agent-browser:*)
Estrellas
40.5k

en todo el repo

Actividad
40

0–100, la ruta de este skill

Actualizado
hace 4 meses

último commit aquí

Commits
0

últimos 90 días

Contexto
2.7k tok

115 tok en reposo

Paquete
3 archivos

15 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add vercel-labs/agent-browser --skill dogfood --agent claude-code

Se instala solo en este repositorio.

Qué hace

  • Systematically explores a web app using agent-browser to find bugs, UX issues, and other problems
  • Documents every issue with reproduction evidence: step-by-step screenshots, repro videos, and detailed repro steps
  • Produces a structured report file with severity counts and findings, saved to an output directory

Úsalo cuando

  • User asks to 'dogfood', 'QA', 'exploratory test', 'find issues', or 'bug hunt' a web app
  • User asks to 'test this app/site/platform' or review the quality of a web application

No lo uses cuando

    Qué lo activa

    Di cualquiera de estas frases y el agente debería cargar este skill.

    • Dogfood vercel.com
    • Haz una prueba exploratoria de http://localhost:3000
    • Encuentra bugs en la sección de billing
    • QA de esta plataforma y dame un reporte con evidencia

    SKILL.md

    En inglés

    Dogfood

    Systematically explore a web application, find issues, and produce a report with full reproduction evidence for every finding.

    Setup

    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.

    Workflow

    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 session
    

    1. Initialize

    mkdir -p {OUTPUT_DIR}/screenshots {OUTPUT_DIR}/videos
    

    Copy the report template into the output directory and fill in the header fields:

    cp {SKILL_DIR}/templates/dogfood-report-template.md {OUTPUT_DIR}/report.md
    

    Start a named session:

    agent-browser --session {SESSION} open {TARGET_URL}
    agent-browser --session {SESSION} wait --load networkidle
    

    2. Authenticate

    If 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 networkidle
    

    For 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.json
    

    3. Orient

    Take 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 -i
    

    Identify the main navigation elements and map out the sections to visit.

    4. Explore

    Read references/issue-taxonomy.md for the full list of what to look for and the exploration checklist.

    Strategy -- work through the app systematically:

    • Start from the main navigation. Visit each top-level section.
    • Within each section, test interactive elements: click buttons, fill forms, open dropdowns/modals.
    • Check edge cases: empty states, error handling, boundary inputs.
    • Try realistic end-to-end workflows (create, edit, delete flows).
    • Check the browser console for errors periodically.

    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} console
    

    Use 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.

    5. Document Issues (Repro-First)

    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:

    Interactive / behavioral issues (functional, ux, console errors on action)

    These require user interaction to reproduce -- use full repro with video and step-by-step screenshots:

    1. Start a repro video before reproducing:
    agent-browser --session {SESSION} record start {OUTPUT_DIR}/videos/issue-{NNN}-repro.webm
    
    1. Walk through the steps at human pace. Pause 1-2 seconds between actions so the video is watchable. Take a screenshot at each step:
    agent-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 manifests
    
    1. Capture the broken state. Pause so the viewer can see it, then take an annotated screenshot:
    sleep 2
    agent-browser --session {SESSION} screenshot --annotate {OUTPUT_DIR}/screenshots/issue-{NNN}-result.png
    
    1. Stop the video:
    agent-browser --session {SESSION} record stop
    
    1. Write numbered repro steps in the report, each referencing its screenshot.

    Static / visible-on-load issues (typos, placeholder text, clipped text, misalignment, console errors on load)

    These 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}.png
    

    Write a brief description and reference the screenshot in the report. Set Repro Video to N/A.


    For all issues:

    1. 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.

    2. Increment the issue counter (ISSUE-001, ISSUE-002, ...).

    6. Wrap Up

    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:

    1. Re-read the report and update the summary severity counts so they match the actual issues. Every ### ISSUE- block must be reflected in the totals.
    2. Close the session:
    agent-browser --session {SESSION} close
    
    1. Tell the user the report is ready and summarize findings: total issues, breakdown by severity, and the most critical items.

    Guidance

    • Repro is everything. Every issue needs proof -- but match the evidence to the issue. Interactive bugs need video and step-by-step screenshots. Static bugs (typos, placeholder text, visual glitches visible on load) only need a single annotated screenshot.
    • Verify reproducibility before collecting evidence. Before recording video or taking screenshots, verify the issue is reproducible with at least one retry. If it can't be reproduced consistently, it's not a valid issue.
    • Don't record video for static issues. A typo or clipped text doesn't benefit from a video. Save video for issues that involve user interaction, timing, or state changes.
    • For interactive issues, screenshot each step. Capture the before, the action, and the after -- so someone can see the full sequence.
    • Write repro steps that map to screenshots. Each numbered step in the report should reference its corresponding screenshot. A reader should be able to follow the steps visually without touching a browser.
    • Use the right snapshot command.
      • snapshot -i — for finding clickable/fillable elements (buttons, inputs, links)
      • snapshot (no flag) — for reading page content (text, headings, data lists)
    • Be thorough but use judgment. You are not following a test script -- you are exploring like a real user would. If something feels off, investigate.
    • Write findings incrementally. Append each issue to the report as you discover it. If the session is interrupted, findings are preserved. Never batch all issues for the end.
    • Never delete output files. Do not rm screenshots, videos, or the report mid-session. Do not close the session and restart. Work forward, not backward.
    • Never read the target app's source code. You are testing as a user, not auditing code. Do not read HTML, JS, or config files of the app under test. All findings must come from what you observe in the browser.
    • Check the console. Many issues are invisible in the UI but show up as JS errors or failed requests.
    • Test like a user, not a robot. Try common workflows end-to-end. Click things a real user would click. Enter realistic data.
    • Type like a human. When filling form fields during video recording, use type instead of fill -- it types character-by-character. Use fill only outside of video recording when speed matters.
    • Pace repro videos for humans. Add sleep 1 between actions and sleep 2 before the final result screenshot. Videos should be watchable at 1x speed -- a human reviewing the report needs to see what happened, not a blur of instant state changes.
    • Be efficient with commands. Batch multiple agent-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.

    References

    Reference When to Read
    references/issue-taxonomy.md Start of session -- calibrate what to look for, severity levels, exploration checklist

    Templates

    Template Purpose
    templates/dogfood-report-template.md Copy into output directory as the report file

    Reproducido de vercel-labs/agent-browser bajo licencia Apache-2.0. Leer esta página en markdown.

    Archivos

    3 archivos en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

    Antes de instalar

    Requiere el binario agent-browser instalado (usar directamente, no vía npx) y credenciales de acceso si la app requiere login.

    Detalles

    Categoría
    Testing y QA
    Licencia
    Apache-2.0
    Recursos incluidos
    referencias
    Código fuente
    Ver SKILL.md

    Más de vercel-labs/agent-browser

    Este repo incluye 8 skills. Si instalas uno, normalmente ya tienes los demás.

    Core

    40.5k

    Guía central de uso de agent-browser: snapshots con refs, navegación, interacción con elementos, extracción de datos, capturas, pestañas, formularios, auth, esperas y sesiones paralelas.

    Costo de contexto al activarse
    7.4k tok
    Tamaño del paquete
    14 archivos
    Última actualización
    hace 3 días
    Oficialherramientas desarrollo

    CLI de automatización de navegador para agentes de IA: navega, rellena formularios, hace clic, captura pantallas, extrae datos, prueba apps y automatiza Electron o Slack.

    Costo de contexto al activarse
    841 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 26 días
    Oficialtesting qa

    Reverse-engineerea la API interna de un sitio grabando el tráfico del navegador en un HAR, y genera un cliente o CLI standalone que llama a los endpoints sin necesitar navegador después.

    Costo de contexto al activarse
    1.3k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 26 días
    Oficialautomatizacion

    Ejecuta agent-browser + Chrome dentro de microVMs de Vercel Sandbox para automatización de navegador desde cualquier app desplegada en Vercel.

    Costo de contexto al activarse
    1.9k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    Oficialautomatizacion

    Automatiza apps de escritorio Electron (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) usando agent-browser vía Chrome DevTools Protocol.

    Costo de contexto al activarse
    1.7k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 4 meses
    Oficialherramientas desarrollo

    Ejecuta agent-browser en navegadores en la nube de AWS Bedrock AgentCore; úsalo para automatización de navegador respaldada por infraestructura AWS con credenciales AWS.

    Costo de contexto al activarse
    1k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    hace 4 meses
    Oficialdevops infraestructura

    Skills relacionados

    Úsalo al completar tareas, implementar features mayores, o antes de mergear, para verificar que el trabajo cumple los requisitos.

    Costo de contexto al activarse
    739 tok
    Tamaño del paquete
    2 archivos
    Última actualización
    anteayer
    testing qa

    Úsalo antes de afirmar que un trabajo está completo, corregido o pasando, antes de hacer commit o crear PRs: exige ejecutar comandos de verificación y confirmar la salida antes de cualquier afirmación de éxito.

    Costo de contexto al activarse
    912 tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    testing qa

    Úsalo al recibir feedback de code review, antes de implementar sugerencias, sobre todo si el feedback parece poco claro o técnicamente cuestionable: exige rigor técnico y verificación, no acuerdo performativo ni implementación ciega.

    Costo de contexto al activarse
    1.6k tok
    Tamaño del paquete
    1 archivo
    Última actualización
    el mes pasado
    testing qa