webapp-testing
使用 Playwright 自动化测试 Web 应用程序
也可从以下获取: Azeem-2,7Spade,7Spade,ZhanlinCui,ArtemisAI,davila7,anthropics,DYAI2025,ComposioHQ,Cam10001110101,AutumnsGrove
本地 Web 应用程序测试需要管理服务器和自动化浏览器交互。本技能提供 Playwright 脚本和服务器辅助工具，以简化前端测试工作流程。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“webapp-testing”。 发现登录页面上的所有交互元素
预期结果:
- 发现 3 个输入字段：email (type=email)、password (type=password)、remember (type=checkbox)
- 发现 2 个按钮：'Sign In' (submit)、'Forgot Password?' (link)
- 截图已保存到 /tmp/login_page.png，显示表单布局
正在使用“webapp-testing”。 在服务器运行时测试表单提交
预期结果:
- 服务器已在端口 3000 上启动
- 导航到 http://localhost:3000/login
- 在 email 字段中填写 'test@example.com'
- 点击 Sign In 按钮
- 验证导航到 /dashboard
- 服务器已正常停止
安全审计
安全Static analysis detected 42 patterns but all are false positives. LICENSE.txt URLs are standard Apache 2.0 license references. 'Weak cryptographic algorithm' findings incorrectly flagged license text and argparse code. subprocess usage in with_server.py is legitimate for server management. SKILL.md code blocks are documentation examples, not executable code. Skill is safe for publication.
低风险问题 (1)
风险因素
⚡ 包含脚本
📁 文件系统访问 (1)
质量评分
你能构建什么
前端开发者测试 UI 组件
通过启动开发服务器并使用 Playwright 脚本验证 UI 行为，自动化测试 React 或 Vue 组件。
全栈集成测试
同时运行后端 API 服务器和前端开发服务器，然后对集成应用程序执行端到端测试。
视觉回归检测
捕获 Web 应用程序状态的截图并进行视觉比较，以检测开发期间意外发生的 UI 变化。
试试这些提示
使用 webapp-testing 技能检查本地 HTML 文件并查找所有按钮元素。导航到文件所在位置，等待页面加载，然后列出所有按钮及其文本内容。
使用 with_server.py 在端口 3000 上启动 React 开发服务器，然后编写一个 Playwright 脚本，导航到应用，点击登录按钮，并验证是否出现仪表板。
使用 with_server.py 在端口 5000 上启动 Python Flask 后端，在端口 5173 上启动 Vite 前端。编写一个测试，在前端提交表单并验证数据是否出现在后端响应中。
导航到本地 Web 应用，等待 networkidle，捕获完整页面截图到 /tmp/debug.png，并提取页面内容 HTML。识别所有输入字段及其关联的标签。
最佳实践
- 在检查动态 Web 应用程序之前，始终等待 networkidle 状态
- 将 with_server.py 辅助工具视为黑盒使用 - 首先运行 --help 了解使用方法
- 在 DOM 检查之前捕获截图，以获取可视化调试上下文
避免
- 在等待 JavaScript 密集型应用程序的 networkidle 之前检查 DOM
- 将脚本源代码读入上下文，而 --help 已提供足够的使用信息
- 对需要运行服务器的动态应用程序使用 file:// URL