Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Webapp Testing (Playwright)

Official

Official skill that lets Claude drive a real headless browser with Playwright to click, screenshot, and read console logs while testing your local web app.

Dev & CodingIntermediate★ 167,132⑂ 19,920AI score 9/10Last updated: Aug 7, 2026

What it does

An official Anthropic skill that enables Claude Code to test locally running web applications through a real browser (headless Chromium).

  • Writes native Python Playwright scripts tailored to the task instead of relying on rigid templates.
  • Handles server lifecycle: the bundled scripts/with_server.py boots one or more dev servers (e.g. backend + frontend), waits for the ports to be ready, runs your automation, then tears everything down.
  • Reconnaissance-then-action pattern: wait for networkidle → screenshot/inspect DOM → discover selectors → act, which avoids the classic "element not found" failures on dynamic SPAs.
  • Debug artifacts: full-page screenshots, console log capture, and examples for discovering buttons, links, and inputs.

Who it's for

  • Frontend developers on React/Vue/Svelte who want UI behavior verified automatically
  • Full-stack devs who want Claude to confirm a fix actually works in the browser
  • Teams that need quick E2E test drafts or regression check scripts
  • Anyone validating static HTML prototypes via file:// URLs

Example uses

  1. Login flow check: "Start npm run dev on 5173, log in with the test account, and screenshot the dashboard" → skill uses with_server.py, fills the form, saves images to /tmp.
  2. Console error triage: "There's a red console error on page load — find the cause" → a script attaches a console listener, collects logs, and points to the offending file.
  3. Backend + frontend E2E: launch backend on 3000 and frontend on 5173 together to confirm API data renders correctly.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/webapp-testing folder from the GitHub repo anthropics/skills into my ~/.claude/skills/webapp-testing/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/webapp-testing ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Prerequisites: make sure Python 3 and Node.js are installed (python3 --version).
  2. Install Playwright: run pip install playwright, then python -m playwright install chromium to fetch the browser binary.
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Clone the repo: git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills
  5. Copy the skill: cp -r /tmp/anthropic-skills/skills/webapp-testing ~/.claude/skills/
  6. Verify: ls ~/.claude/skills/webapp-testing should show SKILL.md, scripts/, and examples/.
  7. Use it: open Claude Code inside your project and ask something like "spin up the dev server and screenshot the login page" — the skill triggers automatically.
View source on GitHub ↗