Web Testing Skill
Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.
Quick Start
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)
| Layer |
Ratio |
Framework |
Speed |
| 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
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
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
Interactive & Forms
./references/interactive-testing-patterns.md - Forms, keyboard, drag-drop./references/functional-testing-checklist.md - Feature testing
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
Accessibility
./references/accessibility-testing.md - WCAG checklist, 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
API & Load
./references/api-testing.md - API test patterns./references/load-testing-k6.md - k6 load test patterns
Checklists
./references/pre-release-checklist.md - Complete release checklist
CI/CD Integration
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
1---2name: web-testing3description: Web testing with Playwright, Vitest, k6. E2E/unit/integration/load/security/visual/a11y testing. Use for test automation, flakiness, Core Web Vitals, mobile gestures, cross-browser.4license: Apache-2.05---6
7# Web Testing Skill
8
9Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.
10
11## Quick Start
12
13```bash
14npx vitest run # Unit tests
15npx playwright test # E2E tests
16npx playwright test --ui # E2E with UI
17k6 run load-test.js # Load tests
18npx @axe-core/cli https://example.com # Accessibility
19npx lighthouse https://example.com # Performance
20```
21
22## Testing Pyramid (70-20-10)
23
24| Layer | Ratio | Framework | Speed |
25|-------|-------|-----------|-------|
26| Unit | 70% | Vitest/Jest | <50ms |
27| Integration | 20% | Vitest + fixtures | 100-500ms |
28| E2E | 10% | Playwright | 5-30s |
29
30## When to Use
31
32- **Unit**: Functions, utilities, state logic
33- **Integration**: API endpoints, database ops, modules
34- **E2E**: Critical flows (login, checkout, payment)
35- **Load**: Pre-release performance validation
36- **Security**: Pre-deploy vulnerability scanning
37- **Visual**: UI regression detection
38
39## Reference Documentation
40
41### Core Testing
42- `./references/unit-integration-testing.md` - Unit/integration patterns
43- `./references/e2e-testing-playwright.md` - Playwright E2E workflows
44- `./references/component-testing.md` - React/Vue/Angular component testing
45- `./references/testing-pyramid-strategy.md` - Test ratios, priority matrix
46
47### Cross-Browser & Mobile
48- `./references/cross-browser-checklist.md` - Browser/device matrix
49- `./references/mobile-gesture-testing.md` - Touch, swipe, orientation
50- `./references/shadow-dom-testing.md` - Web components testing
51
52### Interactive & Forms
53- `./references/interactive-testing-patterns.md` - Forms, keyboard, drag-drop
54- `./references/functional-testing-checklist.md` - Feature testing
55
56### Performance & Quality
57- `./references/performance-core-web-vitals.md` - LCP/CLS/INP, Lighthouse CI
58- `./references/visual-regression.md` - Screenshot comparison
59- `./references/test-flakiness-mitigation.md` - Stability strategies
60
61### Accessibility
62- `./references/accessibility-testing.md` - WCAG checklist, axe-core
63
64### Security
65- `./references/security-testing-overview.md` - OWASP Top 10, tools
66- `./references/security-checklists.md` - Auth, API, headers
67- `./references/vulnerability-payloads.md` - SQL/XSS/CSRF payloads
68
69### API & Load
70- `./references/api-testing.md` - API test patterns
71- `./references/load-testing-k6.md` - k6 load test patterns
72
73### Checklists
74- `./references/pre-release-checklist.md` - Complete release checklist
75
76## CI/CD Integration
77
78```yaml
79jobs:
80 test:
81 steps:
82 - run: npm run test:unit # Gate 1: Fast fail
83 - run: npm run test:e2e # Gate 2: After unit pass
84 - run: npm run test:a11y # Accessibility
85 - run: npx lhci autorun # Performance
86```
tools-only