测试与毕业项目：建立上线信心 · 前端基础知识库

WHY IT MATTERS

先用一句白话理解

测试像桥梁验收：材料抽检、结构联调、整车通行和极端天气测试各自发现不同问题。只做一种测试，无论数量多大，都不能证明整座桥可靠。

LEARNING OUTCOMES

学完你能做到什么

按失败风险设计分层测试策略

编写关注用户行为而非内部实现的组件测试

使用真实浏览器覆盖核心流程、网络异常和跨浏览器差异

诊断不稳定测试并利用 trace、截图和日志定位失败

把功能、类型、无障碍、性能和构建检查接入 CI

CONCEPT DEEP DIVE

把每个核心概念讲透

不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。

01CORE CONCEPT

测试范围、风险矩阵和单元/集成/端到端分层

先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“交付企业 AI 知识工作台：支持搜索、筛选、离线访问、主题切换、键盘操作和错误恢复；必须通过严格 TypeScript、跨浏览器 E2E、WCAG 2.2 AA 审计及性能预算。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。

02CORE CONCEPT

纯函数、边界值、属性测试思想与测试替身

03CORE CONCEPT

Vitest、Browser Mode、fixture、mock 与 fake timer

04CORE CONCEPT

Testing Library 的用户视角查询和断言

05CORE CONCEPT

Playwright 跨浏览器、网络模拟、并行、重试与 trace

06CORE CONCEPT

视觉回归、无障碍自动扫描和人工测试边界

07CORE CONCEPT

性能预算、安全检查和持续集成门禁

08CORE CONCEPT

不稳定测试治理、故障复盘和发布清单

CONCEPT MAP

这一章的学习步骤

1测试范围、风险矩阵和单元/集成/端到端分层

2纯函数、边界值、属性测试思想与测试替身

3Vitest、Browser Mode、fixture、mock 与 fake timer

4Testing Library 的用户视角查询和断言

5Playwright 跨浏览器、网络模拟、并行、重试与 trace

6视觉回归、无障碍自动扫描和人工测试边界

7性能预算、安全检查和持续集成门禁

8不稳定测试治理、故障复盘和发布清单

STEP 01

为一个模块写出正常、边界和失败路径测试

STEP 02

在真实浏览器中完成组件交互测试

STEP 03

用 Playwright 覆盖跨浏览器核心业务旅程

STEP 04

从失败 trace 中独立定位一次偶发问题

STEP 05

完成毕业项目上线前的全套质量报告

HANDS-ON PROJECT

动手任务

PROJECT BRIEF

交付企业 AI 知识工作台：支持搜索、筛选、离线访问、主题切换、键盘操作和错误恢复；必须通过严格 TypeScript、跨浏览器 E2E、WCAG 2.2 AA 审计及性能预算。

交付清单

✓可部署的毕业项目
✓按风险编写的测试策略与覆盖矩阵
✓Vitest 单元/浏览器测试和 Playwright E2E
✓无障碍、性能与跨浏览器验收报告
✓架构决策记录、发布清单和项目复盘

MINIMUM RUNNABLE CODE

从用户能看到的结果开始测试

typescript

import { expect, test } from "vitest";

function totalPrice(prices: number[]): number {
  if (prices.some((price) => price < 0)) {
    throw new Error("价格不能为负数");
  }
  return prices.reduce((total, price) => total + price, 0);
}

test("计算订单总价", () => {
  expect(totalPrice([19, 23, 8])).toBe(50);
});

test("拒绝负数价格", () => {
  expect(() => totalPrice([20, -1])).toThrow("价格不能为负数");
});

先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。

DELIBERATE PRACTICE

三级练习：从复现到生产

每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。

LEVEL 1 · 基础复现

让核心机制第一次跑通

为一个模块写出正常、边界和失败路径测试
在真实浏览器中完成组件交互测试
用 Playwright 覆盖跨浏览器核心业务旅程
从失败 trace 中独立定位一次偶发问题
完成毕业项目上线前的全套质量报告

LEVEL 2 · 独立改造

改变约束，验证你真的理解

不看教程，独立完成：按失败风险设计分层测试策略
不看教程，独立完成：编写关注用户行为而非内部实现的组件测试
不看教程，独立完成：使用真实浏览器覆盖核心流程、网络异常和跨浏览器差异
不看教程，独立完成：诊断不稳定测试并利用 trace、截图和日志定位失败
不看教程，独立完成：把功能、类型、无障碍、性能和构建检查接入 CI

LEVEL 3 · 生产挑战

把实验变成能交付的工程

可部署的毕业项目
按风险编写的测试策略与覆盖矩阵
Vitest 单元/浏览器测试和 Playwright E2E
无障碍、性能与跨浏览器验收报告
架构决策记录、发布清单和项目复盘
检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。

COMMON PITFALLS

最容易踩的坑

把覆盖率当成质量本身

断言组件内部状态，导致每次重构都要重写测试

用固定等待掩盖异步状态和竞态问题

自动化无障碍扫描通过后跳过人工验证

遇到偶发失败只增加重试次数，不调查根因

SELF CHECK

先回答，再展开参考答案

Q01这一课最核心的业务目标是什么？＋

最后把所有能力汇入企业 AI 知识工作台。测试不追求一个漂亮覆盖率数字，而是根据风险选择单元、浏览器组件、端到端、无障碍与性能检查。

Q02如果只能保留三个验收结果，应该保留什么？＋

可部署的毕业项目；按风险编写的测试策略与覆盖矩阵；Vitest 单元/浏览器测试和 Playwright E2E

Q03学习过程中最需要主动避免什么？＋

把覆盖率当成质量本身；断言组件内部状态，导致每次重构都要重写测试；用固定等待掩盖异步状态和竞态问题；自动化无障碍扫描通过后跳过人工验证；遇到偶发失败只增加重试次数，不调查根因

Q04怎样证明你不是“看懂了”，而是真的会做？＋

独立完成“交付企业 AI 知识工作台：支持搜索、筛选、离线访问、主题切换、键盘操作和错误恢复；必须通过严格 TypeScript、跨浏览器 E2E、WCAG 2.2 AA 审计及性能预算。”，并用测试、数据或运行结果逐项验收交付清单。

PRODUCTION READINESS

本课完成检查表

全部能打勾，再进入下一课。

□目标明确：按失败风险设计分层测试策略
□核心机制已用最小实验验证：为一个模块写出正常、边界和失败路径测试
□风险已检查：把覆盖率当成质量本身
□风险已检查：断言组件内部状态，导致每次重构都要重写测试
□风险已检查：用固定等待掩盖异步状态和竞态问题
□风险已检查：自动化无障碍扫描通过后跳过人工验证
□风险已检查：遇到偶发失败只增加重试次数，不调查根因
□交付物可复现：可部署的毕业项目
□交付物可复现：按风险编写的测试策略与覆盖矩阵
□交付物可复现：Vitest 单元/浏览器测试和 Playwright E2E
□交付物可复现：无障碍、性能与跨浏览器验收报告
□交付物可复现：架构决策记录、发布清单和项目复盘

PRIMARY SOURCES

继续深入的官方资料

Vitest：Browser Mode Testing Library 官方文档 Playwright 官方文档 Playwright：Accessibility testing

课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。