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 Strategy (Choose Your Model)
| Model |
Structure |
Best For |
| Pyramid |
Unit 70% > Integration 20% > E2E 10% |
Monoliths |
| Trophy |
Integration-heavy |
Modern SPAs |
| Honeycomb |
Contract-centric |
Microservices |
→ ./references/testing-pyramid-strategy.md
Reference Documentation
Core Testing
./references/unit-integration-testing.md - Vitest, browser mode, AAA./references/e2e-testing-playwright.md - Fixtures, sharding, selectors./references/playwright-component-testing.md - CT patterns (production-ready)./references/component-testing.md - React/Vue/Angular patterns
Test Infrastructure
./references/test-data-management.md - Factories, fixtures, seeding./references/database-testing.md - Testcontainers, transactions./references/ci-cd-testing-workflows.md - GitHub Actions, sharding./references/contract-testing.md - Pact, MSW patterns
Cross-Browser & Mobile
./references/cross-browser-checklist.md - Browser/device matrix./references/mobile-gesture-testing.md - Touch, swipe, orientation
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 & Security
./references/accessibility-testing.md - WCAG, axe-core./references/security-testing-overview.md - OWASP Top 10./references/security-checklists.md - Auth, API, headers
API & Load
./references/api-testing.md - Supertest, GraphQL./references/load-testing-k6.md - k6 patterns
Checklists
./references/pre-release-checklist.md - Complete release checklist./references/functional-testing-checklist.md - Feature testing
Scripts
Initialize Playwright Project
node ./scripts/init-playwright.js [--ct] [--dir <path>]
Creates best-practice Playwright setup: config, fixtures, example tests.
Analyze Test Results
node ./scripts/analyze-test-results.js \
--playwright test-results/results.json \
--vitest coverage/vitest.json \
--output markdown
Parses Playwright/Vitest/JUnit results into unified summary.
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: ck-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 Strategy (Choose Your Model)
23
24| Model | Structure | Best For |
25|-------|-----------|----------|
26| Pyramid | Unit 70% > Integration 20% > E2E 10% | Monoliths |
27| Trophy | Integration-heavy | Modern SPAs |
28| Honeycomb | Contract-centric | Microservices |
29
30→ `./references/testing-pyramid-strategy.md`
31
32## Reference Documentation
33
34### Core Testing
35- `./references/unit-integration-testing.md` - Vitest, browser mode, AAA
36- `./references/e2e-testing-playwright.md` - Fixtures, sharding, selectors
37- `./references/playwright-component-testing.md` - CT patterns (production-ready)
38- `./references/component-testing.md` - React/Vue/Angular patterns
39
40### Test Infrastructure
41- `./references/test-data-management.md` - Factories, fixtures, seeding
42- `./references/database-testing.md` - Testcontainers, transactions
43- `./references/ci-cd-testing-workflows.md` - GitHub Actions, sharding
44- `./references/contract-testing.md` - Pact, MSW patterns
45
46### Cross-Browser & Mobile
47- `./references/cross-browser-checklist.md` - Browser/device matrix
48- `./references/mobile-gesture-testing.md` - Touch, swipe, orientation
49
50### Performance & Quality
51- `./references/performance-core-web-vitals.md` - LCP/CLS/INP, Lighthouse CI
52- `./references/visual-regression.md` - Screenshot comparison
53- `./references/test-flakiness-mitigation.md` - Stability strategies
54
55### Accessibility & Security
56- `./references/accessibility-testing.md` - WCAG, axe-core
57- `./references/security-testing-overview.md` - OWASP Top 10
58- `./references/security-checklists.md` - Auth, API, headers
59
60### API & Load
61- `./references/api-testing.md` - Supertest, GraphQL
62- `./references/load-testing-k6.md` - k6 patterns
63
64### Checklists
65- `./references/pre-release-checklist.md` - Complete release checklist
66- `./references/functional-testing-checklist.md` - Feature testing
67
68## Scripts
69
70### Initialize Playwright Project
71```bash
72node ./scripts/init-playwright.js [--ct] [--dir <path>]
73```
74Creates best-practice Playwright setup: config, fixtures, example tests.
75
76### Analyze Test Results
77```bash
78node ./scripts/analyze-test-results.js \
79 --playwright test-results/results.json \
80 --vitest coverage/vitest.json \
81 --output markdown
82```
83Parses Playwright/Vitest/JUnit results into unified summary.
84
85## CI/CD Integration
86
87```yaml
88jobs:
89 test:
90 steps:
91 - run: npm run test:unit # Gate 1: Fast fail
92 - run: npm run test:e2e # Gate 2: After unit pass
93 - run: npm run test:a11y # Accessibility
94 - run: npx lhci autorun # Performance
95```
majiayu000