web-testing
This tool automates testing phases including unit, integration, end-to-end, load, security, visual regression, and accessibility checks.
Install
mkdir -p .claude/skills/web-testing && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/5316" && unzip -o skill.zip -d .claude/skills/web-testing && rm skill.zipInstalls to .claude/skills/web-testing
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Execute unit and integration tests using Vitest
- →Run end-to-end testing workflows with Playwright
- →Perform load testing with k6
- →Validate accessibility compliance with axe-core
- →Generate performance metrics via Lighthouse
- →Conduct visual regression testing
How it works
The skill provides a command-line interface to trigger specific testing frameworks for unit, integration, E2E, load, and accessibility validation. It follows a 70-20-10 testing pyramid strategy to prioritize test execution speed and coverage.
Inputs & outputs
When to use web-testing
- →Run Playwright E2E tests
- →Execute unit tests with Vitest
- →Perform load testing with k6
- →Check accessibility with axe-core
About this skill
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
When not to use it
- →Testing non-web applications
- →Manual performance monitoring without Lighthouse
Limitations
- →E2E tests have higher latency compared to unit tests
- →Requires specific configuration files for integration and visual testing
How it compares
This approach centralizes disparate testing tools into a unified command-line workflow compared to manually invoking individual framework binaries.
Compared to similar skills
web-testing side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web-testing (this skill) | 1 | 6mo | Review | Intermediate |
| react-best-practices | 22 | 3mo | No flags | Intermediate |
| react-component-performance | 2 | 4mo | No flags | Advanced |
| web-coder | 0 | 3mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by mrgoonie
View all by mrgoonie →You might also like
react-best-practices
redpanda-data
Client-side React performance optimization patterns.
react-component-performance
Dimillian
Analyze and optimize React component performance issues (slow renders, re-render thrash, laggy lists, expensive computations). Use when asked to profile or improve a React component, reduce re-renders, or speed up UI updates in React apps.
web-coder
mochan-tk
Use when: implementing frontend web apps with HTML, CSS, TypeScript, React, accessibility, responsive layout, or performance concerns.
web-coder
Bonzokoles
Expert 10x engineer with comprehensive knowledge of web development, internet protocols, and web standards. Use when working with HTML, CSS, JavaScript, web APIs, HTTP/HTTPS, web security, performance optimization, accessibility, or any web/internet concepts. Specializes in translating web terminolo
benchmark-guardian
siliconjungle
Use for JS/TS performance-sensitive changes, benchmark additions, benchmark regressions, benchmark result JSON, or any claim that code is faster, smaller, cheaper, or not slower.
playwright
lfr-ai
End-to-end testing with Playwright for user journeys and accessibility