skills/webapp-testing

🔗 View on GitHub: anthropics/skills/webapp-testing

🚀 Quick Installation

Toolkit for testing local web applications using Playwright.

Claude Code Plugin

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

What It Does

A toolkit for interacting with and testing local web applications using Playwright. Supports:

• ✅ Verifying frontend functionality
• 🐛 Debugging UI behavior
• 📸 Capturing browser screenshots
• 📋 Viewing browser logs

Key Features

Helper Scripts

• scripts/with_server.py — Manages server lifecycle (supports multiple servers)

Workflow

1. Navigate and wait for networkidle
2. Take screenshot or inspect DOM
3. Identify selectors from rendered state
4. Execute actions with discovered selectors

Example Usage

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

# Multiple servers (backend + frontend)
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

Playwright Script Template

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')  # CRITICAL: Wait for JS
    # ... automation logic
    browser.close()

Best Practices

• ✅ Always wait for networkidle before inspecting dynamic apps
• ✅ Use bundled scripts as black boxes (run --help first)
• ✅ Use descriptive selectors: text=, role=, CSS, or IDs
• ✅ Always close the browser when done

📚 What are skills? | 🎓 Agent Skills Spec