Webapp Testing Dispatcher

Orchestrate end-to-end, integration, and component tests for web applications with browser automation, API mocking, and visual regression support.

When to Use This Command

Run this command when...

• You need to run browser-based tests for a web application using Playwright, Cypress, or Selenium
• You want to validate both frontend rendering and backend API behavior together
• You are checking for visual regressions by comparing screenshots against baselines

Avoid this command when...

• You only need unit tests that do not require a browser or server
• Your application is a CLI tool or library without a web interface

Quick Start

Copy
# .claude/commands/webapp-testing-dispatcher.md
---
allowed-tools: ["Bash", "Read", "Glob"]
---
Detect the web testing framework (Playwright/Cypress/Selenium).
Start the dev server if needed, run the test suite, capture
screenshots for visual regression, and report results.

Example usage:

/webapp-testing-dispatcher --suite e2e
/webapp-testing-dispatcher --component Button --visual

Example output:

Dev server: started on http://localhost:3000
Framework: Playwright
Suite: e2e (14 tests)

  [PASS] homepage loads correctly          (1.2s)
  [PASS] login flow completes              (3.4s)
  [PASS] dashboard renders data            (2.1s)
  [FAIL] checkout visual regression        (diff: 2.3%)

Results: 13 passed, 1 failed
Screenshots: saved to ./test-results/screenshots/

Core Concepts

Concept	Description
Browser automation	Controls Chrome, Firefox, or WebKit for realistic user testing
API mocking	Intercepts network requests to return controlled responses
Visual regression	Compares screenshots pixel-by-pixel against stored baselines
Dev server mgmt	Starts and stops the application server around test execution

Start Server --> Launch Browser --> Run Tests
                     |                  |
              Mock API calls     Capture Screenshots
                                       |
                              Compare with Baselines
                                       |
                              Report Diffs + Results

Configuration

Option	Default	Description
suite	all	Test suite to run (e2e, integration, component)
browser	chromium	Browser engine (chromium, firefox, webkit)
visual	false	Enable visual regression screenshot comparison
base-url	auto	Override the application base URL
headless	true	Run browser without visible window

Best Practices

1. Run headless in CI -- headed mode is useful for debugging locally but slows down pipelines.
2. Mock external APIs -- tests should not depend on third-party services being online and available.
3. Update baselines intentionally -- when visual diffs are expected, update screenshots explicitly rather than auto-accepting.
4. Parallelize test files -- most frameworks support running test files in parallel to reduce total time.
5. Clean state between tests -- clear cookies, localStorage, and database fixtures to prevent cross-test contamination.

Common Issues

1. Dev server fails to start -- Check that the port is not already in use and that all dependencies are installed.
2. Visual diff threshold too strict -- Anti-aliasing and font rendering differ across operating systems. Set a 1-2% tolerance.
3. Tests time out waiting for elements -- Use framework-native wait utilities (e.g., waitForSelector) instead of fixed sleep delays.