技能 webapp-testing
📦

webapp-testing

低风险 ⚙️ 外部命令📁 文件系统访问

Test Web Applications with Playwright Automation

也可从以下获取: AutumnsGrove,Azeem-2,DYAI2025,Cam10001110101,7Spade,7Spade,sickn33,ComposioHQ,davila7,anthropics,ArtemisAI

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.

支持: Claude Codex Code(CC)
🥉 72 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“webapp-testing”。 Discover all interactive elements on localhost:5173

预期结果:

  • 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

正在使用“webapp-testing”。 Capture console logs during user flow

预期结果:

  • 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

安全审计

低风险
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
已扫描文件
310
分析行数
3
发现项
1
审计总数
低风险问题 (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.

风险因素

⚙️ 外部命令 (2)
scripts/with_server.py:69-74 scripts/with_server.py:88-89
📁 文件系统访问 (2)
examples/console_logging.py:31-32 examples/element_discovery.py:37-38
审计者: claude

质量评分

45
架构
100
可维护性
87
内容
44
社区
88
安全
83
规范符合性

你能构建什么

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.

试试这些提示

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.

最佳实践

  • 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

避免

  • 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

常见问题

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.

开发者详情

作者

ZhanlinCui

许可证

Complete terms in LICENSE.txt

仓库

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

引用

main

文件结构

📁 examples/

📄 console_logging.py

📄 element_discovery.py

📄 static_html_automation.py

📁 scripts/

📄 with_server.py

📄 SKILL.md