Agent-Skills.md

Agent Skills: Web Testing Skill

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.

UncategorizedID: mrgoonie/claudekit-skills/web-testing

Repository

mrgoonie/claudekit-skills
mrgoonie

Install this agent skill to your local

pnpm dlx add-skill https://github.com/mrgoonie/claudekit-skills/tree/HEAD/.claude/skills/web-testing

Skill Files

Browse the full folder contents for web-testing.

Download Skill

Loading file tree…

.claude/skills/web-testing/SKILL.md

Skill Metadata

Name
web-testing
Description
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.

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