Agent Skills › withkynam/vibecode-pro-max-kit › vc-web-testing

vc-web-testing

GitHub

提供全面的Web测试解决方案，涵盖单元、E2E、集成、负载、安全及无障碍测试。支持Playwright、Vitest和k6工具链，指导测试策略选择、CI/CD集成、性能优化及跨浏览器兼容，旨在提升测试自动化效率与稳定性。

.claude/skills/vc-web-testing/SKILL.md withkynam/vibecode-pro-max-kit

Trigger Scenarios

需要进行Web应用的功能性或非功能性测试配置或优化Playwright/Vitest/k6测试环境解决测试不稳定或Flakiness问题评估Core Web Vitals或执行视觉回归测试

Install

npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -g -y

More Options

Non-standard path

npx skills add https://github.com/withkynam/vibecode-pro-max-kit/tree/main/.claude/skills/vc-web-testing -g -y

Use without installing

npx skills use withkynam/vibecode-pro-max-kit@vc-web-testing

指定 Agent (Claude Code)

npx skills add withkynam/vibecode-pro-max-kit --skill vc-web-testing -a claude-code -g -y

安装 repo 全部 skill

npx skills add withkynam/vibecode-pro-max-kit --all -g -y

预览 repo 内 skill

npx skills add withkynam/vibecode-pro-max-kit --list

SKILL.md

Frontmatter

{
    "name": "vc-web-testing",
    "layer": "helper",
    "license": "Apache-2.0",
    "metadata": {
        "author": "claudekit",
        "version": "3.0.0"
    },
    "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.",
    "argument-hint": "[test-type] [target]",
    "trigger_keywords": "tests, e2e, integration test, performance test"
}

Web Testing Skill

Output style: Follow process/development-protocols/communication-standards.md — answer-first, plain language, no unexplained jargon, TL;DR on long responses.

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

node ./scripts/init-playwright.js [--ct] [--dir <path>]

Creates best-practice Playwright setup: config, fixtures, example tests.

Analyze Test Results

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

jobs:
  test:
    steps:
      - run: pnpm run test:unit      # Gate 1: Fast fail
      - run: pnpm run test:e2e       # Gate 2: After unit pass
      - run: pnpm run test:a11y      # Accessibility
      - run: npx lhci autorun       # Performance