WebApp Testing Skill

Overview

WebApp Testing Skill is one of Anthropic's official Claude Skills, designed for interacting with and testing local web applications using Playwright. This skill provides comprehensive tools and patterns for verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

The skill emphasizes a reconnaissance-then-action approach for dynamic web applications, along with helper scripts that manage server lifecycle automatically, making it easy to write focused test scripts without worrying about infrastructure.

Core Features

1. Playwright Automation

Complete browser automation using Playwright:

• Navigate and interact with web pages
• Click buttons, fill forms, submit data
• Wait for elements and page states
• Capture screenshots and page content
• Monitor console logs and network activity

2. Server Lifecycle Management

Helper script (with_server.py) that handles:

• Single Server: Start one development server
• Multiple Servers: Start backend + frontend simultaneously
• Port Management: Automatic port availability detection
• Automatic Cleanup: Graceful server shutdown after tests

3. Decision Tree for Approach Selection

Clear guidance on choosing the right testing approach:

• Static HTML: Read file directly, then write Playwright script
• Dynamic Webapp: Use server helper + reconnaissance pattern
• Already Running: Navigate, wait for networkidle, then interact

4. Reconnaissance-Then-Action Pattern

For dynamic applications:

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

5. Example Scripts

Reference implementations for common patterns:

• element_discovery.py: Finding buttons, links, and inputs
• static_html_automation.py: Using file:// URLs for local HTML
• console_logging.py: Capturing console logs during automation

Use Cases

• Frontend Testing: Verify UI functionality and user flows
• Regression Testing: Ensure changes don't break existing features
• Cross-Browser Testing: Test across Chromium, Firefox, WebKit
• Visual Testing: Capture screenshots for visual regression
• Integration Testing: Test frontend-backend integration
• Debugging: Investigate UI issues and behavior
• Demo Recording: Capture interaction flows

Technical Implementation

Server Management

# Single server
python scripts/with_server.py --server "npm run dev" --port 5173 -- python test.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 test.py

Playwright Script Structure

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 for dynamic apps
    # ... your automation logic
    browser.close()

Selector Strategies

Use descriptive selectors for reliability:

• text=: Match by text content
• role=: Match by ARIA role
• CSS selectors: Standard CSS selection
• IDs: Most specific selection

Best Practices

Always Run --help First

Before using helper scripts:

python scripts/with_server.py --help

This shows usage and available options without reading large source files.

Use Black Box Approach

Helper scripts are designed to be called directly:

• Don't read source code unless absolutely necessary
• Keeps context window clean
• Scripts handle complex workflows reliably

Wait for networkidle

Critical for dynamic applications:

page.wait_for_load_state('networkidle')

Wait before inspecting DOM or interacting with elements.

Use sync_playwright

For synchronous test scripts:

• Easier to write and debug
• Clear sequential flow
• Simpler error handling

Proper Browser Cleanup

Always close browsers when done:

browser.close()

Add Appropriate Waits

Wait for elements or timeouts as needed:

page.wait_for_selector('#element-id')
page.wait_for_timeout(1000)  # milliseconds

Decision Tree

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

Common Pitfall

Don't inspect DOM before waiting for networkidle on dynamic apps:

# ❌ WRONG
page.goto('http://localhost:3000')
page.content()  # May get partial/incomplete content

# ✅ CORRECT
page.goto('http://localhost:3000')
page.wait_for_load_state('networkidle')
page.content()  # Gets complete rendered content

Reference Files

Located in examples/ directory:

• element_discovery.py: Discovering page elements
• statichtmlautomation.py: Testing static HTML files
• console_logging.py: Capturing console output

Summary

WebApp Testing Skill enables Claude to effectively test and interact with local web applications using Playwright. Through server lifecycle management, reconnaissance-then-action patterns, and comprehensive examples, this skill makes it easy to write reliable automation scripts for testing, debugging, and verifying frontend functionality.