Web UI 自动化

UI 自动化 在真实浏览器中模拟用户操作，适合 回归冒烟 与发布前信心，不能替代单元测试。对照 /roadmaps/qa「Web Automation」节点，本课对比 Selenium、Playwright、Cypress 并给出选型建议。

学习目标

• 理解 UI 自动化的适用边界与 flaky 成因
• 对比 Selenium、Playwright、Cypress 的架构差异
• 用 Playwright 编写稳定的选择器与等待策略
• 将 E2E 与 testing-essentials 课程衔接

核心概念

三大框架对比

框架	特点	适用
Selenium	生态最老、多语言、WebDriver 协议	遗留项目、跨浏览器矩阵
Playwright	微软维护、自动等待、trace 调试	现代 E2E、CI 友好
Cypress	同域、时间旅行调试	前端团队、组件周边 E2E

CodeRoadMap platform 推荐 Playwright：与 test-e2e 一致。

稳定写法

test("track 详情页展示标题", async ({ page }) => {
  await page.goto("/tracks/git-essentials");
  await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
  await expect(page.getByRole("link", { name: /课时/i })).toBeEnabled();
});

• 优先 getByRole / getByLabel，避免 CSS 脆片选择器
• 用 expect 自动重试，禁止固定 sleep
• 测试数据 可重复（种子用户、专用 test track）

环境与 CI

E2E 需 backend + platform 同跑或 docker-compose 一键起栈。PR 仍以 npm test（Vitest）为主；E2E 可 nightly 或 main 分支门禁，见 test-ci。

反模式

• 测每个按钮颜色、像素级布局
• 100 条 E2E 覆盖全部页面（慢、难维护）
• 依赖生产库状态

与 testing-essentials/Spring 对照

层级	工具	课程
单元	Vitest / JUnit	test-frontend、test-junit
API	MockMvc / REST Assured	test-mockmvc、qa-api
E2E	Playwright	test-e2e

金字塔原则：UI 自动化在塔尖，数量少而精。Spring 后端变更优先加 API 测试，前端 DOM 大变才更新 E2E。

练习

• 用 Playwright 写一条：首页 → tracks → 详情页标题可见
• 列出 3 个导致 E2E flaky 的原因及对应修复
• 对比 Selenium 与 Playwright 的等待机制差异（一句话）

小结

Playwright 守关键用户路径，选择器语义化、等待智能化。 下一课专讲 API 层测试：Postman、REST Assured 与 Karate。