Skip to content
/webapp-testingOfficial

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing screenshots, and viewing browser logs.

TestingPlaywrightFrontendAutomationQA· 2 min read

Quick import: Download the .md file and save it to .claude/commands/ (Claude Code), .cursorrules (Cursor), or paste as a system prompt in ChatGPT, Gemini, or any LLM API.

#What it does

The Web App Testing skill provides a toolkit for testing local web applications using Python Playwright. It handles server lifecycle management, element discovery, screenshot capture, console log monitoring, and automated interaction with web UIs -- both static HTML and dynamic single-page applications.

#How to use

Activate when you need to test, verify, or interact with a local web application.

Test my React app running on localhost:3000

Take a screenshot of the login flow and verify the buttons work

#Skill instructions

#Decision Tree

Is it static HTML?
  Yes -> Read HTML file to identify selectors, then write Playwright script
  No (dynamic webapp) -> Is the server already running?
    No -> Use with_server.py helper to manage server lifecycle
    Yes -> Reconnaissance-then-action pattern

#Server Management

The with_server.py helper manages server lifecycle automatically:

bash
# Single server
python scripts/with_server.py --server "npm run dev" --port 5173 -- python test.py
 
# Multiple servers (backend + frontend)
python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python test.py

#Reconnaissance-Then-Action Pattern

  1. Navigate and wait: page.goto() then page.wait_for_load_state('networkidle')
  2. Inspect: Take screenshots or inspect the DOM to discover selectors
  3. Act: Execute actions using discovered selectors

#Key Rules

  • Always launch Chromium in headless mode
  • Always wait for networkidle before inspecting dynamic apps
  • Use descriptive selectors: text=, role=, CSS selectors, or IDs
  • Always close the browser when done
  • Use helper scripts as black boxes (run --help first, do not read source)

This skill is from the Anthropic Skills Repository.

Anthropic·
View all skills