Cypress #

什么是 Cypress？ #

Cypress 是一个新一代的前端端到端（E2E）测试框架，专为现代 Web 应用设计。它基于 Node.js 构建，可以在浏览器中运行，提供了完整的测试解决方案。与传统的 Selenium 不同，Cypress 在浏览器内部运行，能够直接访问应用程序代码，提供更快速、可靠的测试体验。

核心定位 #

text 
┌─────────────────────────────────────────────────────────────┐
│                         Cypress                              │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  测试运行器   │  │  断言库      │  │  Mock 功能   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  时间旅行    │  │  实时重载    │  │  网络控制    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

Cypress 的优势 #

优势 说明
实时重载 代码修改后自动重新运行测试
时间旅行 查看测试执行的每一步快照
调试能力 直接在浏览器 DevTools 中调试
自动等待 智能等待元素出现和操作完成
网络控制 完整的网络请求 Mock 和拦截
截图视频 自动截图和录制测试视频

文档结构 #

本指南按以下结构组织，适合初学者按顺序学习：

1. 入门基础 #

主题 描述 文档链接
Cypress 简介 Cypress 的发展历史、核心特点、架构设计 intro.md
安装与配置 环境搭建、项目初始化、配置选项 installation.md
基础使用 测试结构、生命周期、测试组织 basics.md
选择器 元素定位策略、最佳实践 selectors.md

2. 断言与交互 #

主题 描述 文档链接
断言 内置断言、自定义断言、断言策略 assertions.md
用户交互 点击、输入、拖拽等交互操作 interactions.md
命令 常用命令、自定义命令、命令链 commands.md

3. 进阶功能 #

主题 描述 文档链接
异步处理 Promise、等待策略、重试机制 async.md
网络请求 请求拦截、Mock、API 测试 network.md
测试数据 Fixtures、数据驱动、动态数据 fixtures.md

4. 高级主题 #

主题 描述 文档链接
页面对象模式 Page Object 模式、代码组织 page-objects.md
高级特性 插件、自定义命令、环境变量 advanced.md
最佳实践 测试策略、代码规范、性能优化 best-practices.md

学习建议 #

初学者路线 #

text 
简介 → 安装配置 → 基础使用 → 选择器 → 断言

进阶路线 #

text 
用户交互 → 命令 → 异步处理 → 网络请求 → 测试数据

高级路线 #

text 
页面对象模式 → 高级特性 → 最佳实践 → CI/CD 集成

Cypress vs 其他测试框架 #

Cypress vs Selenium #

特性 Cypress Selenium
架构 浏览器内运行 浏览器外运行
速度 快 较慢
调试 内置 DevTools 需要额外配置
自动等待 内置 需显式等待
网络控制 内置 需要代理
跨浏览器 主要是 Chromium 支持所有浏览器

Cypress vs Playwright #

特性 Cypress Playwright
跨浏览器 ⚠️ 有限支持 ✅ Chromium/Firefox/WebKit
多标签页 ❌ 不支持 ✅ 支持
语言支持 ⚠️ 仅 JavaScript ✅ 多语言
学习曲线 平缓 中等
生态系统 成熟 发展中

快速开始 #

安装 #

bash 
npm install cypress --save-dev

打开 Cypress #

bash 
npx cypress open

第一个测试 #

javascript 
// cypress/e2e/login.cy.js
describe('登录功能', () => {
  it('用户可以登录', () => {
    cy.visit('/login');
    
    cy.get('#username').type('testuser');
    cy.get('#password').type('password123');
    cy.get('button[type="submit"]').click();
    
    cy.get('.welcome-message').should('contain', '欢迎回来');
  });
});

运行测试 #

bash 
npx cypress run

核心概念 #

测试结构 #

javascript 
describe('测试套件', () => {
  before(() => {
    // 所有测试前执行一次
  });
  
  beforeEach(() => {
    // 每个测试前执行
  });
  
  it('测试用例', () => {
    // 测试代码
  });
  
  afterEach(() => {
    // 每个测试后执行
  });
  
  after(() => {
    // 所有测试后执行一次
  });
});

命令链 #

javascript 
cy.visit('/dashboard')
  .get('.user-name')
  .should('contain', 'John')
  .click()
  .url()
  .should('include', '/profile');

断言 #

javascript 
// 隐式断言
cy.get('.status').should('be.visible');
cy.get('.count').should('have.text', '5');

// 显式断言
expect(5).to.equal(5);
assert.isTrue(true);

应用场景 #

1. E2E 测试 #

完整的用户流程测试，验证应用的核心功能。

2. 组件测试 #

独立测试 UI 组件的行为。

3. API 测试 #

验证后端 API 的正确性。

4. 视觉回归测试 #

UI 视觉对比测试，检测界面变化。

学习资源 #

开始学习 #

准备好了吗？让我们从 Cypress 简介 开始你的 E2E 测试学习之旅！

最后更新：2026-03-28