Back to Testing & Quality Assurance
webapp-testing
PlaywrightUI TestingFrontendDebuggingWeb ApplicationsAutomationBrowser AutomationPython
Install this skill
npx skills add anthropics/skillsWorks across Claude Code, Cursor, Codex, Copilot & Antigravity
The webapp-testing skill provides a standardized framework for automating browser-based interactions using Python and Playwright. It is optimized for local environments where manual browser inspection is inefficient. By using the included server management utility, scripts handle complex dependency lifecycles automatically, preventing common race conditions associated with dynamic client-side rendering. The workflow prioritizes a 'reconnaissance-then-action' pattern, requiring state verification before DOM interaction. This ensures stability in automated test suites by preventing premature element selection before the application reaches a networkidle state. Rather than manual inspection, the tool encourages headless execution, saving context window space by treating provided helper scripts as black-box utilities. Users should invoke --help on existing scripts before writing custom logic, ensuring maintenance overhead remains low while consistency is maintained across automated browser tasks.
When to Use This Skill
- β’Validating frontend functionality against local backend APIs
- β’Automating navigation and form entry in dynamic single-page applications
- β’Debugging UI state inconsistencies via captured console logs
- β’Batch testing static HTML files without manual browser loading
How to Invoke This Skill
Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:
- βtest my local web application
- βstart my frontend and backend servers for testing
- βautomate interactions on my local dev site
- βhow do I script Playwright in this environment
- βinspect elements on my dynamic web app automatically
Pro Tips
- π‘Always run helper scripts like `with_server.py` with `--help` first to understand their parameters without consuming context.
- π‘For complex dynamic applications, start with reconnaissance steps: navigate, wait for `networkidle`, then inspect the DOM or take screenshots to identify elements.
- π‘Prioritize using the provided helper scripts as black-box tools rather than reading their source code to conserve context window space.
What this skill does
- β’Manage multi-server lifecycles through standardized scripts
- β’Perform state-aware DOM inspection using headless Chromium
- β’Execute synchronous Playwright automation via headless browser instances
- β’Capture screenshots and log console output for debugging
- β’Identify selectors via rendered page content analysis
When not to use it
- βTesting external production sites where you do not control the server
- βHigh-load performance testing where standard Playwright timing may be insufficient
Example workflow
- Run python scripts/with_server.py --help to identify valid server configurations
- Execute the server helper with your dev commands and targeted ports
- Navigate to the local address using a sync_playwright browser context
- Wait for networkidle to ensure the JS application has finished loading
- Capture a screenshot or query DOM elements to verify expected state
- Close the browser context and terminate the server process
Prerequisites
- βPython 3.x
- βPlaywright installed in the environment
- βLocal access to the application source code
Pitfalls & limitations
- !Attempting to query DOM elements before networkidle state
- !Over-populating the context window by reading large helper scripts instead of calling them
- !Failing to close browser sessions leading to orphaned processes
FAQ
Should I manually read the helper scripts before running them?
No, treat them as black-box utilities. Use --help to understand the interface and run them directly to avoid cluttering your context window.
What happens if I try to inspect the DOM immediately after page.goto?
You will likely fail because dynamic apps require time to execute JavaScript. Always wait for networkidle first.
Can I test two servers at once?
Yes, the script supports multiple --server flags to manage complex environments like decoupled backend and frontend architectures.
Do I need to launch the browser in visible mode?
No, the recommended practice is to use headless mode for automated tasks to maintain stability and performance.
How it compares
Unlike generic browser automation prompts that often hallucinate selector timing, this skill enforces a strict state-verification pattern and provides server-management utilities that remove manual process orchestration.
π Full skill instructions β original source: anthropics/skills
# Web Application Testing
To test local web applications, write native Python Playwright scripts.
**Helper Scripts Available**:
-
**Always run scripts with
## Decision Tree: Choosing Your Approach
## Example: Using with_server.py
To start a server, run
**Single server:**
**Multiple servers (e.g., backend + frontend):**
To create an automation script, include only Playwright logic (servers are managed automatically):
## Reconnaissance-Then-Action Pattern
1. **Inspect rendered DOM**:
2. **Identify selectors** from inspection results
3. **Execute actions** using discovered selectors
## Common Pitfall
β **Don't** inspect the DOM before waiting for
β **Do** wait for
## Best Practices
- **Use bundled scripts as black boxes** - To accomplish a task, consider whether one of the scripts available in
- Use
- Always close the browser when done
- Use descriptive selectors:
- Add appropriate waits:
## Reference Files
- **examples/** - Examples showing common patterns:
-
-
-
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.pyTo 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 automationBy Anthropic
How to Use This Skill Unit
Option A: Project-Specific (Recommended)
- Click "Download" above
- In your project, create the directory:
.agent/skills/webapp-testing/ - Save the file as
SKILL.md - The agent will automatically discover the skill based on its description.
Option B: Global Installation (All Agents)
Save the file to these locations to make it available across all projects:
- Claude Code:
~/.claude/skills/anthropics/skills/webapp-testing/SKILL.md - Cursor:
~/.cursor/skills/anthropics/skills/webapp-testing/SKILL.md - Antigravity:
~/.gemini/antigravity/skills/anthropics/skills/webapp-testing/SKILL.md
π Install with CLI:npx skills add anthropics/skills
Recommended Rules
View more rules βPython Automation & Scripting Expert
PythonAutomationScripting
You are an expert in Python automation and scripting. Key Principles: - Write robust, error-resistant scripts - Implement proper logging - Handle edg...
Python DevOps & Infrastructure Automation
PythonDevOpsInfrastructure
You are an expert in Python for DevOps, infrastructure automation, and CI/CD. Key Principles: - Automate repetitive tasks - Use infrastructure as cod...
Python Web Scraping Expert
PythonWeb ScrapingData Extraction
You are an expert in Python web scraping with BeautifulSoup, Scrapy, and Selenium. Key Principles: - Respect robots.txt and website terms of service ...
Recommended Workflows
View more workflows βDebugging Infinite Re-renders
ReactDebuggingPerformance
--- description: Track down and fix infinite loops in useEffect and component rendering --- 1. **Check `useEffect` Dependencies**: - The most comm...
E2E Testing Setup (Playwright)
TestingE2EPlaywright
--- description: Boilerplate setup for end-to-end testing --- 1. **Initialize Playwright**: - Run the init command. // turbo - Run `npm init...
Automatic commit message generator
GitAIAutomation
--- description: Automatic commit message generator and fast AI-powered commit for all current changes --- // turbo-all This workflow automatically ...
