Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
composiohq avatar

Webapp Testing

  • 3.5k installs
  • 71.1k repo stars
  • Updated July 24, 2026
  • composiohq/awesome-claude-skills

This is a copy of webapp-testing by anthropics - installs and ranking accrue to the original listing.

webapp-testing is a Claude agent skill that automates local web application testing with Python Playwright scripts for developers who need E2E verification without manual server setup.

About

webapp-testing is a ComposioHQ awesome-claude-skills toolkit for interacting with and testing local web applications using native Python Playwright scripts. The bundled with_server.py helper starts one or more dev servers—such as npm run dev on port 5173—waits until ports are ready, runs your automation, then tears servers down, including multi-server backend-plus-frontend setups. Example scripts cover element_discovery.py, static_html_automation.py, and console_logging.py, while the skill documents a reconnaissance-then-action pattern: navigate, wait for networkidle, inspect the DOM or screenshot, then act on discovered selectors. Scripts are intended as black boxes invoked with --help rather than ingested into context. Developers reach for webapp-testing when verifying localhost UI, debugging dynamic SPAs, capturing console logs, or running integrated E2E tests inside Claude Code, Cursor, or Codex.

  • Automates browser interactions using Playwright in headless mode
  • Captures and saves console logs with type and message detail
  • Discovers all interactive elements such as buttons on any page
  • Waits for network idle and supports custom viewport sizes
  • Outputs structured logs and element counts to files for review

Webapp Testing by the numbers

  • 3,486 all-time installs (skills.sh)
  • +118 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Security screen: HIGH risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
npx skills add https://github.com/composiohq/awesome-claude-skills --skill webapp-testing

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs3.5k
repo stars71.1k
Security audit2 / 3 scanners passed
Last updatedJuly 24, 2026
Repositorycomposiohq/awesome-claude-skills

How do you E2E test localhost with Playwright automation?

Automate browser-based end-to-end tests and capture console logs, network activity, and UI element discovery for web applications.

Who is it for?

Developers writing Playwright E2E tests who want agents to manage dev server startup, DOM discovery, and browser log capture automatically.

Skip if: Developers running production load tests or backend-only unit tests that do not require a browser or local dev server.

When should I use this skill?

User needs localhost E2E test, Playwright automation, browser console logs, UI debugging, or dev server lifecycle management

What you get

Playwright test scripts, screenshots, console log captures, and verified UI selector interactions

  • Playwright automation script
  • Console log capture
  • Browser screenshots

By the numbers

  • Ships 3 example scripts: element_discovery.py, static_html_automation.py, and console_logging.py
  • with_server.py supports multiple concurrent dev servers via repeated --server flags

Files

SKILL.mdMarkdownGitHub ↗

Web Application Testing

To test local web applications, write native Python Playwright scripts.

Helper Scripts Available:

  • scripts/with_server.py - Manages server lifecycle (supports multiple servers)

Always run scripts with `--help` first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.

Decision Tree: Choosing Your Approach

User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

Example: Using with_server.py

To start a server, run --help first, then use the helper:

Single server:

python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py

Multiple servers (e.g., backend + frontend):

python scripts/with_server.py \
  --server "cd backend && python server.py" --port 3000 \
  --server "cd frontend && npm run dev" --port 5173 \
  -- python your_automation.py

To create an automation script, include only Playwright logic (servers are managed automatically):

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()

Reconnaissance-Then-Action Pattern

1. Inspect rendered DOM:

   page.screenshot(path='/tmp/inspect.png', full_page=True)
   content = page.content()
   page.locator('button').all()

2. Identify selectors from inspection results

3. Execute actions using discovered selectors

Common Pitfall

Don't inspect the DOM before waiting for networkidle on dynamic apps ✅ Do wait for page.wait_for_load_state('networkidle') before inspection

Best Practices

  • Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in scripts/ can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use --help to see usage, then invoke directly.
  • Use sync_playwright() for synchronous scripts
  • Always close the browser when done
  • Use descriptive selectors: text=, role=, CSS selectors, or IDs
  • Add appropriate waits: page.wait_for_selector() or page.wait_for_timeout()

Reference Files

  • examples/ - Examples showing common patterns:
  • element_discovery.py - Discovering buttons, links, and inputs on a page
  • static_html_automation.py - Using file:// URLs for local HTML
  • console_logging.py - Capturing console logs during automation

Related skills

How it compares

Use webapp-testing for Python Playwright localhost E2E with server lifecycle helpers; use Chrome DevTools MCP when you need live interactive browser inspection inside the IDE.

FAQ

How does webapp-testing start local dev servers?

webapp-testing uses scripts/with_server.py to launch one or more servers, wait for ports like 5173, run the Playwright script, then terminate processes. Multi-server flags support separate backend and frontend commands.

What pattern does webapp-testing recommend for UI automation?

webapp-testing documents reconnaissance-then-action: navigate, wait for networkidle, screenshot or inspect the DOM, then interact using discovered selectors. Always launch headless Chromium and close the browser when finished.

Which example scripts ship with webapp-testing?

webapp-testing bundles examples/element_discovery.py, static_html_automation.py, and console_logging.py. These demonstrate selector discovery, file:// HTML automation, and console log capture during Playwright runs.

Is Webapp Testing safe to install?

skills.sh reports 2 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Testing & QAtestingintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.