技能 e2e-testing-patterns
📦
编写端到端测试具有挑战性。此技能提供了经过实战检验的 Playwright 和 Cypress 模式，帮助创建稳定、可维护的测试，在用户发现问题之前捕获 bug。
支持: Claude Codex Code(CC)
1
下载技能 ZIP
2
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
3
开启并开始使用
测试它
正在使用“e2e-testing-patterns”。 用 Playwright 创建登录测试
预期结果:
- 步骤 1：创建 LoginPage 类，包含 email、password 和 submit 按钮的定位器
- 步骤 2：实现 goto() 和 login(email, password) 方法
- 步骤 3：使用页面对象编写测试，包含 URL 和成功消息的断言
- 步骤 4：添加无效凭据的错误处理测试
正在使用“e2e-testing-patterns”。 如何调试不稳定的测试？
预期结果:
- 1. 使用显式等待替换固定的 waitForTimeout
- 2. 使用跟踪查看器：npx playwright test --trace on
- 3. 在失败时添加截图
- 4. 检查异步操作中的竞争条件
- 5. 隔离测试数据以防止跨测试污染
安全审计
安全v1 • 2/24/2026
All 63 static findings are false positives. The analyzer incorrectly interprets markdown code fences as Ruby shell commands, JavaScript operators as cryptographic issues, and test configuration as system reconnaissance. This is a documentation skill with educational content about E2E testing patterns using Playwright and Cypress. No actual security risks exist.
2
已扫描文件
576
分析行数
3
发现项
1
审计总数
风险因素
⚙️ 外部命令 (32)
resources/implementation-playbook.md:25-33 resources/implementation-playbook.md:33-46 resources/implementation-playbook.md:46-77 resources/implementation-playbook.md:77-81 resources/implementation-playbook.md:81-137 resources/implementation-playbook.md:137-141 resources/implementation-playbook.md:141-160 resources/implementation-playbook.md:160-194 resources/implementation-playbook.md:194-198 resources/implementation-playbook.md:198-227 resources/implementation-playbook.md:227-231 resources/implementation-playbook.md:231-277 resources/implementation-playbook.md:277-283 resources/implementation-playbook.md:283-301 resources/implementation-playbook.md:301-305 resources/implementation-playbook.md:305-331 resources/implementation-playbook.md:331-337 resources/implementation-playbook.md:337-341 resources/implementation-playbook.md:341-371 resources/implementation-playbook.md:371-377 resources/implementation-playbook.md:377-405 resources/implementation-playbook.md:405-409 resources/implementation-playbook.md:409-431 resources/implementation-playbook.md:431-435 resources/implementation-playbook.md:435-459 resources/implementation-playbook.md:459-463 resources/implementation-playbook.md:463 resources/implementation-playbook.md:463-472 resources/implementation-playbook.md:472-481 resources/implementation-playbook.md:481-495 resources/implementation-playbook.md:495-522 SKILL.md:43
🌐 网络访问 (4)
🔑 环境变量 (8)
resources/implementation-playbook.md:57 resources/implementation-playbook.md:58 resources/implementation-playbook.md:59 resources/implementation-playbook.md:174 resources/implementation-playbook.md:57 resources/implementation-playbook.md:58 resources/implementation-playbook.md:59 resources/implementation-playbook.md:174
审计者: claude
质量评分
38
架构
100
可维护性
85
内容
50
社区
100
安全
100
规范符合性
你能构建什么
为新项目设置 E2E 测试
从零开始配置 Playwright 或 Cypress，包含适当的结构、报告器和 CI 集成
修复不稳定测试
使用适当的等待策略和稳定的定位器替换脆弱的选择器和固定超时
扩展测试执行
实现并行执行和测试分片，将 CI 流水线时间从数小时缩短到数分钟
试试这些提示
创建登录测试
使用 Playwright 为登录页面创建端到端测试。包含适当的选择器、断言，以及针对成功和失败登录尝试的错误处理。
模拟 API 响应
展示如何在 Cypress 中模拟 API 响应，以测试错误处理，而无需依赖真实的后端服务。
设置 CI 流水线
配置 Playwright 在 CI 中运行测试，包含并行执行、重试逻辑和 HTML 报告生成。
可访问性测试
使用 axe-core 实现可访问性测试，确保应用程序符合 WCAG 指南。
最佳实践
- 使用 data-testid 或语义角色代替 CSS 选择器以获得稳定的定位器
- 通过适当的测试数据设置和清理保持测试独立性
- 在 CI 中并行运行测试以减少执行时间
避免
- 使用固定超时如 waitForTimeout(3000) - 会导致不稳定性
- 测试实现细节而非用户可见的行为
- 在测试之间共享状态 - 会导致级联失败
常见问题
Playwright vs Cypress：我应该选择哪个？
Playwright 提供更好的跨浏览器支持和更快的执行速度。Cypress 拥有更成熟的生态系统和更轻松的调试体验。根据您的浏览器需求和团队熟悉程度进行选择。
如何让测试更稳定？
使用显式等待代替超时，避免测试实现细节，确保测试数据正确隔离，并为依赖网络的操作添加重试逻辑。
如何并行运行测试？
配置 Playwright workers 或 Cypress 并行化。使用测试分片在 CI 中将测试分配到多台机器上。确保测试独立以避免冲突。
我可以用 E2E 工具测试 API 吗？
是的，Playwright 和 Cypress 都支持 API 测试。在 Playwright 中使用 page.request() 或在 Cypress 中使用 cy.request() 进行直接 API 调用，无需 UI 交互。
如何在测试中处理认证？
使用 API 登录设置 cookie 或 token，或使用浏览器存储 API 直接设置会话数据。为避免 UI 登录，在每个测试中直接使用已认证的会话以获得更好的性能。
什么是页面对象模型？
一种设计模式，将页面特定的逻辑和选择器封装在类中。通过将页面更改集中在一处而不是分散在所有测试中，提高测试的可维护性。