home / skills / jjuidev / jss / web-testing

web-testing skill

safe

/.claude/skills/web-testing

This skill helps you implement comprehensive web testing across unit, integration, E2E, load, and accessibility using Playwright, Vitest, and k6.

npx playbooks add skill jjuidev/jss --skill web-testing

Review the files below or copy the command above to add this skill to your agents.

Files (27)

SKILL.md

3.2 KB

---
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.
license: Apache-2.0
version: 3.0.0
---

# 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 Strategy (Choose Your Model)

| Model | Structure | Best For |
|-------|-----------|----------|
| Pyramid | Unit 70% > Integration 20% > E2E 10% | Monoliths |
| Trophy | Integration-heavy | Modern SPAs |
| Honeycomb | Contract-centric | Microservices |

→ `./references/testing-pyramid-strategy.md`

## Reference Documentation

### Core Testing
- `./references/unit-integration-testing.md` - Vitest, browser mode, AAA
- `./references/e2e-testing-playwright.md` - Fixtures, sharding, selectors
- `./references/playwright-component-testing.md` - CT patterns (production-ready)
- `./references/component-testing.md` - React/Vue/Angular patterns

### Test Infrastructure
- `./references/test-data-management.md` - Factories, fixtures, seeding
- `./references/database-testing.md` - Testcontainers, transactions
- `./references/ci-cd-testing-workflows.md` - GitHub Actions, sharding
- `./references/contract-testing.md` - Pact, MSW patterns

### Cross-Browser & Mobile
- `./references/cross-browser-checklist.md` - Browser/device matrix
- `./references/mobile-gesture-testing.md` - Touch, swipe, orientation

### 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 & Security
- `./references/accessibility-testing.md` - WCAG, axe-core
- `./references/security-testing-overview.md` - OWASP Top 10
- `./references/security-checklists.md` - Auth, API, headers

### API & Load
- `./references/api-testing.md` - Supertest, GraphQL
- `./references/load-testing-k6.md` - k6 patterns

### Checklists
- `./references/pre-release-checklist.md` - Complete release checklist
- `./references/functional-testing-checklist.md` - Feature testing

## Scripts

### Initialize Playwright Project
```bash
node ./scripts/init-playwright.js [--ct] [--dir <path>]
```
Creates best-practice Playwright setup: config, fixtures, example tests.

### Analyze Test Results
```bash
node ./scripts/analyze-test-results.js \
  --playwright test-results/results.json \
  --vitest coverage/vitest.json \
  --output markdown
```
Parses Playwright/Vitest/JUnit results into unified summary.

## CI/CD Integration

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

Overview

This skill provides a practical, end-to-end web testing toolkit using Playwright, Vitest, k6, Lighthouse and axe-core. It covers unit, integration, E2E, load, security, visual regression and accessibility testing with patterns for flaky test mitigation and cross-browser/mobile coverage. Use it to build reliable CI gates that protect core user journeys and performance budgets.

How this skill works

The skill supplies recommended commands, test patterns and scripts to initialize Playwright, run Vitest unit suites, execute E2E scenarios, and run k6 load tests. It integrates accessibility checks (axe-core), performance checks (Lighthouse), visual regression comparisons and test result analysis to produce unified summaries. CI-friendly orchestration and sharding, fixtures, and test-data management strategies are included to scale in pipelines.

When to use it

When you need a complete testing pipeline from unit to load and accessibility
When validating cross-browser and mobile gestures across device matrices
When reducing test flakiness and enforcing stable CI gates
When monitoring Core Web Vitals and performance regressions
When adding visual regression and accessibility checks to releases

Best practices

Favor a testing strategy (pyramid, trophy, honeycomb) that matches your architecture
Keep fast unit tests as the majority, use integration/E2E selectively for user flows
Use fixtures, factories and isolated test data to avoid brittle tests
Shard and parallelize E2E runs; run mobile/browser combos in matrix jobs
Automate Lighthouse and axe checks in CI and fail builds on regressions

Example use cases

Initialize a Playwright project with ready-made config and example tests for component and E2E testing
Run Vitest in browser mode for unit and integration coverage during feature development
Integrate k6 load scripts to validate scalability and spot regressions under traffic
Add axe-core and Lighthouse CI checks to pre-release pipelines to catch accessibility and performance issues
Use visual regression comparisons to detect unintended UI changes across browsers

FAQ

How do I pick a testing strategy?

Choose the pyramid for monoliths, trophy for SPA-heavy apps, or honeycomb for microservices and contract-focused architectures.

Can I run Playwright tests in CI and locally?

Yes — the setup supports both interactive UI runs locally and headless, sharded runs in CI with consistent fixtures.

How are flaky tests addressed?

Use deterministic fixtures, explicit waits, retry logic, and stability checklists; record and analyze flaky patterns with the test-results analyzer.