mcpField
W
webapp-testing

webapp-testing

github.com/vudovnテスト・品質8.2k319 回インストール9 週間前に更新
リポジトリ

webapp-testing について

ルート、API、ユーザーフローを監査するチーム向けのWebアプリテストスキルです。体系的なテスト手順に加え、ブラウザ確認、スクリーンショット、アクセシビリティ検査に使うPlaywrightランナーを提供します。

主な機能

  1. 01ルートとAPIの探索ガイド
  2. 02Playwrightブラウザテストランナー
  3. 03スクリーンショットとアクセシビリティ検査
  4. 04E2E、統合、コンポーネントテストの指針
  5. 05ビジュアルおよびAPIテストの実践

活用シーン

  1. 01アプリのルートとエンドポイントの監査
  2. 02重要なユーザーフローのテスト
  3. 03スクリーンショットによる見た目の変更確認
  4. 04CI向けWebテストの構成

インストール

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

$npx skills add https://github.com/vudovn/ag-kit --skill webapp-testing

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

同梱ファイルscripts/playwright_runner.py

詳細

Web アプリのテスト

すべてを見つけてテストしましょう。未テストのルートを残さないでください。

🔧 ランタイムスクリプト

自動ブラウザーテストでは、次のスクリプトを実行してください。

スクリプト目的使用方法
scripts/playwright_runner.py基本的なブラウザーテストpython scripts/playwright_runner.py https://example.com
スクリーンショット付きpython scripts/playwright_runner.py <url> --screenshot
アクセシビリティチェックpython scripts/playwright_runner.py <url> --a11y

必要なもの： pip install playwright && playwright install chromium

1. 詳細な監査のアプローチ

まずは対象の洗い出し
対象見つけ方
ルートapp/、pages/、ルーターファイルを確認
API エンドポイントHTTP メソッドを grep で検索
コンポーネントコンポーネントのディレクトリを探す
機能ドキュメントを読む
系統的なテスト
  1. マッピング - すべてのルート/API を一覧にする
  2. スキャン - 応答を確認する
  3. テスト - 重要なパスを網羅する

2. Web テストのピラミッド

        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Component (Many)
                    Individual UI pieces

3. E2E テストの原則

テスト対象
優先度テスト
1想定どおりのユーザーフロー
2認証フロー
3重要なビジネスアクション
4エラー処理
E2E のベストプラクティス
プラクティス理由
data-testid を使う安定したセレクター
要素を待つ不安定なテストを避ける
状態をクリーンにするテストを独立させる
実装の詳細を避けるユーザーの操作をテストする

4. Playwright の原則

基本概念
概念用途
Page Object Modelページロジックをカプセル化する
フィクスチャ再利用可能なテストセットアップ
アサーション組み込みの自動待機
Trace Viewer失敗のデバッグ
設定
設定推奨値
リトライCI では 2 回
トレースon-first-retry
スクリーンショットon-failure
ビデオretain-on-failure

5. ビジュアルテスト

使用する場面
シナリオ有効性
デザインシステム高
マーケティングページ高
コンポーネントライブラリ中
動的コンテンツ低
戦略
  • ベースラインのスクリーンショットを撮る
  • 変更時に比較する
  • ビジュアル差分を確認する
  • 意図した変更を更新する

6. API テストの原則

対象範囲
項目テスト
ステータスコード200、400、404、500
レスポンス形式スキーマと一致する
エラーメッセージユーザーにわかりやすい
エッジケース空、大きい、特殊文字

7. テストの整理

ファイル構成
tests/
├── e2e/           # Full user flows
├── integration/   # API, data
├── component/     # UI units
└── fixtures/      # Shared data
命名規則
パターン例
機能別login.spec.ts
説明的user-can-checkout.spec.ts

8. CI との統合

パイプラインの手順
  1. 依存関係をインストールする
  2. ブラウザーをインストールする
  3. テストを実行する
  4. アーティファクト（トレース、スクリーンショット）をアップロードする
並列化
戦略用途
ファイル単位Playwright のデフォルト
シャーディング大規模なテストスイート
ワーカー複数のブラウザー

9. アンチパターン

❌ やってはいけないこと✅ 推奨すること
実装をテストする動作をテストする
待機時間をハードコードする自動待機を使う
クリーンアップを省略するテストを分離する
不安定なテストを無視する根本原因を修正する

覚えておきましょう： E2E テストはコストがかかります。重要なパスにのみ使用してください。

コメント

Markdown 対応