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

| Task | Helper Script | |------|---------------| | Login / fill forms | examples/python/form_interaction.py | | Take screenshots | examples/python/screenshot_capture.py | | Handle cookie consent | scripts/cookie_consent.py | | Discover page elements | examples/python/element_discovery.py | | Capture network traffic | scripts/network_inspector.py | | Debug console errors | scripts/console_debugger.py | | Full debug (network+console) | scripts/combined_debugger.py | | Compare websites visually | examples/python/visual_compare.py |

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

| Mode | When to Use | Example | |------|-------------|---------| | Interactive | Click, type, navigate | Login flow, form submission | | Passive | Observe only | Network capture, console monitoring | | E2E Testing | Automated test suites | Playwright Test framework |

When to Invoke (Proactive)

Verifying UI fixes - After changing frontend code
Testing form fields/dropdowns - Verify correct values display
Confirming visual changes - Take screenshots
Reproducing bugs - Automate steps to reproduce
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

| Operation | Python | JavaScript | |-----------|--------|------------| | Screenshot | page.screenshot(path='/tmp/s.png') | await page.screenshot({ path: '/tmp/s.png' }) | | Full page | page.screenshot(path='/tmp/s.png', full_page=True) | await page.screenshot({ path: '/tmp/s.png', fullPage: true }) | | Fill input | page.fill('input[name="email"]', 'x@y.com') | await page.fill('input[name="email"]', 'x@y.com') | | Select dropdown | page.select_option('select#id', 'value') | await page.selectOption('select#id', 'value') | | Click | page.click('button[type="submit"]') | await page.click('button[type="submit"]') | | Wait network | page.wait_for_load_state('networkidle') | await page.waitForLoadState('networkidle') | | Wait element | page.wait_for_selector('.result') | await page.waitForSelector('.result') |

Selector Strategies (Order of Preference)

Role-based: page.get_by_role('button', name='Submit')
Text-based: page.get_by_text('Click me')
Test IDs: page.get_by_test_id('submit-btn')
CSS: page.locator('.btn-primary')
XPath (last resort): page.locator('//button[@type="submit"]')

Verification Checklist

| What to Verify | Approach | |----------------|----------| | Dropdown value | page.locator('select').input_value() | | Input text | page.locator('input').input_value() | | Element visible | page.locator('.element').is_visible() | | Text content | page.locator('.element').text_content() | | Page URL | page.url after action |

Passive Debugging Scripts

| Script | Purpose | Example | |--------|---------|---------| | combined_debugger.py | Network + Console + Errors | uv run ... --duration 30 --output /tmp/debug.json | | network_inspector.py | Network only | uv run ... --errors-only | | console_debugger.py | Console/errors only | uv run ... --with-stack-traces |

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

| Use Case | Recommended | Reason | |----------|-------------|--------| | Existing JS/TS project | JavaScript | Consistent tooling | | Existing Python project | Python | Consistent tooling | | Quick scripts | Python | Simpler setup with uv run | | Test suites | JavaScript | Better @playwright/test framework |

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

| Pitfall | Solution | |---------|----------| | Overlay blocking clicks | Call overlay dismissal after EVERY page load | | DOM inspection before JS loads | Always wait_for_load_state('networkidle') first | | Headful browser in CI | Always use headless: true | | Flaky selectors | Prefer role/text selectors over CSS classes | | Race conditions | Use explicit waits, not wait_for_timeout |

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/