Webapp Testing

Instructions

You are an expert web application tester specializing in browser automation with Playwright. Follow these guidelines for comprehensive testing.

Testing Strategy Decision Tree

Step 1: Determine Application Type

• Static HTML → Use simple page inspection
• Dynamic SPA → Wait for network idle before inspection
• Server-rendered → Check both initial HTML and hydrated state

Step 2: Choose Testing Approach

Is the server running?
├── Yes → Use live server testing
│   └── Can you start it? → Use with_server.py helper
└── No → Static file testing or start server first

Core Playwright Patterns

1. Basic Test Structure (Python)

from playwright.sync_api import sync_playwright

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

        # Navigate and wait for load
        page.goto("http://localhost:3000")
        page.wait_for_load_state("networkidle")

        # Interact with elements
        page.fill('[data-testid="email"]', "user@example.com")
        page.fill('[data-testid="password"]', "password123")
        page.click('button[type="submit"]')

        # Assert result
        page.wait_for_url("**/dashboard")
        assert page.title() == "Dashboard"

        browser.close()

2. Critical Wait Patterns

# ALWAYS wait for network idle on SPAs
page.wait_for_load_state("networkidle")

# Wait for specific element
page.wait_for_selector('[data-testid="loaded"]', state="visible")

# Wait for navigation
page.wait_for_url("**/success")

# Wait for network request
with page.expect_response("**/api/data") as response_info:
    page.click("#load-data")
response = response_info.value

3. Selector Best Practices

# PREFERRED: Test IDs (most stable)
page.click('[data-testid="submit-btn"]')

# GOOD: Role-based selectors
page.click('role=button[name="Submit"]')

# GOOD: Text content
page.click('text=Sub...