webapp-testing_skill

Overview

This skill lets you test local web applications using Playwright with tooling to manage local servers, inspect rendered pages, capture screenshots, and collect browser logs. It focuses on practical workflows for both static HTML and dynamic apps, with helper scripts to launch one or multiple local servers and templates for synchronous automation. The goal is fast, repeatable frontend verification and debugging during development.

How this skill works

The toolkit provides a server lifecycle helper (scripts/with_server.py) that can start one or several dev servers and run your Playwright script against them. For dynamic apps it follows a reconnaissance-then-action pattern: wait for networkidle, capture screenshots or DOM, identify selectors, then perform actions. It includes example templates and patterns for synchronous Playwright scripts, selector discovery, and console logging capture.

When to use it

• Writing automated checks for a local frontend or full-stack dev environment
• Debugging UI behavior or intermittent rendering issues by capturing screenshots and logs
• Verifying static HTML files via file:// or simple selector checks
• Running end-to-end checks that require starting one or more local servers
• Quick reconnaissance to find reliable selectors before implementing actions

Best practices

• Run scripts with --help first and use provided helpers as black boxes rather than editing them
• Always call page.wait_for_load_state('networkidle') before inspecting DOM on dynamic apps
• Use sync_playwright() for straightforward synchronous scripts and always close the browser when finished
• Prefer descriptive selectors (text=, role=, ids, or clear CSS selectors) and add explicit waits like page.wait_for_selector()
• Capture screenshots and page.content() during reconnaissance to discover stable selectors and reproduce issues

Example use cases

• Start frontend and backend together, then run a Playwright script that logs in, navigates, and asserts key UI states
• Load a static HTML file with file:// and validate presence and attributes of elements without starting a server
• Reproduce flaky rendering by taking full-page screenshots after networkidle, saving console logs, and attaching them to bug reports
• Discover interactive element selectors by listing buttons/inputs and iterating with locator queries before writing assertions
• Run a quick smoke test during CI by launching servers transiently with scripts/with_server.py and running a headless Playwright check