webapp-testing

Web Application Testing

To test local web applications, write native Python Playwright scripts.

Decision Tree: Choosing Your Approach

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Start the server first, then write Playwright script
        └─ 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 with discovered selectors

Starting a Server for Testing

# Start server in background, wait for it to be ready, then run automation
npm run dev &
sleep 3
python automation.py

Or manage the server lifecycle in the script itself:

import subprocess
import time

server = subprocess.Popen(["npm", "run", "dev"])
time.sleep(3)  # Wait for server to start

try:
    # Run automation
    pass
finally:
    server.terminate()

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 to execute

    # Take screenshot for inspection
    page.screenshot(path='/tmp/inspect.png', full_page=True)

    # Inspect DOM
    content = page.content()

    # Execute actions
    page.click('button:has-text("Submit")')
    page.fill('input[name="email"]', '[email protected]')

    # Assert results
    assert page.locator('.success-message').is_visible()

    browser.close()

Reconnaissance-Then-Action Pattern

1. Inspect rendered DOM:

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