Skip to main content
affpapa.org
RU EN
skill CX Codex

web-testing — Claude Code skill: Playwright, Vitest, k6 tests

A web testing skill covering unit, integration, E2E, load, security, visual and accessibility checks. Useful when your test suite needs structure.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-code
Open on GitHub

What web-testing does

The skill hands your agent reference docs for every testing layer. You get unit and integration patterns, Playwright E2E workflows, component testing for React, Vue and Angular, plus cross-browser and mobile gesture coverage. Shadow DOM testing has its own file, as do forms, keyboard interaction and drag-and-drop.

Performance and quality material covers Core Web Vitals (LCP, CLS, INP) and Lighthouse CI, visual regression through screenshot comparison, and strategies for flaky tests. Accessibility comes as a WCAG checklist with axe-core, security as an OWASP Top 10 overview with SQL, XSS and CSRF payloads. API test patterns and k6 load scenarios round it out.

The skill recommends a 70-20-10 pyramid: 70% unit tests on Vitest or Jest, 20% integration, 10% E2E on Playwright. Running any of it assumes the tools are already in your project — npx vitest run, npx playwright test, k6 run, npx @axe-core/cli, npx lighthouse. For CI it lays out four steps: unit tests first as a fast fail, then E2E, accessibility and npx lhci autorun.

What it helps with

  • split tests across layers instead of pushing everything into E2E
  • fix flaky tests that fail every other run
  • cover forms, keyboard navigation and drag-and-drop
  • catch visual regressions before release
  • run a k6 load scenario ahead of deploy

Example prompts for the agent

  • run the unit tests and show me what failed
  • write a Playwright E2E test for login and checkout
  • check the page accessibility with axe-core

How to install web-testing

1Skills CLI (Vercel)

npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-code

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/web-testing/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about web-testing

How do I install web-testing in Claude?

Run npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-code. The skill lands at ~/.claude/skills/web-testing/SKILL.md.

What does web-testing do?

It documents web testing by layer: unit, integration, E2E, load, security, visual regression and accessibility. Your agent pulls patterns and checklists from it when you ask for tests to be written or fixed.

Which tools does the skill need?

Playwright, Vitest or Jest, k6, axe-core and Lighthouse. The skill references them in its run examples, so keep them in the project.

Source text

SKILL.md · Apache-2.0 
---
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: 2.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 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

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

© mrgoonie · Apache-2.0 · mrgoonie/claudekit-skills

Similar skills

All skills for Testing and QA →
frontend-testing-best-practices sergiodxa A set of 6 testing guidelines that prioritizes Playwright E2E workflows over isolated React component tests and heavy mocking. CX Codex +1 2,200installs react-testing affaan-m A skill for writing React component, hook and page tests with React Testing Library, Vitest or Jest, MSW network mocks and axe accessibility assertions. CX Codex +1 4,800installs e2e-playwright-testing Agent Skills Contributors A skill that guides the agent through writing Playwright E2E tests: locators, auth reuse, forms, assertions and CI config. CX Codex +1 796installs appbuilder-e2e-testing adobe Generates Playwright end-to-end tests for Adobe App Builder SPAs and AEM extensions. Useful when automating browser flows inside ExC Shell or setting up CI checks. CX Codex +1 746installs e2e-testing-automation aj-geddes A skill that helps you write end-to-end tests: browser flows, user journeys and frontend-backend integration checks. CX Codex +1 689installs playwright-e2e-testing fugazi A skill for writing and maintaining Playwright E2E specs in TypeScript: user flows, forms, auth, API mocking and visual comparisons. CX Codex +1 615installs

From the same set21

media-processing Runs FFmpeg and ImageMagick pipelines for video transcoding, audio extraction, image batch processing, and HLS streaming manifests. CX Codex +1 558installs ai-multimodal A skill that runs audio, video, image and PDF tasks through the Gemini API. Useful when you need a transcript, a screenshot read, or tables pulled out of a document. CX Codex +1 530installs context-engineering Guides LLM agent context design, token compaction, and memory isolation to prevent attention degradation during long runs. CX Codex +1 495installs shopify A skill for building on Shopify: apps, checkout and admin extensions, Liquid themes, plus GraphQL and REST API work. CX Codex +1 450installs databases A skill that bundles MongoDB and PostgreSQL references: schemas, queries, indexes, migrations, backups and admin tasks. CX Codex +1 435installs docs-seeker Finds technical documentation using the llms.txt standard, context7.com, and Repomix repository packing. Helpful when an agent needs library APIs. CX Codex +1 403installs repomix This skill packs a whole repository into a single file you can hand to an LLM. Useful when an agent needs project context or you want to read someone else's library. CX Codex +1 402installs better-auth A skill that walks your agent through Better Auth: email/password, OAuth, 2FA, passkeys and roles. Useful when a project needs sign-in and sessions. CX Codex +1 390installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor