ABOUTME: Claude Code skill for web automation, debugging, and E2E testing using Playwright

ABOUTME: Covers interactive automation, passive monitoring, screenshots, and security verification

Web Automation with Playwright

Browser automation and debugging using Playwright in Python or JavaScript/TypeScript.

Detailed patterns: See references/python-patterns.md and references/javascript-patterns.md

Quick Reference

Always run helpers first:

uv run ~/.claude/skills/web-automation/examples/python/element_discovery.py http://localhost:3000
uv run ~/.claude/skills/web-automation/examples/python/screenshot_capture.py http://localhost:3000 --output /tmp/shots

Modes of Operation

When to Invoke (Proactive)

1. Verifying UI fixes - After changing frontend code
2. Testing form fields/dropdowns - Verify correct values display
3. Confirming visual changes - Take screenshots
4. Reproducing bugs - Automate steps to reproduce
5. Security verification - After Gemini/static analysis finds issues

🔄 RESUMED SESSION CHECKPOINT

┌─────────────────────────────────────────────────────────────┐
│  SESSION RESUMED - WEB AUTOMATION VERIFICATION              │
│                                                             │
│  1. Was I in the middle of browser automation?              │
│     → Run: ps aux | grep -E "chromium|playwright|node"      │
│                                                             │
│  2. Were there UI verification tasks pending?               │
│     → Check summary for "verify", "test UI", "screenshot"   │
│                                                             │
│  3. Did previous automation capture any findings?           │
│     → Check /tmp/ for screenshots, debug outputs            │
└─────────────────────────────────────────────────────────────┘

Decision Flow

Task:
    +-- Need to interact? (click, type, submit) → Interactive mode
    +-- Just observe/capture? → Passive mode (combined_debugger.py)
    +-- Security verification? → Passive mode + grep for sensitive patterns

CRITICAL: Handling Overlays

Overlays WILL block automation. Always dismiss after page.goto():

Python (Quick Pattern)

page.goto('https://example.com')
page.wait_for_load_state('networkidle')

# Dismiss cookie consent
for sel in ['button:has-text("Accept all")', '[class*="cookie"] button[class*="accept"]']:
    try:
        btn = page.locator(sel).first
        if btn.is_visible(timeout=2000):
            btn.click()
            break
    except:
        continue

Nuclear Option (Remove All Overlays)

page.evaluate('''() => {
    const patterns = ['cookie', 'consent', 'modal', 'overlay', 'popup', 'backdrop'];
    for (const p of patterns) {
        document.querySelectorAll(`[class*="${p}"], [id*="${p}"]`).forEach(el => {
            if (getComputedStyle(el).position === 'fixed') el.remove();
        });
    }
    document.body.style.overflow = 'auto';
}''')

Full implementation: See references/python-patterns.md

Core Patterns

Python

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:3000')
    page.wait_for_load_state('networkidle')  # CRITICAL
    # ... automation
    browser.close()

JavaScript

import { test, expect } from '@playwright/test';

test('example', async ({ page }) => {
  await page.goto('/');
  await page.waitForLoadState('networkidle');
  await expect(page.locator('.element')).toBeVisible();
});

Common Operations

Selector Strategies (Order of Preference)

1. Role-based: page.getbyrole('button', name='Submit')
2. Text-based: page.getbytext('Click me')
3. Test IDs: page.getbytest_id('submit-btn')
4. CSS: page.locator('.btn-primary')
5. XPath (last resort): page.locator('//button[@type="submit"]')

Verification Checklist

Passive Debugging Scripts

Security Verification

# After Gemini found sensitive data logging
uv run ~/.claude/skills/web-automation/scripts/console_debugger.py \
    http://localhost:3000 --duration 60 --output /tmp/security.json

grep -i "password\|token\|secret\|bearer" /tmp/security.json

Visual Comparison

NEVER say "I cannot visually browse". Instead:

# Compare two sites
uv run ~/.claude/skills/web-automation/examples/python/visual_compare.py \
    https://reference-site.com \
    http://localhost:3000 \
    --output /tmp/compare

# Then read the screenshots using Read tool

Language Selection

Test Framework Integration

See references/test-framework.md for:

• Unified test runner (test_utils.py)
• Server auto-detection and startup
• Framework detection (Playwright, Jest, pytest, etc.)

# Detect and run tests with server
uv run ~/.claude/skills/web-automation/scripts/test_utils.py . --run --with-server

Common Pitfalls

Prerequisites

Python

Scripts include inline dependencies (PEP 723); uv run auto-installs them.

JavaScript

npm init -y
npm install -D @playwright/test
npx playwright install chromium

Running E2E Tests

JavaScript

npx playwright test                    # Run all
npx playwright test --ui               # UI mode
npx playwright test --headed           # See browser

Python

pip install pytest-playwright
pytest tests/