E2E 端到端测试

1. E2E 测试：从用户视角验证整条链路#

单元测试验证零件，集成测试验证部件，E2E（端到端）测试验证整车： 启动真实应用（前端 + 后端 + 数据库），模拟真实用户的完整操作路径—— 打开页面、登录、下单、查看结果，断言每一步的系统表现。

E2E 是测试金字塔的塔尖，特征是「少、慢、贵、真实」：

结论先行：E2E 只覆盖关键业务路径（登录、下单、支付这类「挂了就没法 做生意」的流程），分支覆盖交给下层。

前置知识：测试层级、HTML 与 CSS 选择器、Node.js 基础。

2. 选型：为什么示例用 Playwright#

Cypress 与 Playwright 是当前两大主流（框架层面对比见「自动化测试框架 对比」）。本文示例用 Playwright，理由是它对新项目零负担：三引擎 （Chromium/Firefox/WebKit）官方支持、内置测试运行器与断言、自动等待 机制从源头减少 flaky、Trace Viewer 与 UI Mode 提供逐帧回放式排错。

npm init playwright@latest       # 脚手架：生成配置、示例、安装浏览器
npx playwright test              # 运行
npx playwright test --ui         # UI Mode：交互式调试

3. 完整示例：登录并查看工作台#

// tests/dashboard.spec.ts —— 自包含可运行
import { test, expect } from '@playwright/test';

test('用户登录后进入工作台', async ({ page }) => {
  // Arrange：直达登录页
  await page.goto('https://app.example.com/login');

  // Act：语义定位 + 交互
  await page.getByLabel('邮箱').fill('user@example.com');
  await page.getByLabel('密码').fill('correct-password');
  await page.getByRole('button', { name: '登录' }).click();

  // Assert：web-first 断言，自动重试直到条件满足或超时
  await expect(page).toHaveURL(/.*dashboard/);
  await expect(page.getByRole('heading', { name: '欢迎' })).toBeVisible();
  await expect(page.getByTestId('order-list').locator('li')).toHaveCount(5);
});

三个值得注意的机制：

• 自动等待：click() 会等到元素可见、可点击，expect(...).toHaveURL 会自动轮询重试——不需要也不应该出现 waitForTimeout(3000)。
• 语义定位：getByRole/getByLabel 按「用户感知的角色与标签」定位， 而不是 CSS 类名。改版式不破坏测试，顺带守护可访问性。
• fixture 注入：{ page } 是 Playwright 的 fixture，每个用例拿到 全新隔离的浏览器上下文，用例间天然无状态污染。

配置样例（脚手架生成的 playwright.config.ts 核心项）：

export default defineConfig({
  use: {
    baseURL: 'http://localhost:3000',          // goto('/login') 自动拼接
    trace: 'retain-on-failure',                // 失败时保留 Trace 供回放
    screenshot: 'only-on-failure',
  },
  workers: process.env.CI ? 4 : undefined,     // CI 并行分片提速
  retries: process.env.CI ? 2 : 0,             // CI 重试，本地暴露 flaky
});

4. 用 Trace 与 UI Mode 排查失败#

E2E 最大的历史痛点是「失败时只看到最后一帧」。Playwright 的应对：

• Trace Viewer：npx playwright show-trace trace.zip 打开失败记录， 每一步操作都有截图、DOM 快照、网络请求与控制台日志，可前后逐帧回放， 「猜失败原因」变成「看失败录像」；
• UI Mode：开发期的交互式调试器，支持 watch 模式（改代码自动重跑）、 单步执行、时间旅行查看每步 DOM——相当于给 E2E 装上了断点调试。

npx playwright test --trace on          # 全量记录
npx playwright show-report              # HTML 报告内嵌 Trace 入口

5. Page Object 模式：对抗 UI 变更#

当测试超过几条，定位器散落各处会让维护成本失控。Page Object 把「页面 结构与操作」收敛成类，测试只写业务流程：

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async open() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.getByLabel('邮箱').fill(email);
    await this.page.getByLabel('密码').fill(password);
    await this.page.getByRole('button', { name: '登录' }).click();
  }
}

// 测试变得只剩业务语言
test('登录后进入工作台', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.open();
  await loginPage.login('user@example.com', 'correct-password');
  await expect(page).toHaveURL(/.*dashboard/);
});

边界提醒：Page Object 只放「定位与操作」，不放断言（断言属于测试， 否则测试逻辑被藏进页面对象，可读性反而下降）。

6. Flaky 治理：E2E 的生死线#

E2E 的公信力取决于稳定性。按优先级排列的治理手段：

1. 环境确定性：固定视口尺寸、禁用动画与过渡、固定时钟与随机种子； 测试数据每次用例自建（或从打点的 API 工厂拿），不依赖共享的「造好 的数据」。
2. 等待策略：依赖自动等待与条件断言，杜绝 sleep。
3. 隔离并行：每用例独立上下文/独立数据，多 worker 并行互不干扰。
4. 重试与隔离区：CI 配置少量 retries 兜底，但把「重试后通过」的 用例自动标记并进隔离区修复——重试是缓冲，不是修复。
5. 分层瘦身：登录态用 storageState 复用，避免每条用例都走一遍 登录流程（登录流程本身保留 1-2 条专项用例）。

7. 常见陷阱#

• 什么都往 E2E 堆：把表单校验、边界计算写成 E2E，套件涨到一小时， 全员开始跳过。回到金字塔：E2E 数量控制在个位数到几十条。
• 依赖具体数据：断言「列表第一行是 Alice」但共享环境里谁都能插入 Alice。自建数据 + 断言自建的标识。
• CSS 类名定位：样式重构（Tailwind 类名尤其爱变）大面积红测试。 用语义定位或 data-testid。
• 在 E2E 里 Mock 一切：Mock 后端后 E2E 退化成「浏览器里的集成测试」， 失去真实链路保护的意义。第三方支付这类不可控外部依赖例外（用替身或 沙箱环境）。
• 本地过、CI 挂：视口、时区、字体、动画在两种环境的差异。统一配置 viewport/locale，必要时 page.emulateMedia({ reducedMotion: 'reduce' })。

小结#

• 初学者要点：E2E 只保护关键业务路径；选型优先 Playwright/Cypress 这类 内置自动等待的现代框架；定位用 getByRole/getByLabel；断言交给 自动重试的 web-first 断言，不写 sleep。
• 进阶注意：Trace Viewer 与 UI Mode 把失败排查从猜测变成回放；Page Object 收敛定位器但不含断言；flaky 治理靠环境确定性、数据自建与 隔离区机制，重试只是兜底；登录态复用（storageState）是套件提速的 第一刀。