Web Testing

Overview

Comprehensive web testing skill covering unit, integration, E2E, load, security, visual regression, and accessibility testing. Provides frameworks, patterns, and checklists for building reliable test suites across the full testing pyramid.

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)

When to Use

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

Reference Documentation

Core Testing

• Unit/Integration Testing Patterns
• Playwright E2E Workflows
• React/Vue/Angular Component Testing
• Testing Pyramid Strategy - Test ratios, priority matrix

Cross-Browser & Mobile

• Cross-Browser Checklist - Browser/device matrix
• Mobile Gesture Testing - Touch, swipe, orientation
• Shadow DOM Testing - Web components testing

Interactive & Forms

• Interactive Testing Patterns - Forms, keyboard, drag-drop
• Functional Testing Checklist - Feature testing

Performance & Quality

• Core Web Vitals - LCP/CLS/INP, Lighthouse CI
• Visual Regression - Screenshot comparison
• Test Flakiness Mitigation - Stability strategies

Accessibility

• Accessibility Testing - WCAG checklist, axe-core

Security

• Security Testing Overview - OWASP Top 10, tools
• Security Checklists - Authentication, API, headers
• Vulnerability Payloads - SQL injection/XSS/CSRF payloads

API & Load

• API Testing Patterns
• k6 Load Testing Patterns

Checklists

• Pre-Release Checklist - 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