Web app testing skill

This skill lets Claude open the web app you are building in a real (headless) browser, click through it and report what broke. It is the “did that actually work?” step after Claude writes code, done by Claude itself instead of you refreshing the page.

What it does (plain English)

The skill tells Claude to write short Python scripts using Playwright, a free browser-automation library from Microsoft. Headless means the browser runs without a window. The core of the skill is a decision tree:

• Static HTML file? Read the file to find buttons and fields, then script against them.
• Dynamic app, server not running? Use the bundled with_server.py helper to start it.
• Server already running? Go straight to “reconnaissance, then action”: load the page, wait until network activity settles, take a screenshot or read the page structure, find the right selectors, then act.

The one mistake it warns about by name: inspecting a dynamic page before it has finished loading. Claude is told to wait for networkidle first.

with_server.py can start several servers at once, for example a backend on port 3000 and a frontend on port 5173, wait until they are up, run the test script, then shut everything down:

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

Three example scripts show common patterns: finding all buttons, links and inputs; automating a local HTML file; and capturing browser console messages.

Is it for you?

Yes if you build web apps with Claude Code and keep finding out about broken buttons only after you deploy. It is a good habit to ask for a quick browser check at the end of each feature.

It is a Claude Code skill in practice. It needs a local server and a browser on your computer, which claude.ai’s chat sandbox does not give you for your own project. If you want Claude to drive a browser through tools rather than scripts, the Playwright MCP server does that.

What you can do with it

1. Smoke test after a change. “Use the webapp-testing skill: start npm run dev, open the home page, click every button in the nav and tell me which ones error.”
2. Check a form. “Fill the signup form with a test email and confirm the success message appears.”
3. Catch console errors. “Load the dashboard and list any console errors or warnings.”
4. Screenshots for review. “Take full-page screenshots of /, /pricing and /contact at 1920 by 1080.” The console example script uses that viewport.
5. Backend plus frontend. “Start the API and the web app together and test the login flow end to end.”

How to set it up

1. In Claude Code, run /plugin marketplace add anthropics/skills
2. Run /plugin install example-skills@anthropic-agent-skills and choose a scope. This installs 12 example skills; Claude Code estimates webapp-testing at about 80 tokens always loaded and about 1.2k tokens when used.
3. If you only want this skill, copy the webapp-testing folder into ~/.claude/skills/webapp-testing/ instead.
4. Make sure Python can run Playwright with Chromium. Playwright’s documentation gives pip install playwright followed by playwright install to download the browsers. The skill itself does not list install steps, so ask Claude to check and install these if a script fails.
5. Start a session in your project and ask for a browser test.

We confirmed the marketplace add and plugin install commands complete in Claude Code 2.1.302 (2026-10-18). We did not run a browser test with the skill.

Watch out for

• Scripts run on your machine. Claude writes and runs Python and starts your dev servers through the Bash tool. Claude Code asks permission for commands; read what it is about to run.
• The helper is a black box on purpose. The skill tells Claude to run with_server.py --help instead of reading its source, to save context. If something odd happens, you can still read the script yourself.
• Local only. It is built for apps on localhost. Pointing it at sites you do not own may break their terms of use.
• Screenshots land in temporary folders. The examples save to /tmp. Ask Claude to save into your project if you want to keep them.
• Demo status. The anthropics/skills README describes all its skills as demonstrations; treat results as a helpful check, not a full test suite.

Alternatives

• Playwright MCP server if you want Claude to control a browser step by step through tools, including in Claude Desktop.
• Frontend design skill to improve how the page looks before you test it.
• Fetch MCP server if you only need a page’s text, not clicks.