用途:为 React Web UI 建立系统化的测试信心,覆盖视觉回归、交互行为与无障碍断言。强调测试是设计输入而非上线后的安全网,目标不是最大覆盖率,而是抓住最关键的缺陷且不拖垮维护成本。
主要能力:识别缺陷逃逸路径(视觉回归、交互失败、状态错误、无障碍缺陷、跨浏览器不一致);评估现有覆盖与不稳定测试;按风险与变更频率排优先级。测试维度包括视觉回归(组件状态、断点布局、跨浏览器差异、基线纪律与防抖动)、交互测试(表单校验与错误恢复、模态焦点陷阱、下拉/标签状态、多步流程、并发操作)、无障碍断言(axe 自动检查、对比度、语义 HTML、键盘遍历、屏幕阅读器冒烟、减少动效)。
使用方式:先阅读 frontend-design 并遵循其上下文收集协议,复用已有上下文,只询问关键缺口,并收集当前逃逸到生产的常见 UI 缺陷、团队对测试维护的容忍度、UI 变更最频繁的部分。按 UI 测试金字塔分层:单元/组件、集成、端到端、视觉回归,尽量把测试下推。工具可选 Vitest/Jest + React Testing Library、Playwright/Cypress、Chromatic/Loki/Percy、axe-core 等,建议一个 E2E 工具加一个组件测试工具,无障碍检查集成进现有测试运行器。
适用场景:React 前端团队制定测试策略、为设计系统组件补测试、在 CI 中运行视觉与无障碍检查、排查不稳定测试。
限制:资料未提供具体安装命令、价格、平台支持或效果数据;工具选择与阈值需结合团队实际栈与用户浏览器分布确定。