大家好,我是程序员柏风,AI 最全的 Vibecoding 学习地图 http://coderoadmap.cn 作者。
非功能测试
除功能正确性外,非功能需求 决定用户能否顺畅使用:无障碍、浏览器兼容、本地化、邮件送达等。对照 /roadmaps/qa「Non-Functional Testing」节点,本课覆盖常见专项与轻量验收法。
学习目标
- 理解非功能测试与功能测试的边界
- 掌握无障碍(a11y)、兼容性、邮件测试的基本方法
- 知道何时需要专项工具 vs 手工抽检
- 将 a11y 与前端测试、Spring 邮件模块对照
核心概念
常见非功能维度
| 维度 | 验证方式 | 工具/标准 |
|---|---|---|
| 无障碍 | 键盘导航、屏幕阅读器 | axe、Lighthouse、WCAG 2.1 |
| 兼容性 | 多浏览器/分辨率 | BrowserStack、Playwright 矩阵 |
| 本地化 | 文案、日期、RTL | 手工 + 快照对比 |
| 邮件 | 触发、内容、链接 | MailHog、GreenMail |
| 可用性 | 任务完成率、误操作 | 用户测试、启发式评估 |
无障碍快速检
import { test, expect } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
test("tracks 页无严重 a11y 违规", async ({ page }) => {
await page.goto("/tracks");
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations.filter(v => v.impact === "critical")).toHaveLength(0);
});
重点:语义 HTML、focus 可见、图片 alt、表单 label——与 react-essentials 组件写法相关。
兼容性矩阵
最小集:Chrome + Firefox + Safari(WebKit);移动端 viewport 375 / 768。
视觉回归(Percy、Chromatic)可选,注意避免全页像素 diff 维护成本。
邮件测试
Spring Boot 开发环境用 MailHog 或 GreenMail 捕获 SMTP,不断真发:
# application-test.yml
spring.mail.host: localhost
spring.mail.port: 1025
断言:主题、收件人、重置链接 host 正确、无生产 URL 泄露。
与 testing-essentials/Spring 对照
| 非功能 | 功能测试补充 |
|---|---|
| axe + Playwright | test-e2e 路径可复用 |
| Vitest 组件 a11y | test-frontend + Testing Library |
| 邮件集成 | @SpringBootTest + GreenMail(test-integration) |
| API 性能 | qa-performance |
非功能 不必全自动化:a11y 严重项 CI 阻断,兼容性发布前矩阵抽检即可。
练习
- 用 Lighthouse 或 axe 扫 CodeRoadMap 首页,记录 1 条 critical/serious 问题
- 列出 tracks 页兼容性最小浏览器矩阵
- 设计「注册确认邮件」的 3 条验收点(含测试环境捕获方式)
小结
非功能测体验与包容:a11y 用 axe,邮件用 MailHog,兼容靠矩阵抽检。 下一课综合练习:编写 API + E2E 测试计划。