Web Testing Skill

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 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