anthropic-webapp-testing

---
name: anthropic-webapp-testing
description: "Use when testing a local web app with Anthropic's official Playwright skill — manages dev servers, drives the browser, captures screenshots, and inspects DOM/console."
source: https://github.com/anthropics/skills/tree/main/skills/webapp-testing
generated: 2026-05-17T04:18:10.928Z
category: tool
audience: engineers
---

## When to use

- Verifying a feature on a local Next.js, Vite, or static dev server
- Debugging UI state by inspecting the rendered DOM after JS runs
- Capturing screenshots as evidence of frontend behavior
- Watching browser console output during automation
- Spinning up one or more dev servers for the duration of a test
- Reading static HTML directly vs driving a dynamic SPA

## Key concepts

### Python Playwright scripts

The skill is built on native Python Playwright (sync_playwright), not the JS port. Agents author small Python scripts per task rather than pre-built test suites, then execute them against the local app.

### Decision tree

The recommended workflow: determine if the app is static HTML (read directly) or dynamic; if dynamic, check whether the server is running; if not, use with_server.py to manage lifecycle; do reconnaissance (screenshot/DOM) before actions; then identify selectors from rendered state.

### with_server.py helper

A bundled script under scripts/ that starts a dev server, waits for it to be ready, runs the automation script, and tears down the server. Supports single or multiple concurrent servers. Treat it as a black box — always invoke with --help first.

### networkidle wait

Before inspecting the DOM on a dynamic app, call page.wait_for_load_state('networkidle'). This ensures JavaScript has finished loading data and rendering before the agent picks selectors, preventing incomplete element discovery.

### Reconnaissance-first pattern

Take a screenshot or DOM snapshot before clicking anything. Selectors should come from what the page actually renders, not assumptions — this avoids brittle automation against stale templates.

## API reference

```
python scripts/with_server.py --server <cmd> --port <n> -- <automation>
```

Start a local dev server, wait until it's ready on the given port, run the automation script, then shut the server down.

```
python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
```

```
sync_playwright() context
```

Open a synchronous Playwright session, launch a browser, drive the page, and close everything explicitly.

```
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("http://localhost:5173")
    page.wait_for_load_state("networkidle")
    page.screenshot(path="/tmp/home.png")
    browser.close()
```

```
page.wait_for_load_state('networkidle')
```

Block until the page has no in-flight network requests for 500ms — required before DOM inspection on dynamic apps.

```
page.goto(url)
page.wait_for_load_state("networkidle")
# now safe to query selectors
```

```
Selector strategies: text=, role=, css, ids
```

Prefer descriptive, semantic selectors over brittle xpath; the skill recommends text=, role=, plain CSS, and IDs.

```
page.get_by_role("button", name="Sign in").click()
page.locator("text=Welcome").wait_for()
page.locator("#email").fill("a@b.com")
```

## Gotchas

- Do not inspect the DOM before page.wait_for_load_state('networkidle') on dynamic apps — element discovery will be incomplete
- Treat bundled scripts as black boxes — read --help and invoke directly rather than editing or importing them
- Always close browsers explicitly with browser.close() to avoid leaking processes on the dev machine
- Static HTML pages should be read directly, not driven through Playwright — pick the right path in the decision tree
- with_server.py is the only supported way to manage server lifecycle for the skill — don't hand-roll background processes
- The skill is Python-based — JS Playwright bindings won't share its helpers or conventions

---
Generated by SkillMake from https://github.com/anthropics/skills/tree/main/skills/webapp-testing on 2026-05-17T04:18:10.928Z.
Verify against source before relying on details.

File: ~/.claude/skills/anthropic-webapp-testing/SKILL.md