此技能使 Claude Code 能够使用 Playwright 自动化浏览器交互，处理开发服务器检测、测试脚本执行和全面的 Web 测试功能。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“playwright-skill”。 Test my local app at localhost:3000
预期结果:
Auto-detected dev server on port 3000. Launching browser to test...
Page title: My Web App
Viewport: 1280x720
✓ Page loaded successfully
✓ No console errors detected
✓ Screenshot saved to /tmp/screenshot-2024-01-15.png
正在使用“playwright-skill”。 Check responsive design
预期结果:
Testing across viewports:
- Mobile (375x667): ✓ No layout issues
- Tablet (768x1024): ✓ No layout issues
- Desktop (1280x720): ✓ No layout issues
All viewport tests passed. Screenshots saved to /tmp/
安全审计
低风险This is a legitimate browser automation skill using the Playwright library. The static analyzer flagged many patterns but most are false positives: shell commands in documentation are usage examples, not dangerous execution; network access is required for browser automation; filesystem access is for writing test scripts to /tmp; environment variables are for configuration. No malicious intent detected.
中风险问题 (1)
低风险问题 (2)
风险因素
⚙️ 外部命令 (1)
🌐 网络访问 (1)
📁 文件系统访问 (1)
🔑 环境变量 (1)
⚡ 包含脚本 (1)
质量评分
你能构建什么
Web 开发人员测试
通过自动检测开发服务器并跨多个视口大小运行自动化浏览器测试，在本地测试 Web 应用程序。
QA 自动化
为 Web 应用程序创建端到端测试，验证登录流程，并检查不同设备上的响应式设计。
网页抓取
从需要 JavaScript 渲染的网站提取内容，包括屏幕截图和结构化数据提取。
试试这些提示
测试我的本地 Web 应用程序。首先检测任何运行中的开发服务器，然后验证主页是否正常加载并检查控制台错误。
检查我的 Web 应用程序在移动端、平板电脑和桌面端视口上是否美观。在每个尺寸下截取屏幕截图并报告任何布局问题。
测试 [URL] 上的登录流程。填写凭据，点击登录，然后通过检查仪表板或用户菜单来验证成功认证。
在 [URL] 上填写并提交联系表单，使用测试数据。验证表单是否成功提交并检查任何验证错误。
最佳实践
- 始终通过常量或环境变量使用参数化 URL 以保持可维护性
- 将测试脚本写入 /tmp 以保持项目目录整洁
- 调试时使用可见浏览器模式（headless: false），CI 时切换到无头模式
- 正确使用 waitForSelector 和 waitForNavigation 处理异步操作
避免
- 不要在测试脚本中硬编码凭据 - 请改用环境变量
- 未经授权不要针对生产网站进行测试
- 不要仅依赖 sleep/定时器 - 使用适当的等待条件以获得可靠的测试
- 避免将测试文件写入技能目录 - 始终使用 /tmp