web-testing

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Web Testing Skill

Web测试技能

Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.

全面的Web测试：单元测试、集成测试、E2E测试、负载测试、安全测试、可视化回归测试、无障碍测试。

Quick Start

快速开始

bash

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

bash

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

Testing Pyramid (70-20-10)

测试金字塔（70-20-10）

Layer	Ratio	Framework	Speed
Unit	70%	Vitest/Jest	<50ms
Integration	20%	Vitest + fixtures	100-500ms
E2E	10%	Playwright	5-30s

层级	占比	框架	速度
Unit	70%	Vitest/Jest	<50ms
Integration	20%	Vitest + fixtures	100-500ms
E2E	10%	Playwright	5-30s

When to Use

适用场景

Unit: Functions, utilities, state logic
Integration: API endpoints, database ops, modules
E2E: Critical flows (login, checkout, payment)
Load: Pre-release performance validation
Security: Pre-deploy vulnerability scanning
Visual: UI regression detection

Unit测试：函数、工具类、状态逻辑
集成测试：API端点、数据库操作、模块
E2E测试：关键流程（登录、结账、支付）
负载测试：发布前性能验证
安全测试：部署前漏洞扫描
可视化测试：UI回归检测

Reference Documentation

参考文档

Core Testing

核心测试

./references/unit-integration-testing.md

- Unit/integration patterns

```
./references/e2e-testing-playwright.md
```
- Playwright E2E workflows
```
./references/component-testing.md
```
- React/Vue/Angular component testing

./references/testing-pyramid-strategy.md

- Test ratios, priority matrix

./references/unit-integration-testing.md

- 单元/集成测试模式

```
./references/e2e-testing-playwright.md
```
- Playwright E2E测试流程
```
./references/component-testing.md
```
- React/Vue/Angular组件测试

./references/testing-pyramid-strategy.md

- 测试占比、优先级矩阵

Cross-Browser & Mobile

跨浏览器与移动端

```
./references/cross-browser-checklist.md
```
- Browser/device matrix
```
./references/mobile-gesture-testing.md
```
- Touch, swipe, orientation
```
./references/shadow-dom-testing.md
```
- Web components testing

```
./references/cross-browser-checklist.md
```
- 浏览器/设备矩阵
```
./references/mobile-gesture-testing.md
```
- 触摸、滑动、屏幕方向测试
```
./references/shadow-dom-testing.md
```
- Web组件测试

Interactive & Forms

交互与表单

./references/interactive-testing-patterns.md

- Forms, keyboard, drag-drop

./references/functional-testing-checklist.md

- Feature testing

./references/interactive-testing-patterns.md

- 表单、键盘操作、拖拽测试

./references/functional-testing-checklist.md

- 功能测试清单

Performance & Quality

性能与质量

./references/performance-core-web-vitals.md

- LCP/CLS/INP, Lighthouse CI

```
./references/visual-regression.md
```
- Screenshot comparison

./references/test-flakiness-mitigation.md

- Stability strategies

./references/performance-core-web-vitals.md

- LCP/CLS/INP、Lighthouse CI

```
./references/visual-regression.md
```
- 截图对比测试

./references/test-flakiness-mitigation.md

- 测试稳定性策略

Accessibility

无障碍测试

```
./references/accessibility-testing.md
```
- WCAG checklist, axe-core

```
./references/accessibility-testing.md
```
- WCAG清单、axe-core

Security

安全测试

./references/security-testing-overview.md

- OWASP Top 10, tools

```
./references/security-checklists.md
```
- Auth, API, headers
```
./references/vulnerability-payloads.md
```
- SQL/XSS/CSRF payloads

./references/security-testing-overview.md

- OWASP Top 10、工具集

```
./references/security-checklists.md
```
- 认证、API、请求头测试
```
./references/vulnerability-payloads.md
```
- SQL/XSS/CSRF测试用例

API & Load

API与负载测试

```
./references/api-testing.md
```
- API test patterns
```
./references/load-testing-k6.md
```
- k6 load test patterns

```
./references/api-testing.md
```
- API测试模式
```
./references/load-testing-k6.md
```
- k6负载测试模式

Checklists

检查清单

```
./references/pre-release-checklist.md
```
- Complete release checklist

```
./references/pre-release-checklist.md
```
- 完整发布检查清单

CI/CD Integration

CI/CD集成

yaml

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

yaml

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