webapp-testing

name	webapp-testing
description	Toolkit for testing web applications using Playwright. Use when verifying frontend functionality, debugging UI behavior, capturing screenshots, or viewing browser logs.

Web Application Testing

Test web applications using Python Playwright scripts.

Decision Tree

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly for selectors
    │         └─ Write Playwright script
    │
    └─ No (dynamic webapp) → Is server already running?
        ├─ No → Start server first, then test
        │
        └─ 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

Basic Playwright Script

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: Wait for JS
    
    # Reconnaissance
    page.screenshot(path='/tmp/inspect.png', full_page=True)
    
    # Actions
    page.click('button#submit')
    
    browser.close()

Reconnaissance Pattern

1. Inspect DOM:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()
   

2. Identify selectors from results

3. Execute actions with discovered selectors

Common Pitfall

❌ Inspect DOM before waiting for networkidle ✅ Always page.wait_for_load_state('networkidle') first

Best Practices

• Use sync_playwright() for synchronous scripts
• Always close browser when done
• Use descriptive selectors: text=, role=, CSS, IDs
• Add waits: wait_for_selector(), wait_for_timeout()
• Launch chromium in headless=True mode

Overview

Use this skill for the capability described in this document.

When to Use

Use this skill when the request matches the capability, constraints, and activation cues described below.

Core Workflow

Follow the primary workflow, commands, and decision points documented in the sections below.

Examples

Use the examples and snippets already present in this document whenever they apply to the task.

References

Use any linked scripts, assets, reference files, and companion resources mentioned in this document.