# Web Testing

Web testing with Playwright, Vitest, k6.

- Repository: https://github.com/mrgoonie/claudekit-skills (2229 stars)
- Category: Testing
- License: Apache-2.0
- Last updated: 2026-04-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add mrgoonie/claudekit-skills --skill web-testing -g -a claude-code -y`
Codex: `npx skills add mrgoonie/claudekit-skills --skill web-testing -g -a codex -y`
Cursor: `npx skills add mrgoonie/claudekit-skills --skill web-testing -g -a cursor -y`
Gemini CLI: `npx skills add mrgoonie/claudekit-skills --skill web-testing -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add mrgoonie/claudekit-skills`

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Web Testing Skill

Comprehensive web testing: unit, integration, E2E, load, security, visual regression, accessibility.

## Quick Start

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

The rest: https://github.com/mrgoonie/claudekit-skills/blob/HEAD/.claude/skills/web-testing/SKILL.md