Frontend Testing 是一个前端测试技能，主要面向 React/Next.js 应用，覆盖组件测试、视觉回归、无障碍（a11y）与性能测试四类场景，并提供测试基础设施搭建与覆盖率报告的配套脚本和模板。
用途与范围 该技能用于在 React/Next.js 项目中建立完整的前端测试体系，主要涵盖：使用 Jest/Vitest 加 React Testing Library 的组件测试；使用 Playwright 的视觉回归测试；使用 axe-core 的无障碍测试；使用 Lighthouse 的性能测试；以及测试基础设施的初始化、配置与覆盖率分析报告。
主要能力
- 组件测试：基于 Jest/Vitest 与 React Testing Library，提供渲染、查询（优先 getByRole、getByText、getByLabelText）、用户交互（userEvent）、异步等待（waitFor）等模式。
- 视觉回归测试：基于 Playwright，与基线快照比对，失败时生成差异图像，支持遮罩动态内容（日期、随机 ID、动画），等待网络空闲后截图。
- 无障碍测试：通过 axe-playwright 注入 axe-core 并检查 ARIA 属性、键盘导航、颜色对比度等，报告 WCAG 违规，目标为 WCAG 2.1 AA。
- 性能测试：通过 playwright-lighthouse 运行 Lighthouse 审计，检查 Core Web Vitals（LCP、FID、CLS、TTFB）与各项分数阈值，分析打包体积与渲染性能，生成报告。
- 覆盖率：聚合各测试类型的覆盖率数据，生成 HTML 报告，计算覆盖率百分比并识别未测试文件。
使用方式 技能提供以下脚本：
- bash scripts/init-frontend-tests.sh [project-path]：初始化测试基础设施，检测 Jest 或 Vitest，安装 RTL、Playwright、axe-core、Lighthouse 等依赖，创建配置文件、测试工具与初始示例。
- bash scripts/run-component-tests.sh [test-pattern] [options]：运行组件测试，选项含 --coverage、--watch、--updateSnapshot。
- bash scripts/run-visual-regression.sh [test-pattern] [update-snapshots]：运行视觉回归测试，与基线快照比对并生成差异图。
- bash scripts/run-accessibility-tests.sh [test-pattern]：运行 axe-core 无障碍测试。
- bash scripts/run-performance-tests.sh [url] [options]：运行 Lighthouse 性能审计。
- bash scripts/generate-coverage-report.sh [output-dir]：聚合覆盖率并生成报告。
模板与示例 配置模板包括 jest.config.js、vitest.config.ts、test-utils.ts、playwright.visual.config.ts、playwright.a11y.config.ts；测试模板包括 component-test.spec.tsx、visual-regression.spec.ts、accessibility.spec.ts、performance.spec.ts；工具模板包括 setup-tests.ts、test-helpers.ts、mock-factories.ts；示例包括 Button 组件测试、登录页视觉回归、表单无障碍测试、首页性能测试。技能还给出 GitHub Actions 集成示例，并把测试执行顺序建议为：组件测试→视觉回归→无障碍→性能（由快到慢）。文档还给出针对各类测试的调试建议，如 screen.debug()、差异图比对、axe 详细报告与 Lighthouse HTML 报告等。
适用场景 适用于需要为 React/Next.js 前端建立组件级、视觉级、无障碍与性能多维度自动化测试，并将其纳入 CI/CD 流程的团队；也适用于希望统一测试目录组织（unit/integration/visual/a11y/performance/utils）与覆盖率目标（组件测试 80%+ 等）的项目。
安全与限制 技能文档强调所有代码示例遵循安全规则：仅使用占位符、不出现真实凭证、通过环境变量引用、用 .gitignore 保护密钥。运行环境要求 Node.js 18+、React 18+ 或 Next.js 13+、Jest 29+ 或 Vitest 1.0+、Playwright 1.40+，以及 @axe-core/playwright、playwright-lighthouse、@testing-library/react、@testing-library/user-event 等依赖。
该技能的官方定价、授权方式与维护状态暂未提供。