关于 web-testing
面向 Web 开发者的测试指南,覆盖单元、集成、端到端、负载、安全、视觉回归和无障碍测试。提供测试策略、工具示例及 CI/CD 检查流程。
主要功能
- 01单元与集成测试指南
- 02Playwright 端到端测试
- 03负载与安全测试参考
- 04视觉回归与无障碍检查
- 05CI/CD 测试门禁示例
适用场景
- 01验证函数、模块和 API
- 02检查登录或结账等关键流程
- 03发布前评估性能与安全
- 04发现界面回归和无障碍问题
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ mrgoonie/ claudekit-skills --skill web-testing安装后在 Claude Code 中输入/web-testing确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/accessibility-testing.mdapi-testing.mdcomponent-testing.mdcross-browser-checklist.mde2e-testing-playwright.mdfunctional-testing-checklist.mdinteractive-testing-patterns.mdload-testing-k6.mdmobile-gesture-testing.mdperformance-core-web-vitals.mdpre-release-checklist.mdsecurity-checklists.mdsecurity-testing-overview.mdshadow-dom-testing.mdtest-flakiness-mitigation.mdtesting-pyramid-strategy.mdunit-integration-testing.mdvisual-regression.mdvulnerability-payloads.md详细介绍
Web 测试技能
全面的 Web 测试:单元测试、集成测试、端到端测试、负载测试、安全测试、视觉回归测试、无障碍测试。
快速开始
npx vitest run # Unit tests
npx playwright test # E2E tests
npx playwright test --ui # E2E with UI
k6 run load-test.js # Load tests
npx @axe-core/cli https://example.com # Accessibility
npx lighthouse https://example.com # Performance
测试金字塔(70-20-10)
| 层级 | 比例 | 框架 | 速度 |
|---|---|---|---|
| 单元测试 | 70% | Vitest/Jest | <50ms |
| 集成测试 | 20% | Vitest + fixtures | 100-500ms |
| 端到端测试 | 10% | Playwright | 5-30s |
适用场景
- 单元测试:函数、工具函数、状态逻辑
- 集成测试:API 端点、数据库操作、模块
- 端到端测试:关键流程(登录、结账、支付)
- 负载测试:发布前的性能验证
- 安全测试:部署前的漏洞扫描
- 视觉测试:检测 UI 回归
参考文档
核心测试
./references/unit-integration-testing.md- 单元测试/集成测试模式./references/e2e-testing-playwright.md- Playwright 端到端测试工作流./references/component-testing.md- React/Vue/Angular 组件测试./references/testing-pyramid-strategy.md- 测试比例、优先级矩阵
跨浏览器与移动端
./references/cross-browser-checklist.md- 浏览器/设备矩阵./references/mobile-gesture-testing.md- 触控、滑动、方向./references/shadow-dom-testing.md- Web 组件测试
交互与表单
./references/interactive-testing-patterns.md- 表单、键盘、拖放./references/functional-testing-checklist.md- 功能测试
性能与质量
./references/performance-core-web-vitals.md- LCP/CLS/INP、Lighthouse CI./references/visual-regression.md- 截图对比./references/test-flakiness-mitigation.md- 稳定性策略
无障碍
./references/accessibility-testing.md- WCAG 检查清单、axe-core
安全
./references/security-testing-overview.md- OWASP Top 10、工具./references/security-checklists.md- 身份验证、API、标头./references/vulnerability-payloads.md- SQL/XSS/CSRF 载荷
API 与负载
./references/api-testing.md- API 测试模式./references/load-testing-k6.md- k6 负载测试模式
检查清单
./references/pre-release-checklist.md- 完整的发布检查清单
CI/CD 集成
jobs:
test:
steps:
- run: npm run test:unit # Gate 1: Fast fail
- run: npm run test:e2e # Gate 2: After unit pass
- run: npm run test:a11y # Accessibility
- run: npx lhci autorun # Performance
评论
支持 Markdown