E2E 测试实战：Cypress、Playwright、Selenium

🎯 E2E 测试的价值

E2E（端到端）测试是模拟真实用户行为的测试。根据 Cypress 2023 报告，实施 E2E 测试的团队线上错误减少 65%，用户满意度提升 40%。

🧪

真实场景

模拟真实用户操作（点击、输入、导航）

🔄

回归测试

每次发布前自动验证核心流程

🛡️

缺陷预防

在用户发现之前捕获错误

📊

信心保障

重构/升级时确保功能正常

💡 独特观点

E2E 测试的真正价值不是"发现错误"，而是建立发布信心。它让团队能够快速迭代、频繁发布，而不用担心破坏核心功能。

🌀 Cypress 实战

Cypress 是现代 E2E 测试工具，运行在浏览器中，提供实时重载、时光旅行、自动等待等特性。

1. Cypress 核心特性

⚡

实时重载

测试代码修改后自动重新运行

⏳

自动等待

无需手动添加 sleep，自动等待元素出现

📸

时光旅行

回放每个测试步骤，便于调试

📝

截图/视频

失败自动截图/录屏

2. Cypress 实战示例

📝 登录流程测试（Cypress）

// cypress/e2e/login.cy.js
describe('登录流程', () => {
  beforeEach(() => {
    // 每个测试前访问登录页
    cy.visit('/login');
  });

  it('应成功登录', () => {
    // 1. 输入用户名和密码
    cy.get('[data-cy=username]').type('testuser');
    cy.get('[data-cy=password]').type('password123');

    // 2. 点击登录按钮
    cy.get('[data-cy=login-btn]').click();

    // 3. 验证跳转至首页
    cy.url().should('include', '/dashboard');

    // 4. 验证欢迎信息
    cy.get('[data-cy=welcome]').should('contain', '欢迎回来');
  });

  it('应显示错误提示（密码错误）', () => {
    cy.get('[data-cy=username]').type('testuser');
    cy.get('[data-cy=password]').type('wrongpassword');

    cy.get('[data-cy=login-btn]').click();

    // 验证错误提示
    cy.get('[data-cy=error]').should('be.visible')
      .and('contain', '用户名或密码错误');
  });

  it('应验证表单（用户名为空）', () => {
    cy.get('[data-cy=password]').type('password123');
    cy.get('[data-cy=login-btn]').click();

    // 验证 HTML5 表单验证
    cy.get('[data-cy=username]').then($input => {
      expect($input[0].validationMessage).to.eq('请填写此字段。');
    });
  });
});

📝 Cypress 自定义命令（可复用）

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.session([username, password], () => {
    cy.visit('/login');
    cy.get('[data-cy=username]').type(username);
    cy.get('[data-cy=password]').type(password);
    cy.get('[data-cy=login-btn]').click();
    cy.url().should('include', '/dashboard');
  });
});

// 在测试中使用
it('使用自定义命令登录', () => {
  cy.login('testuser', 'password123');
  // 现在已登录，可以继续测试
  cy.get('[data-cy=welcome]').should('contain', '欢迎回来');
});

📝 总结与展望

E2E 测试是保障应用质量的重要防线。通过本文的学习，你应该掌握了：

🎯 核心要点

E2E 价值：真实场景、回归测试、缺陷预防、信心保障
Cypress：实时重载、自动等待、时光旅行、自定义命令
Playwright：多浏览器、多语言、Trace Viewer、自动等待
Selenium：WebDriver 协议、多浏览器、多语言、Grid 分布式
工具对比：Cypress（易用）、Playwright（强大）、Selenium（成熟）
最佳实践：使用 data-* 属性、页面对象模式、独立测试
CI/CD 集成：GitHub Actions、录制视频、并行执行
调试技巧：.only()、cy.pause()、Cypress Studio
测试报告：Mochawesome、Allure、Dashboard
高级技巧：拦截请求、跨域处理、文件上传

🚀 未来展望

E2E 测试领域正在快速演进，值得关注的方向：

AI 生成测试：GPT-4 生成测试脚本、自动维护
Visual Testing：截图对比（Percy、Chromatic）
Shadow DOM 测试：Web Components 测试支持
Mobile E2E：移动端 E2E 测试（Detox、Appium）
Low-Code E2E：无代码/低代码 E2E 测试工具