How to Install and Use the Webapp Testing Skill in Claude Code (2026)

The gap between "the agent says it fixed the bug" and "the bug is actually fixed" is where a lot of AI-assisted development falls apart. The agent reads the code, reasons that the change should work, and reports done. Whether the button actually clicks in a real browser is a separate question it never checked.

The Webapp Testing skill closes that gap. It's Anthropic's official skill for driving a real browser through Playwright, so Claude Code can open your running app, click around, fill forms, take screenshots, and confirm a change works instead of assuming it does. It's MIT-licensed and audited, which makes it one of the safer official skills to start with. Here's how to install it and put it to work.

What this skill does

At its core, the skill teaches Claude Code to test web apps the way a person would, by actually using them. The listed capabilities are worth knowing before you install:

• Playwright tests: drives a real browser to interact with your app
• Screenshot capture: takes screenshots so the agent and you can see the actual rendered state
• Accessibility testing: checks for common accessibility issues
• Auto-fix iteration: runs a test, sees the failure, edits the code, and re-runs until it passes
• CI integration: fits into continuous integration pipelines

The auto-fix loop is the standout. Instead of you copying an error back to the agent, the skill lets Claude Code see the failed test result directly, change the code, and try again on its own.

Before you install

You need a few things in place:

1. Claude Code installed and working from your terminal. 2. Node.js, because Playwright runs on it. 3. A web app you can run locally, with a dev server you can point the tests at (something like localhost:3000).

Playwright also needs browser binaries. The skill's setup will prompt for these, or you can install them ahead of time with npx playwright install. Doing it first avoids a mid-run pause while it downloads.

Step 1: Install the skill

From your terminal, run:

claude skill add anthropics/skills/webapp-testing

This pulls the skill from the official Anthropic skills repository: github.com/anthropics/skills. Because it's an Anthropic skill with an audited security status and an MIT license, you're starting from a trustworthy base. Even so, it's good practice to open the SKILL.md in the repo and read what the skill instructs the agent to do before you run it on a real project.

Step 2: Verify it's available

Confirm Claude Code can see the skill:

claude skill list

You should see webapp-testing in the output. If it's missing, check that the install command finished without errors and that you're running the same Claude Code installation you installed the skill into.

Step 3: Start your app, then point the agent at it

Get your dev server running in one terminal:

npm run dev

Then, in Claude Code, describe what you want tested in plain language. The skill activates when the task involves browser testing. For example:

> Test that the login form at localhost:3000/login shows an error when I submit an empty password, and take a screenshot of the error state.

Claude Code will open a browser through Playwright, navigate to the page, attempt the action, capture a screenshot, and report what it saw. The screenshot matters: it's the difference between the agent telling you it works and showing you it works.

Step 4: Use the auto-fix loop

This is where the skill earns its place. Give the agent a failing scenario and let it iterate:

> The signup button isn't disabled while the form is submitting. Write a test that checks the button is disabled during submission, then fix the code until the test passes.

The skill lets Claude Code write the test, run it, watch it fail, edit your component, and re-run, looping until the test passes or it decides it's stuck. You stay in the loop by reviewing the diff it produces, but you're no longer the messenger carrying error text back and forth.

A word of caution: the auto-fix loop edits your code. Run it on a branch or a Git worktree, not directly on main, so you can review and discard freely. This pairs naturally with the Using Git Worktrees skill for keeping experiments isolated.

Step 5: Wire it into CI

Once you trust the tests the agent writes, the Playwright tests it generates are standard Playwright tests, which means they run in CI like any other. Add them to your pipeline so the same browser checks run on every pull request. This turns one-off agent testing into a permanent safety net, which is the real payoff over time.

Webapp Testing skill vs Playwright MCP

People often ask whether they need this skill or the Playwright MCP server, since both involve Playwright. They solve overlapping problems differently.

The Webapp Testing skill is a procedure: it teaches the agent a testing workflow, including the auto-fix loop and accessibility checks, oriented around verifying your app. The Playwright MCP server is a connection layer that gives the agent general browser-control access for broader automation, not just testing.

If your goal is verifying that your web app works, start with the skill. If you need general-purpose browser automation across many sites and tasks, look at the MCP server. Our Playwright MCP vs Puppeteer MCP comparison covers that side in more depth.

Common problems

Browsers won't launch: run npx playwright install to fetch the browser binaries the skill needs.

The agent tests the wrong URL: be explicit about the address, including the port, in your instructions. "localhost:3000/login" beats "the login page."

Tests pass locally but fail in CI: this is usually a timing or environment difference, not a skill problem. Check that your CI starts the dev server before the tests run and waits for it to be ready.

What a good test session looks like

The first time you run the skill, resist the urge to ask for a giant test suite. Start with one specific, verifiable behavior and watch how the agent handles it. A good opening request is narrow: check that a form rejects an invalid email, or that a protected page redirects a logged-out user to the login screen. You learn more from one clean pass than from a vague "test my app."

Pay attention to the screenshots it returns. They're your proof, and they catch a class of problem the agent can miss: the test technically passes, but the error message renders in white text on a white background, or a modal opens off-screen. The agent confirms the logic; the screenshot shows you the human-visible result. When the two disagree, the screenshot wins.

As you build confidence, hand it harder scenarios and let the auto-fix loop work. The pattern that pays off is describing the behavior you want, not the code change you imagine. "The cart total should update when I change quantity" gives the agent a testable target. "Add a useEffect to the cart component" pre-decides the fix and wastes the skill's main strength, which is verifying the outcome rather than guessing at the implementation.

FAQ

Is the Webapp Testing skill free? Yes. It's an official Anthropic skill, MIT-licensed, and free to install. You only pay for your normal Claude Code usage and whatever your CI provider charges to run the tests.

Do I need to know Playwright to use it? No. The skill writes the Playwright code for you based on plain-language instructions. Knowing Playwright helps you review and tweak the tests it generates, but you can get value without writing any test code yourself.

Is it safe to let the skill edit my code? The skill itself is audited and MIT-licensed, so the risk is in the auto-fix loop editing files, not in the skill being malicious. Run it on a branch or Git worktree so every change is reviewable and reversible before it reaches your main branch.

Can it test something other than a local app? It can drive a browser against any URL it can reach, including staging environments. Local testing is the common case because it pairs with active development, but pointing it at a deployed staging URL works the same way.

How is this different from just asking Claude to write tests? Asking for tests gives you code the agent believes is correct. This skill actually runs those tests in a real browser, sees them pass or fail, and iterates on failures. The verification step, and the screenshots that prove it, are what you don't get from generation alone.