Automate Web Application Testing with Playwright

A skill for testing local web applications by writing native Python Playwright scripts, built around a decision tree and a bundled helper script rather than ad-hoc automation. scripts/with_server.py manages server lifecycle, including multiple servers at once, and is meant to be run with --help first and invoked as a black box - the skill explicitly warns not to read the helper's source until a run has been tried and a customized solution is proven necessary, since these scripts can be large enough to pollute the context window. Its decision tree branches on the task: for static HTML, read the file directly to find selectors and write a Playwright script against them, falling back to the dynamic path if that's incomplete; for a dynamic webapp with no server running, run with_server.py --help then use the helper plus a simplified Playwright script; for a dynamic webapp with a server already running, follow a reconnaissance-then-action pattern - navigate and wait for networkidle, take a screenshot or inspect the DOM, identify selectors from the rendered state, then execute actions with those selectors. Its single-server example runs python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py; its multi-server example chains two --server/--port pairs, for example a backend on port 3000 and a frontend on 5173, before the automation command. The automation script itself should contain only Playwright logic, since server management is handled automatically. The skill names a specific common pitfall: inspecting the DOM before waiting for networkidle on dynamic apps is wrong; waiting for page.wait_for_load_state('networkidle') before inspection is correct. Its best practices: treat any script in scripts/ as a black box invoked via --help then direct call rather than something to read into context, use sync_playwright() for synchronous scripts, always close the browser when done, prefer descriptive selectors (text=, role=, CSS selectors, or IDs), and add explicit waits (page.wait_for_selector() or page.wait_for_timeout()). Three reference examples live in examples/: element_discovery.py (finding buttons, links, and inputs on a page), static_html_automation.py (automating local HTML via file:// URLs), and console_logging.py (capturing console logs during a run).

Use it whenever you need to test or automate a local web application - static HTML or a dynamic app with its own dev server - and want a Python Playwright script rather than a browser extension or manual testing. It's specifically built around a bundled helper for server lifecycle management, so it's most useful when the app under test needs a dev server started and stopped around the test run; for pure static HTML with no server, the direct-selector path applies instead.

Input is a local web application, either a static HTML file or a dynamic app with a start command, plus the actions or assertions to automate. Output is a runnable Python Playwright script, invoked either directly or via with_server.py for server lifecycle management. Its core automation script pattern, quoted verbatim:

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
    page = browser.new_page()
    page.goto('http://localhost:5173') # Server already running and ready
    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
    # ... your automation logic
    browser.close()

Built on Python's playwright.sync_api, specifically Chromium in headless mode, plus its own bundled scripts/with_server.py helper for managing one or more dev-server processes, such as an npm run dev frontend alongside a separate backend process, around the automation run.

Developers who need to write reliable Playwright-based tests or automation against a local web app, static or dynamic, without hand-rolling server startup and shutdown or rediscovering the networkidle-before-inspection pitfall each time.