Webapp Testing

What it does

Activates when you ask Claude to test, debug, or interact with a locally running web application. Claude writes native Python Playwright scripts that launch a headless Chromium browser, navigate to your dev server, capture screenshots, inspect the DOM, and read console logs. It uses a bundled with_server.py helper to manage one or more dev servers during the run so the automation script only contains Playwright logic. Reach for it when you need Claude to verify frontend behavior end-to-end rather than reason about code in isolation.

Use cases

• Verify a fix in a running React or Vite app by having Claude spin up npm run dev, load a specific route, click through a flow, and screenshot the result before and after your change.
• Debug a UI issue reported by a user by asking Claude to reproduce the steps in Playwright, capture full-page screenshots, and dump the browser console logs to identify JS errors or failed network calls.
• Smoke-test a full-stack setup by running a Python backend on port 3000 and a frontend on port 5173 together via with_server.py, then walking through a login-and-submit flow to confirm the integration works.

When to use it

• You have a local dev server (or can start one with a single command) and want Claude to interact with the rendered app, not just the source.
• You need visual evidence — screenshots or DOM snapshots — that a change works.
• You want to capture browser console errors or network failures that only appear at runtime.
• You are iterating on frontend behavior and want Claude to reconnoiter the page before writing assertions.

When NOT to use it

• You are testing a production or remote site — this skill is scoped to localhost workflows.
• You need a full CI test suite with fixtures, retries, and reporting; use a dedicated Playwright or Vitest setup instead.
• Your app requires a real browser UI (non-headless) for the check, e.g. video playback or device sensors.
• You only need to read static HTML — Claude can inspect the file directly without spinning up a browser.

Installation

/plugin install webapp-testing@anthropic-agent-skills

If you haven’t added the Anthropic marketplace yet, run this first:

/plugin marketplace add anthropics/skills

After install, just mention it in conversation:

Use the webapp-testing skill to start my Vite dev server on port 5173, load the /dashboard route, click the 'New Project' button, and screenshot the resulting modal.

Troubleshooting

Selectors return empty or the screenshot shows a blank page The DOM was inspected before the app finished rendering. Make sure the script calls page.wait_for_load_state('networkidle') after page.goto(...) on any dynamic app so JavaScript has time to mount components before selectors are queried.

with_server.py reports the port is already in use A previous run left the dev server alive, or you already started it manually. Kill the existing process on that port (lsof -i :5173 then kill), or drop the --server flag and let Playwright connect to the already-running instance.

Claude keeps reading the helper script’s source into context Tell it to treat scripts/with_server.py as a black box: run python scripts/with_server.py --help first and invoke it directly. The skill instructions warn against ingesting the script because it is large and pollutes the context window.

Chromium fails to launch in a sandboxed or container environment Install the Playwright browser binaries and system dependencies with python -m playwright install --with-deps chromium. In restricted containers you may also need to pass args=['--no-sandbox'] to p.chromium.launch(...).