mcpField
W
web-testing

web-testing

github.com/mrgoonieテスト・品質2.2k443 回インストール30 週間前に更新
リポジトリ

web-testing について

Web開発者向けのテストガイドです。ユニット、統合、E2E、負荷、セキュリティ、ビジュアル回帰、アクセシビリティの各テストを扱います。戦略資料やツール例、CI/CDの手順も含みます。

主な機能

  1. 01ユニット・統合テストのガイド
  2. 02PlaywrightによるE2Eテスト
  3. 03負荷・セキュリティテスト資料
  4. 04ビジュアル回帰とアクセシビリティ検査
  5. 05CI/CDテストゲートの例

活用シーン

  1. 01関数、モジュール、APIの検証
  2. 02ログインやチェックアウトの主要フロー確認
  3. 03リリース前の性能とセキュリティ評価
  4. 04UI回帰とアクセシビリティ問題の検出

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/mrgoonie/claudekit-skills --skill web-testing

インストール後、Claude Code で/web-testingを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
accessibility-testing.md
api-testing.md
component-testing.md
cross-browser-checklist.md
e2e-testing-playwright.md
functional-testing-checklist.md
interactive-testing-patterns.md
load-testing-k6.md
mobile-gesture-testing.md
performance-core-web-vitals.md
pre-release-checklist.md
security-checklists.md
security-testing-overview.md
shadow-dom-testing.md
test-flakiness-mitigation.md
testing-pyramid-strategy.md
unit-integration-testing.md
visual-regression.md
vulnerability-payloads.md

詳細

Web テストスキル

包括的な Web テスト：ユニット、統合、E2E、負荷、セキュリティ、ビジュアルリグレッション、アクセシビリティ。

クイックスタート

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

テストピラミッド（70-20-10）

レイヤー割合フレームワーク速度
ユニット70%Vitest/Jest<50ms
統合20%Vitest + fixtures100-500ms
E2E10%Playwright5-30s

使用する場面

  • ユニット：関数、ユーティリティ、状態ロジック
  • 統合：API エンドポイント、データベース操作、モジュール
  • E2E：重要なフロー（ログイン、チェックアウト、支払い）
  • 負荷：リリース前のパフォーマンス検証
  • セキュリティ：デプロイ前の脆弱性スキャン
  • ビジュアル：UI のリグレッション検出

リファレンスドキュメント

コアテスト
  • ./references/unit-integration-testing.md - ユニット／統合テストのパターン
  • ./references/e2e-testing-playwright.md - Playwright E2E ワークフロー
  • ./references/component-testing.md - React/Vue/Angular コンポーネントテスト
  • ./references/testing-pyramid-strategy.md - テスト割合、優先度マトリックス
クロスブラウザーとモバイル
  • ./references/cross-browser-checklist.md - ブラウザー／デバイスのマトリックス
  • ./references/mobile-gesture-testing.md - タッチ、スワイプ、画面の向き
  • ./references/shadow-dom-testing.md - Web コンポーネントのテスト
インタラクティブ要素とフォーム
  • ./references/interactive-testing-patterns.md - フォーム、キーボード、ドラッグ＆ドロップ
  • ./references/functional-testing-checklist.md - 機能テスト
パフォーマンスと品質
  • ./references/performance-core-web-vitals.md - LCP/CLS/INP、Lighthouse CI
  • ./references/visual-regression.md - スクリーンショットの比較
  • ./references/test-flakiness-mitigation.md - 安定性向上の戦略
アクセシビリティ
  • ./references/accessibility-testing.md - WCAG チェックリスト、axe-core
セキュリティ
  • ./references/security-testing-overview.md - OWASP Top 10、ツール
  • ./references/security-checklists.md - 認証、API、ヘッダー
  • ./references/vulnerability-payloads.md - SQL/XSS/CSRF ペイロード
API と負荷
  • ./references/api-testing.md - API テストのパターン
  • ./references/load-testing-k6.md - k6 負荷テストのパターン
チェックリスト
  • ./references/pre-release-checklist.md - リリース前の総合チェックリスト

CI/CD 統合

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

コメント

Markdown 対応