Pattern: Browser-Based QA

Pattern: Browser-Based QA

Category: Quality Assurance Source: garrytan/gstack (/qa, /browse, /qa-only) Status: Cataloged Evaluation: RD-0013

When to Use

When a digital talent or factory deliverable produces visual output (HTML pages, dashboards, interactive diagrams, web applications) and needs validation in an actual browser rather than just markup inspection. Essential for client-facing deliverables where layout, responsiveness, and runtime behavior matter.

How It Works

  • Browser automation layer: Use Playwright to launch a real Chromium instance (headed or headless)
    • Navigate to the target URL or local file
    • Execute predefined test scenarios (click flows, form fills, navigation)
    • Capture screenshots at each step for visual comparison
  • Co-presence mode: Agent controls a visible browser window so a human can observe actions in real-time
    • Green visual indicator shows agent is in control
    • Handoff command transfers control to the human (for CAPTCHAs, MFA, manual verification)
  • Regression testing: Generate test scripts from QA runs that can be replayed later
    • Compare screenshots against baselines for visual regression
    • Check console for JavaScript errors, failed network requests
  • QA-only mode: Report bugs without making code changes — useful for review gates

Example

The factory builds an interactive architecture explorer (HTML) for STM. Before delivery, the browser QA pattern launches the HTML file in Chromium, clicks through all nodes in the diagram, verifies tooltips render correctly, checks that filters work, captures screenshots at each state, and flags any console errors. The screenshots become part of the delivery package as proof of testing.

Tradeoffs

Pro Con
Catches visual bugs that markup inspection misses Requires Playwright dependency and Chromium install
Provides screenshot evidence for client deliveries Slower than static analysis — real browser startup time
Enables testing of interactive/JS-heavy deliverables Platform-specific issues (WSL, headless environments)
Human handoff handles auth and CAPTCHA gracefully Test scripts need maintenance as UI changes

Factory Usage

  • Quinn (QA Engineer): Primary owner — validates HTML deliverables before client handover
  • Wesley (Web Designer): Validates intranet pages and interactive docs
  • Diego (Deployment Specialist): Post-deploy visual smoke tests
  • Production lines: Any digital talent that outputs web artifacts