E2E 测试

单元测试（testing-essentials）验证函数与组件；端到端（E2E） 在真实浏览器里点路径、填表单、看 URL——最接近用户。React 项目常见 Cypress、Playwright；本课讲选型与最小可维护套件。

学习目标

• 区分 Testing Library 单元测与 E2E 的职责
• 搭建 Playwright 或 Cypress smoke 流程
• 编写稳定 selector，减少 flaky

测试金字塔（前端）

        E2E（少、慢、贵）
      集成 / 组件测（中）
    单元（多、快）

test-frontend 与 test-e2e 已讲 Jest/Vitest；本课聚焦 React SPA / Next.js 在浏览器里跑。

Cypress vs Playwright

	Cypress	Playwright
浏览器	主要 Chromium 系	Chromium、Firefox、WebKit
并行 CI	需 Dashboard 或拆分	内置 worker
API 风格	链式 .cy.get()	async await page.locator()
Next.js	可用	官方示例多

新项目倾向 Playwright：多浏览器、trace 调试、CI 友好。已有 Cypress 套件不必强迁。

Playwright 最小示例

import { test, expect } from "@playwright/test";

test("tracks 列表可打开详情", async ({ page }) => {
  await page.goto("http://localhost:3000/tracks");
  await page.getByRole("link", { name: "React 核心" }).click();
  await expect(page).toHaveURL(/\/tracks\/react-essentials/);
  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
});

优先 getByRole / getByLabel——与 Testing Library 哲学一致，比 CSS class 稳。

稳定与 CI

• 测用户可见行为，不测实现（不绑 React 内部 state 名）
• 隔离数据：seed 测试库或 mock API，避免依赖生产
• CI 里 npm run build && npm run start 再跑 E2E；Next.js 见 nextjs-essentials 部署章节
• flaky 用 retry + trace-on-first-retry，别无限加 wait(5000)

与 react-essentials 练习衔接

react-practice 的 Course Explorer：至少 1 条 E2E——首页 → 详情 → 课时页。

练习

• 为 platform 或本地 demo 写 2 条 Playwright smoke
• 故意改文案导致测试失败，确认报错可读
• 读 test-ci，把 E2E 加进 GitHub Actions 草图

小结

E2E 保关键用户路径；单元测保逻辑细节。 下一课 React Native 与 mobile 节点概览。