---
name: webapp-testing
description: Toolkit for testing local web applications using Playwright
version: 1.0.0
author: Anthropic (adapted)
platforms: [claude-code, cursor]
license: Apache-2.0
source: https://github.com/anthropics/skills
---

# Web Application Testing (Playwright)

Test and interact with web applications using Playwright browser automation.

## Decision Tree

```
Is this static HTML?
  YES → Read file directly → analyze DOM
  NO  → Is dev server running?
          YES → Use Playwright directly
          NO  → Start server first, then use Playwright
```

## Core Pattern: Reconnaissance → Action

Always follow this pattern:
```python
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()

    # 1. Reconnaissance
    page.goto("http://localhost:3000")
    page.wait_for_load_state("networkidle")
    screenshot = page.screenshot(path="initial.png")

    # 2. Inspect
    title = page.title()
    html = page.content()

    # 3. Interact
    page.click("button#submit")
    page.fill("input[name='email']", "test@example.com")

    # 4. Assert
    assert page.locator(".success-message").is_visible()
    browser.close()
```

## Useful Operations

```python
# Screenshot with full page
page.screenshot(path="full.png", full_page=True)

# Console logs
logs = []
page.on("console", lambda msg: logs.append(msg.text))

# Network requests
requests = []
page.on("request", lambda req: requests.append(req.url))

# Wait for element
page.wait_for_selector(".loading", state="hidden")

# Form interaction
page.select_option("select#country", "RU")
page.check("input[type='checkbox']")
```

## Error Debugging
- Take a screenshot immediately when a test fails
- Log browser console errors
- Check network tab for failed requests
- Use `page.pause()` for interactive debugging