---

name: web-automation description: >- Web automation, debugging, and E2E testing with Playwright. Handles interactive (login, forms, reproduce bugs) and passive modes (network/console capture). Triggers on "e2e test", "browser test", "playwright", "screenshot", "debug UI", "debug frontend", "reproduce bug", "network trace", "console output", "verify fix", "test that", "verify change", "test the flow", "http://localhost", "open browser", "click button", "fill form", "submit form", "check page", "web scraping", "automation script", "headless browser", "browser automation", "selenium alternative", "puppeteer alternative", "page object", "web testing", "UI testing", "frontend testing", "visual regression", "capture network", "intercept requests", "mock API responses". PROACTIVE: Invoke for security verification, UI fix verification, testing forms/dropdowns, or multi-step UI flows. ON SESSION RESUME - check for pending UI verifications. allowed-tools: Read, Write, Edit, Bash, Glob, Grep

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:

Copyuv 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

Copy┌─────────────────────────────────────────────────────────────┐
│  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

CopyTask:
    +-- 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)

Copypage.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)

Copypage.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

Copyfrom 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

Copyimport { 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.get_by_role('button', name='Submit')
2. Text-based: page.get_by_text('Click me')
3. Test IDs: page.get_by_test_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

Copy# 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:

Copy# 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.)

Copy# 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

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

---

Running E2E Tests

JavaScript

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

Python

Copypip install pytest-playwright
pytest tests/