web-testing — скилл для Claude Code: тесты Playwright, Vitest, k6
Скилл для веб-тестирования: юнит, интеграция, E2E, нагрузка, безопасность, визуальные регрессии и доступность. Пригодится, когда нужно навести порядок в тестах проекта.
npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-codeЧто делает web-testing
Скилл даёт агенту справочники по всем слоям тестирования. Внутри — паттерны юнит- и интеграционных тестов, E2E-сценарии на Playwright, тестирование компонентов React, Vue и Angular, проверка кросс-браузерности и мобильных жестов, работа с Shadow DOM. Отдельные файлы посвящены формам, клавиатуре и drag-and-drop.
Производительность и качество закрывают материалы по Core Web Vitals (LCP, CLS, INP) и Lighthouse CI, визуальные регрессии через сравнение скриншотов и борьба с нестабильными тестами. Есть чек-листы по WCAG и axe-core, обзор OWASP Top 10 с наборами payload для SQL, XSS и CSRF, паттерны API-тестов и нагрузочные сценарии на k6.
Скилл советует пирамиду 70-20-10: 70% юнит-тестов на Vitest или Jest, 20% интеграционных, 10% E2E на Playwright. Для запуска нужны сами инструменты в проекте — npx vitest run, npx playwright test, k6 run, npx @axe-core/cli, npx lighthouse. В CI автор предлагает четыре шага: сначала юнит-тесты как быстрый отказ, потом E2E, доступность и npx lhci autorun.
Какие задачи решает
- разложить тесты по слоям и не тащить всё в E2E
- починить нестабильные тесты, которые падают через раз
- проверить формы, клавиатуру и drag-and-drop
- поймать визуальные регрессии до релиза
- прогнать нагрузочный сценарий на k6 перед выкаткой
Примеры запросов агенту
- прогони юнит-тесты и покажи, что упало
- напиши E2E-тест на логин и оплату в Playwright
- проверь доступность страницы через axe-core
Как установить web-testing
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-code2Вручную: положить файлы
~/.claude/skills/web-testing/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/web-testing/
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill web-testing -a codex2Вручную: положить файлы
.agents/skills/web-testing/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill web-testing -a cursor2Вручную: положить файлы
.cursor/skills/web-testing/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mrgoonie/claudekit-skills web-testing2Вручную: положить файлы
.github/skills/web-testing/SKILL.md1Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill web-testing -a gemini-cli2Командой платформы
gemini skills install https://github.com/mrgoonie/claudekit-skills --path .claude/skills/web-testingВручную: положить файлы
.devin/skills/web-testing/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mrgoonie/claudekit-skills --skill web-testing -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о web-testing
Как установить web-testing в Claude?
Выполните npx skills add mrgoonie/claudekit-skills --skill web-testing -a claude-code. Скилл окажется в ~/.claude/skills/web-testing/SKILL.md.
Что делает web-testing?
Описывает веб-тестирование по слоям: юнит, интеграция, E2E, нагрузка, безопасность, визуальные регрессии и доступность. Агент берёт оттуда паттерны и чек-листы, когда вы просите написать или починить тесты.
Какие инструменты нужны для работы скилла?
Playwright, Vitest или Jest, k6, axe-core и Lighthouse. Скилл ссылается на них в примерах запуска, так что их стоит держать в проекте.
Исходный текст
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
