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