What it is
webapp-testing is a skill that guides writing native Python Playwright scripts to test local web applications. It supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs. It bundles a helper script, scripts/with_server.py, which manages server lifecycles (including multiple servers), and example scripts for common patterns.
Who it's for
- Developers testing or debugging the frontend of a locally running web app
- Users who want Playwright automation with servers started and managed for them
- Developers automating checks against static HTML files or dynamic web apps
Requirements
Requirements
- Python with Playwright (sync_playwright from playwright.sync_api)
- Chromium browser, launched in headless mode
- A local web application, either static HTML or a dynamic app with a start command
Examples
Run a single server with an automation script
bashpython scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.pyWhat it does: with_server.py starts the dev server on the given port, then runs your automation script.
Run backend and frontend servers together
bashpython scripts/with_server.py \
--server "cd backend && python server.py" --port 3000 \
--server "cd frontend && npm run dev" --port 5173 \
-- python your_automation.pyWhat it does: Multiple --server/--port pairs let the helper manage several servers before running the script.
Basic Playwright automation script
pythonfrom 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()What it does: The script contains only Playwright logic, since the server is managed by the helper. It waits for networkidle so JavaScript has executed.
Reconnaissance: inspect the rendered DOM
pythonpage.screenshot(path='/tmp/inspect.png', full_page=True)
content = page.content()
page.locator('button').all()What it does: After waiting for networkidle, take a screenshot and inspect the DOM to identify selectors before acting.
Pros & cons
Pros
- Pro:Helper script manages server lifecycle, including multiple servers
- Pro:Includes a decision tree for static HTML versus dynamic apps
- Pro:Documents a reconnaissance-then-action pattern and a networkidle pitfall
- Pro:Bundled example scripts cover element discovery, static HTML, and console logging
Cons
- Con:Scoped to local web applications
- Con:Requires writing Python Playwright scripts rather than offering a no-code workflow
- Con:Helper scripts are meant to be used as black boxes, so customizing them requires reading large source files
Images
Related
Skill 
Skill algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Skill brand-guidelines
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Skill canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Skill claude-api
|-
Skill