Preface¶

When using an AI programming assistant to modify frontend code, you often get stuck at the same step: after the code is changed, the agent cannot clearly tell whether the function actually works. If you ask it to “test the login page for me”, it will mostly just read the source code, guess the DOM structure, or suggest you manually open the browser and click through. Static HTML is okay, but once you encounter single-page applications that require JavaScript rendering like React or Vue, you cannot confirm what the page actually looks like just by reading files.

Anthropic provides an Agent Skill called webapp-testing in their official skills repository, which packages Playwright browser automation and local server lifecycle management into a reusable workflow. After loading this Skill, the agent can write Python scripts to start a local dev server, launch headless Chromium, take screenshots, capture console logs, and verify UI behavior following the “recon first, then act” pattern. For developers who frequently modify frontend code and want the agent to perform autonomous regression testing, this is far more reliable than repeatedly saying “help me check the page”.

What is this¶

webapp-testing is an example Skill from the Anthropic official skills repository, following the universal SKILL.md format, and can be used in tools that support Agent Skills such as Cursor, Claude Code, and Claude.ai.

Its positioning is straightforward: use Python Playwright to interact with and test local web applications, supporting function validation, UI debugging, screenshot taking, and browser log viewing. The Skill package also includes the scripts/with_server.py helper script and several examples to teach the agent how to manage server startup and shutdown, select testing strategies, and avoid common dynamic page pitfalls.

Core Features and Highlights¶

1. Decision Tree: Separate Handling for Static Pages and Dynamic Apps¶

The Skill has a built-in selection logic, where the agent will first judge the page type before deciding the testing path:
- Static HTML: Directly read the HTML file to find selectors, and write Playwright scripts to access file:// or local services;
- Dynamic Web Application: If the service is not started, use with_server.py to start the dev server; if it is already running, follow the “reconnaissance - operation” process: first navigate and wait for networkidle, then take screenshots or check the DOM, find selectors from the rendered results, and finally perform operations such as clicking and filling out forms.

2. Server Lifecycle Management¶

scripts/with_server.py is the core auxiliary tool of the Skill, supporting the management of multiple local services at the same time (such as backend port 3000 + frontend port 5173), waiting for the ports to be ready before running the automation script, and automatically cleaning up processes after completion. The agent is explicitly required: first run --help to check the usage, treat the script as a black box call, do not read the source code first — because these scripts may be large, and directly putting them into the context will waste tokens.

3. Reconnaissance-Then-Action Mode¶

For dynamic single-page applications, the Skill emphasizes looking at the page clearly before taking action:

page.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()

Discover stable selectors (text=, role=, CSS, ID) from screenshots, DOM content and element lists, then write subsequent interaction logic. The official specially reminds: You must call wait_for_load_state('networkidle') before checking the DOM for dynamic applications, otherwise the obtained structure will be incomplete.

4. Example Scripts Covering Common Scenarios¶

The examples/ directory of the Skill provides three references:
- element_discovery.py: Scan buttons, links, and input boxes on the page;
- static_html_automation.py: Use file:// URL to test local static HTML;
- console_logging.py: Monitor and save browser console output to facilitate troubleshooting JS errors.

5. Best Practice Constraints¶

The Skill has clear specifications for the agent’s behavior: use sync_playwright() to write synchronous scripts; always launch Chromium in headless mode; close the browser after the operation is completed; prioritize using descriptive selectors; add wait_for_selector() or timeout waits when necessary.

Installation and Activation¶

Claude Code¶

The official Anthropic README provides a marketplace installation method. After registering the marketplace in Claude Code, install the example-skills plugin to use the example Skills in the repository (including webapp-testing):

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

After installation, you can directly mention it in the conversation, for example: “Use webapp-testing to help me verify the local frontend changes”.

Claude.ai and Claude API¶

The Claude.ai paid plan has built-in some example Skills; custom Skills can be uploaded according to Using skills in Claude. On the API side, you can use preset or custom Skills through the Skills API.

Cursor¶

Cursor supports the universal SKILL.md format. Place the Skill directory in the project-level .cursor/skills/ or global ~/.cursor/skills/ and the agent will automatically discover it:

git clone https://github.com/anthropics/skills.git
cp -r skills/skills/webapp-testing .cursor/skills/webapp-testing

You can also import the GitHub repository in Cursor’s Customize → Rules → Remote Rule (Github). Before using, you need to install the Playwright Python package and browser on your local machine:

pip install playwright
playwright install chromium

The agent will automatically load the Skill when the conversation context matches, or you can manually invoke it by entering /webapp-testing or @webapp-testing in the chat.

Typical Usage Examples¶

Single Server: Start Dev Server and Run Automation¶

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

Multiple Servers: Start Both Frontend and Backend¶

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

Only write the Playwright logic in the automation script, and the server will be hosted by the helper:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto('http://localhost:5173')
    page.wait_for_load_state('networkidle')
    # Write assertion, click, form filling and other logic here
    browser.close()

Capture Console Logs¶

console_logs = []

def handle_console_message(msg):
    console_logs.append(f"[{msg.type}] {msg.text}")

page.on("console", handle_console_message)
page.goto(url)
page.wait_for_load_state('networkidle')

Applicable Scenarios and Notes¶

Who is this suitable for:
- Local development of separated frontend and backend projects, requiring the agent to automatically run UI verification after modifying the code;
- Debugging the rendering timing and selector stability of single-page applications, requiring screenshots and DOM reconnaissance;
- Troubleshooting frontend JS errors, requiring the browser console output to be saved for analysis;
- Wanting to固化 the process of “testing local web applications” into a standard operation that the agent can repeatedly execute.

Things to note:
1. The Skill requires writing Python Playwright scripts, not the Node.js version of Playwright; you need to install the dependencies in advance in the running environment.
2. with_server.py and other bundled scripts should be used as black box calls, first run --help before executing, to avoid the agent reading large sections of source code into the context.
3. Be sure to wait for networkidle for dynamic pages, this is a Common Pitfall marked by the official, skipping this step will cause selector recognition failures.
4. The repository README states that these Skills are for demonstration and educational purposes, please fully test them in your own project before using them in a production environment.
5. This Skill is designed for local web applications; E2E testing for remote staging/production environments requires adjusting the URL and network policy yourself.

Summary¶

webapp-testing packages Playwright automated testing into an Agent Skill, solving the pain point of “AI modifies frontend code but cannot verify it by itself”. The decision tree helps you distinguish between static pages and dynamic applications, with_server.py manages multiple service startups and shutdowns, and the reconnaissance-then-action mode allows the agent to first look at the rendering results before writing interaction logic. If you are already using Cursor or Claude Code, put this Skill into .cursor/skills/ or the corresponding plugin, and next time after modifying the UI, directly ask the agent to run the script for verification, which is much more efficient than manually clicking through the browser.

Official address: https://github.com/anthropics/skills/tree/main/skills/webapp-testing

# webapp-testing: Let AI Agents Autonomously Validate Local Web Applications with Playwright