dogfood

Dogfood: Systematic Web Application QA Testing

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.

Prerequisites

• Browser toolset must be available (browser_navigate, browser_snapshot, browser_click, browser_type, browser_vision, browser_console, browser_scroll, browser_back, browser_press, browser_close)
• A target URL and testing scope from the user

Inputs

The user provides:

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

Workflow

Follow this 5-phase systematic workflow:

Phase 1: Plan

1. Create the output directory structure:

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

2. Identify the testing scope based on user input.
3. 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)

Phase 2: Explore

For each page or feature in your plan:

1. Navigate to the page:

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

2. Take a snapshot to understand the DOM structure:

   browser_snapshot()
   

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

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