Web App Testing

Quality

Toolkit for testing local web applications using Playwright (Python) -- screenshots, browser logs, and frontend verification.

Overview

This skill provides a systematic approach to testing and interacting with local web applications using Python Playwright. It includes a decision tree for choosing the right strategy (static HTML vs. dynamic webapp, server running vs. not), bundled helper scripts for server lifecycle management, and patterns for DOM inspection, screenshot capture, and browser log analysis.

When to Use

• Verifying frontend behavior of a locally running web app
• Taking screenshots of rendered pages for visual inspection
• Debugging UI issues by capturing browser console logs
• Testing static HTML files without a running server
• Automating multi-server setups (e.g., backend + frontend)

Key Features

• Decision tree approach: Guides you through Static HTML (read selectors directly), Dynamic with no server (use with_server.py), or Dynamic with server running (reconnaissance-then-action)
• Server lifecycle helper: scripts/with_server.py manages starting, waiting, and stopping servers -- supports multiple simultaneous servers
• Reconnaissance-then-action pattern: Navigate, wait for networkidle, screenshot/inspect DOM, identify selectors, then execute actions
• Black-box scripts: Helper scripts are designed to be invoked via --help and called directly, not read into context
• Playwright best practices: Always headless Chromium, sync_playwright() API, proper waits, descriptive selectors (text=, role=, CSS)

Example Prompts

Take a screenshot of my running app at localhost:3000 and check for layout issues.

Test my static HTML page by clicking the submit button and verifying the output.

Start my backend and frontend servers, then verify the login flow works.

Source

• Skill folder: skills/webapp-testing/
• Standard: agentskills.io