SuperAPI AI 工具集

frontend-testing

测试与质量

查看项目

更新于 10-16 08:45

技能介绍

用途:这是一套前端测试工作方法,目标是先从用户/干系人视角用验收标准驱动测试,再补充实现测试以增强代码健壮性。核心理念引用 Kent C. Dodds:测试越接近软件的真实使用方式,越能带来信心。

主要能力与流程:

  1. 先写验收标准测试。在阅读实现前,从工单、用户故事、Figma 标注、功能需求或产品负责人澄清中提取标准,整理成清单,作为第一批测试,避免循环验证。
  2. 把标准映射为用例:正常路径、边界情况、错误情况、可访问性。
  3. 验收测试通过后补充单元测试,覆盖标准未涵盖的空值、未定义、空数组、边界值、算法正确性、错误处理路径与复杂分支。
  4. 按场景选测试类型:纯逻辑用 Vitest;组件行为用 Vitest + Testing Library;用户流程用 Playwright;语义结构用 Playwright 的 toMatchAriaSnapshot;视觉外观用截图;可访问性用 Playwright + axe-core。单元测试 DOM 环境优先 happy-dom 而非 jsdom,其 API 限制可作为该测试是否应改为 E2E 的信号。
  5. 提倡测试先行或紧随实现,避免全部完成后补测试。

用法要点:定位器优先级为 getByRole、getByLabelText、getByPlaceholderText、getByText、getByAltText、getByTestId(最后手段)。ARIA 快照可用一条快照替代多条断言并验证可访问性树结构。需要校验全部条目时可用 Promise.all 并行断言。测试命名要有描述性,失败时先判断是验收测试还是实现测试再决定改代码还是改测试。

限制与反模式:不要只测实现细节;不要从实现代码推导期望值造成循环验证;不要过度 mock,只 mock 外部边界(API、数据库、时间、文件系统);避免脆弱选择器;不要为了让测试通过而盲目改测试。是否需要具体依赖版本、安装命令与配置,资料未提供。参考文件包括 locator-strategies、aria-snapshots、accessibility-testing、visual-regression。