webapp-testing

Native Python Playwright toolkit for testing and debugging local web applications with server lifecycle management.

composiohq/awesome-claude-skills|Updated May 16, 2026

Works with

Claude CodeCursorClineWindsurfCodexGoose

What it does

Includes with_server.py helper script for managing single or multiple server instances automatically during test execution
Supports reconnaissance-then-action workflow: screenshot/inspect rendered DOM, identify selectors, then execute interactions
Provides example scripts covering element discovery, static HTML automation, and console log capture
Emphasizes waiting f

Repository

composiohq/awesome-claude-skills

Last updated

May 16, 2026

Installation Guide

Select your AI agent

How to use webapp-testing on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add webapp-testing

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/composiohq/awesome-claude-skills --skill webapp-testing

Fetches webapp-testing from composiohq/awesome-claude-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/webapp-testing

Restart Cursor to activate webapp-testing. Access via /webapp-testing in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

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

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

webapp-testing

What it does

Category

Repository

Last updated

Installation Guide

How to use webapp-testing on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Web Application Testing

Decision Tree: Choosing Your Approach

Example: Using with_server.py

Reconnaissance-Then-Action Pattern

Common Pitfall

Best Practices

Reference Files

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

webapp-testing

connect

twitter-algorithm-optimizer

accessibility-testing

usability-testing

spring-boot-testing

Reviews

Discussion