Skills webapp-testing
📦

webapp-testing

Low Risk ⚙️ External commands📁 Filesystem access

Test Web Applications with Playwright Automation

Also available from: DYAI2025,ArtemisAI,davila7,7Spade,Azeem-2,7Spade,ComposioHQ,anthropics,Cam10001110101,AutumnsGrove

Local web application testing requires reliable browser automation without manual setup. This toolkit provides Playwright scripts and server management utilities to streamline frontend testing workflows.

Supports: Claude Codex Code(CC)
🥉 73 Bronze
1

Download the skill ZIP

2

Upload in Claude

Go to Settings → Capabilities → Skills → Upload skill

3

Toggle on and start using

Test it

Using "webapp-testing". Discover all interactive elements on localhost:5173

Expected outcome:

  • Found 12 buttons: [0] Submit, [1] Cancel, [2] Login...
  • Found 8 links: - Dashboard -> /dashboard, - Profile -> /profile...
  • Found 5 input fields: - email (email), - password (password)...
  • Screenshot saved to /tmp/page_discovery.png

Using "webapp-testing". Capture console logs during user flow

Expected outcome:

  • Console: [log] App initialized
  • Console: [warning] Deprecated API usage
  • Console: [error] Failed to load resource: net::ERR_CONNECTION_REFUSED
  • Captured 15 console messages. Logs saved to outputs/console.log

Security Audit

Low Risk
v1 • 2/24/2026

Static analysis flagged 38 patterns, but manual review confirms all HIGH-severity findings are false positives. The 'weak cryptographic algorithm' detections are scanner errors on argparse code. Shell backtick findings are Markdown documentation formatting. Subprocess usage in with_server.py is intentional server management functionality requiring explicit CLI invocation. Hardcoded localhost URLs and temp file writes are expected for local testing toolkit.

5
Files scanned
310
Lines analyzed
3
findings
1
Total audits
Low Risk Issues (1)
scripts/with_server.py:69-74
Subprocess with shell=True
with_server.py uses subprocess.Popen with shell=True to start development servers. This is intentional functionality for a server management helper script. Commands are passed via CLI arguments, requiring explicit user invocation. Risk is mitigated by design - users explicitly provide the server commands.

Risk Factors

⚙️ External commands (2)
scripts/with_server.py:69-74 scripts/with_server.py:88-89
📁 Filesystem access (2)
examples/console_logging.py:31-32 examples/element_discovery.py:37-38
Audited by: claude

Quality Score

45
Architecture
100
Maintainability
87
Content
50
Community
88
Security
83
Spec Compliance

What You Can Build

Frontend Regression Testing

Automate verification of UI components after code changes to catch breaking changes before deployment.

Development Server Validation

Automatically start backend and frontend servers, run integration tests, then clean up resources.

Console Log Debugging

Capture and analyze browser console output to identify JavaScript errors and warnings during user flows.

Try These Prompts

Basic Page Navigation 
Navigate to my local React app at localhost:3000, wait for the page to fully load, and take a screenshot of the homepage.
Element Discovery 
Visit my web application and list all buttons, links, and form inputs on the current page with their text content and attributes.
Console Log Capture 
Run my automation script while capturing all browser console messages. Save the logs to a file and report any errors or warnings found.
Full Integration Test 
Start my backend server on port 8000 and frontend on port 5173, then run my Playwright test script that logs in, navigates to the dashboard, and verifies key elements are present. Clean up servers after tests complete.

Best Practices

  • Always wait for networkidle state before interacting with dynamic pages to ensure JavaScript has fully executed
  • Use the with_server.py helper script to manage server lifecycle instead of manually starting and stopping servers
  • Run scripts with --help flag first to understand available options before customizing the automation logic

Avoid

  • Do not inspect the DOM or take screenshots before waiting for networkidle on dynamic applications
  • Avoid reading script source code into context window - use --help documentation and invoke as black-box tools
  • Do not use fixed timeouts like wait_for_timeout when specific selectors can be waited for with wait_for_selector

Frequently Asked Questions

How do I test an application that requires authentication?
Include login steps in your Playwright script before navigating to protected pages. You can store credentials in environment variables or use Playwright's storage state feature to reuse authenticated sessions.
Can I test multiple servers simultaneously?
Yes, with_server.py supports multiple --server and --port pairs. Each server starts in sequence, waits for readiness, then runs your test command after all servers are ready.
Why are my tests failing when the page has dynamic content?
Ensure you call page.wait_for_load_state('networkidle') after navigation. For specific elements, use page.wait_for_selector() to wait for elements to appear before interacting.
How do I capture browser screenshots for visual debugging?
Use page.screenshot(path='filename.png', full_page=True) to capture the entire page. Screenshots are saved to the specified path and can be viewed after test execution.
What browsers are supported for testing?
Playwright supports Chromium, Firefox, and WebKit. This skill defaults to Chromium in headless mode for reliability. You can modify scripts to use other browsers if needed.
How do I install the required dependencies?
Install Playwright with pip install playwright, then run playwright install to download browser binaries. Ensure Python 3.7 or higher is available in your environment.

Developer Details

Author

ZhanlinCui

License

Complete terms in LICENSE.txt

Repository

https://github.com/ZhanlinCui/Ultimate-Agent-Skills-Collection/tree/main/webapp-testing

Ref

main

File structure

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md