本文へ移動
cccskills
無料GitHub で公開

fec-testing-strategy

用于规划或审查前端测试策略,按风险选择正确测试层级,将覆盖映射到静态检查、单元测试、组件测试、集成测试、E2E、Storybook/视觉回归、a11y、安全、性能或 CI gates。不要用于编写单个组件/E2E 测试或只是运行现有验证命令;中文触发词包括 测试策略、测试分层、测试计划、覆盖矩阵。

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.2 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

前端测试策略

用途

按“离代码多近 / 覆盖风险层级”选择测试方法,避免把所有风险都塞进组件测试或 E2E。

流程

  1. 识别改动类型:纯逻辑、UI 组件、跨模块流程、浏览器能力、视觉稳定性、专项质量风险或发布门禁。
  2. 建立测试层级矩阵,至少区分:
    • 静态检查:TypeScript、ESLint、格式、依赖安全、构建。
    • 单元测试:utils、hooks/composables、状态逻辑、schema、纯函数。
    • 组件测试:props/emits、用户交互、loading/error/empty、mock 边界。
    • 轻量集成测试:表单 + API mock + 路由/Store/Provider 上下文。
    • E2E:真实浏览器、跨页面关键旅程、鉴权、支付、权限、CI artifacts。
    • 视觉/交互文档:Storybook interaction、Chromatic、视觉回归基线。
    • 专项质量:a11y、安全、性能、兼容性。
  3. 按风险分配覆盖:高频核心路径优先 E2E,复杂组件状态优先组件测试,纯逻辑优先单元测试,跨 provider 协作用轻量集成测试。
  4. 用测试金字塔控制维护成本:
    • 越靠近纯逻辑,测试越多、越快、越稳定。
    • E2E 只覆盖用户关键旅程和真实浏览器风险,不覆盖每个分支。
    • 视觉、a11y、安全和性能属于专项质量层,不塞进普通组件测试。
  5. 检查是否已有命令、测试框架、目录约定和 CI 门禁;沿用项目现状,不为策略文档引入不必要工具。
  6. 规划失败证据:每个高风险项要说明失败时如何定位,例如断言、截图、trace、coverage、日志或报告。
  7. 设计测试数据与 mock 策略:共享 fixture 表达业务场景,测试数据 builder 只封装噪声字段,避免每个测试手写随机对象。
  8. 管理 flaky 风险:把时间、网络、动画、随机数、并发和外部服务标为不稳定来源,并指定隔离、重试和证据产物。
  9. 输出可执行的最小测试计划:每层覆盖什么、不覆盖什么、优先级、建议命令和责任 skill。

约束

  • 不把测试策略写成泛泛的“多写测试”;每个建议必须对应具体风险。
  • 不要求所有项目都补齐完整测试金字塔;按业务风险和团队维护能力裁剪。
  • 不把 E2E 当作单元/组件测试的替代品;不把组件测试当作真实浏览器兼容保证。
  • 不为小改动强制引入新框架;优先复用仓库已有工具和脚本。
  • 不追求没有风险说明的覆盖率数字;覆盖率只能辅助判断,不能替代场景覆盖。
  • 不把随机 fixture、共享全局状态或依赖执行顺序的测试纳入主干门禁。

预期输出

输出测试分层建议、风险到测试层的映射、优先级、建议命令、需新增或调整的测试文件范围,以及明确分流到哪些专项 skill 或 agent。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

用于审查或改进前端无障碍、语义结构、键盘支持、焦点管理、ARIA 标签、屏幕阅读器行为、WCAG 2.2 问题、触控无障碍或辅助技术回归;中文触发词包括 无障碍、accessibility、a11y、WCAG、屏幕阅读器。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when reviewing or improving frontend accessibility, semantic structure, keyboard support, focus management, ARIA labels, screen reader behavior, WCAG 2.2 issues, touch accessibility, or assistive-technology regressions; Chinese triggers include accessibility, accessibility, a11y, WCAG, screen reader.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于从参考系统中吸收想法、能力、工作流、架构、质量体系、生态扩展或工程实践,并通过原创的项目内重设计转化为当前项目能力,而不是复制原实现。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when absorbing ideas, capabilities, workflows, architecture, quality systems, ecosystem extensions, or engineering practices from any reference system into the current project through original, project-native redesign rather than copying.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

Use when designing, implementing, or reviewing frontend-to-backend API integration, typed API clients, REST/tRPC/OpenAPI client choices, auth refresh, API error mapping, upload flows, SSE/WebSocket/polling choices, CORS-facing frontend behavior, or cross-boundary loading/error states. Do not use for backend-only service architecture or TanStack Query cache policy alone; Chinese triggers include API integration, front-end and back-end joint debugging, typed API client, Interface error handling, SSE, WebSocket.

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

用于设计、实现或审查前后端 API 集成、类型化 API client、REST/tRPC/OpenAPI 客户端选型、认证刷新、API 错误映射、上传流程、SSE/WebSocket/轮询选择、CORS 相关前端行为或跨边界 loading/error 状态。不要用于纯后端服务架构或仅 TanStack Query 缓存策略;中文触发词包括 API 集成、前后端联调、typed API client、接口错误处理、SSE、WebSocket。

日本語の概要は準備中です。原文の説明を表示しています。

bovinphang/frontend-craft222026年9月26日 更新

bovinphang のスキルをすべて見る

このスキルの問題を報告する