（3287期）Cypress – 零 flaky 的 E2E 测试最佳实践

零 flaky 的 E2E 测试最佳实践 AI 驱动 Cypress 测试专家，遵循最佳实践消除 flaky 测试，加速 CI/CD 交付 使用说明 核心用法 Cypress 是前端 E2E 和组件测试的行业标准框架，本 skill 提供结构化指导，帮助开发团队编写可靠、可维护的测试套件。 测试架构与规范 目录结构：标准 cypress/ 目录，区分 e2e/、component/、fixtures/ 和 support/ 层级 选择器策略：强制优先使用 data-testid / data-cy 属性，避免 CSS 选择器和 DOM 结构依赖 等待机制：完全禁用固定延时 cy.wait(ms)，强制使用 cy.intercept() + cy.wait('@alias') 等待实际网络状态 断言原则：单测试单关注点，配合 Cypress 自动重试机制确保稳定性 关键最佳实践 | 领域 | 推荐方案 ||------|---------|| 重复操作 | 自定义命令 Cypress.Commands.add() + cy.session() 缓存登录态 || 测试数据 | fixtures/ JSON 文件配合 cy.fixture() 加载 || 状态隔离 | beforeEach 中清理 cookies、localStorage、mock 拦截 || TypeScript | 完整类型声明支持，增强 IDE 提示和重构安全 || CI/CD 配置 | cypress.config.ts 中配置超时、重试、viewport 参数 | 调试能力 时光旅行：Command Log 点击回查 DOM 快照 断点调试：cy.pause() / debugger 支持逐步执行 可视化重放：npx cypress open 交互模式定位失败 显著优点 权威性保障：源于 Cypress 官方文档与社区最佳实践，覆盖 selector 策略、retry-ability 等核心概念 反脆弱设计：明确禁止 7 类常见陷阱（fixed waits、CSS selectors、test coupling 等），从源头预防 flaky tests 工程化完整：从项目初始化、TypeScript 配置到 CI 集成形成闭环 安全透明：零外部 API 调用，测试数据完全本地隔离 潜在局限 框架绑定：规则深度耦合 Cypress API，不适用于 Playwright、Selenium 等其他 E2E 工具 运行时依赖：需要 Node.js 环境和 npx 命令可用 学习曲线：cy.intercept、cy.session 等高级特性需要一定上手时间 浏览器限制：仅支持 Chromium、Firefox、WebKit（Electron），无 IE/旧版 Safari 支持 适合人群 前端团队需要建立或重构 E2E 测试体系 现有 Cypress 项目遭遇 flaky tests 困扰 React/Vue/Angular 组件测试需求 DevOps 工程师配置 CI/CD 测试流水线 常规风险 | 风险等级 | 描述 | 缓解措施 ||---------|------|---------|| 低风险 | 可选 Cypress Cloud 上传测试结果 | 本 skill 不启用，需显式配置 CYPRESSRECORDKEY || 极低风险 | 测试代码可能含 mock 用户数据 | fixtures 建议用脱敏假数据，避免真实凭证 || 运维风险 | CI 环境缺少浏览器依赖 | 推荐 Docker 镜像 cypress/included 标准化环境 | 原始说明 Write reliable E2E and component tests with Cypress avoiding flaky selectors, race conditions, and CI failures.