用途
该技能用于构建可靠、快速且可维护的端到端（E2E）测试套件，帮助团队在用户之前发现回归问题，从而有信心快速交付代码。它主要面向使用 Playwright 和 Cypress 的 E2E 测试场景。
适用时机
资料列出以下使用场景：
- 实现端到端测试自动化
- 调试不稳定或不可靠的测试
- 测试关键用户工作流
- 搭建 CI/CD 测试流水线
- 跨多个浏览器进行测试
- 验证无障碍（accessibility）要求
- 测试响应式设计
- 建立 E2E 测试标准
核心概念
E2E 测试基础
适合用 E2E 测试的内容：关键用户旅程（登录、结账、注册）、复杂交互（拖拽、多步骤表单）、跨浏览器兼容性、真实 API 集成、认证流程。
不适合用 E2E 测试的内容：单元级逻辑（应使用单元测试）、API 契约（应使用集成测试）、边缘情况（太慢）、内部实现细节。
测试理念
测试金字塔：E2E 测试数量少，聚焦关键路径；集成测试更多，测试组件交互；单元测试最多，快速且隔离。
最佳实践：测试用户行为而非实现；保持测试独立；使测试具有确定性；优化速度；使用 data-testid 而非 CSS 选择器。
Playwright 模式
配置
资料给出 playwright.config.ts 示例，包含 testDir、timeout、expect.timeout、fullyParallel、forbidOnly、retries、workers、reporter、baseURL、trace、screenshot、video 以及 chromium、firefox、webkit、mobile 等多个 projects 配置。
模式 1：页面对象模型（Page Object Model）
通过 LoginPage 类封装页面元素与操作，例如 emailInput、passwordInput、loginButton、errorMessage 定位器，以及 goto、login、getErrorMessage 方法。测试中实例化页面对象并调用其方法，再使用断言验证 URL 与页面元素。
模式 2：测试数据夹具（Fixtures）
使用 base.extend 定义 testUser 和 adminUser 夹具，在 setup 中创建测试用户，在 teardown 中清理用户数据。测试中通过参数注入使用夹具。
模式 3：等待策略
避免固定超时（如 waitForTimeout），改用等待特定条件：waitForLoadState、waitForURL、waitForSelector；更推荐使用自动等待的断言（如 toBeVisible、toBeEnabled）；也可等待 API 响应（waitForResponse）或使用 Promise.all 等待多个条件。
模式 4：网络模拟与拦截
使用 page.route 模拟 API 响应（如返回 500 错误）、拦截并修改请求（如修改 postData）、模拟第三方服务（如 Stripe 支付）。
Cypress 模式
配置
资料给出 cypress.config.ts 示例，包含 baseUrl、viewportWidth、viewportHeight、video、screenshotOnRunFailure、defaultCommandTimeout、requestTimeout 以及 setupNodeEvents。
模式 1：自定义命令
通过 Cypress.Commands.add 定义 login、createUser、dataCy 等命令，并在测试中使用。
模式 2：Cypress intercept
使用 cy.intercept 模拟 API 调用、修改响应、模拟慢速网络（如延迟 3 秒）。
高级模式
模式 1：视觉回归测试
使用 Playwright 的 toHaveScreenshot 对首页、按钮不同状态（默认、悬停、禁用）进行截图比对，可设置 fullPage、maxDiffPixels。
模式 2：分片并行测试
在配置中定义多个 shard 项目，通过 --shard=1/4 等命令在 CI 中运行。
模式 3：无障碍测试
安装 @axe-core/playwright，使用 AxeBuilder 分析页面或表单的无障碍违规情况，并断言 violations 为空数组。
最佳实践
- 使用 data-testid 或 data-cy 等数据属性作为稳定选择器
- 避免脆弱选择器，不要依赖 CSS 类或 DOM 结构
- 测试用户行为（点击、输入、查看），而非实现细节
- 保持测试独立，每个测试应隔离运行
- 清理测试数据，在每个测试中创建和销毁
- 使用页面对象封装页面逻辑
- 使用有意义的断言，检查用户可见行为
- 优化速度，尽可能模拟并使用并行执行
资料还给出坏选择器与好选择器的对比示例，并提到可安装 @testing-library/cypress 使用 findByRole、findByLabelText 等查询。
常见陷阱
- 不稳定测试：使用正确的等待，而非固定超时
- 慢测试：模拟外部 API，使用并行执行
- 过度测试：不要用 E2E 测试每个边缘情况
- 耦合测试：测试之间不应相互依赖
- 差选择器：避免 CSS 类和 nth-child
- 无清理：每个测试后清理测试数据
- 测试实现：测试用户行为，而非内部细节
调试失败测试
Playwright 调试方式包括：以 headed 模式运行（npx playwright test --headed）、以 debug 模式运行（npx playwright test --debug）、使用 trace viewer、截图与视频保存、使用 test.step 改善报告、使用 page.pause() 暂停执行并打开检查器。
限制
资料未提供该技能的具体安装命令、收费方式、价格、平台支持范围或效果保证等信息。