Web-QA

VibeShift ウェブテスター

このプロジェクトは、特に GitHub Copilot、Cursor、Roo Code などの AI コーディング アシスタントを使用する開発者向けに、Web テスト ワークフローを効率化するように設計された AI 搭載エージェントを提供します**。MCP (Machine Command Protocol)**を介してこれらのアシスタントに直接統合され、自然言語プロンプトを使用してテストの記録、実行、検出を自動化できます。

問題： AIアシスタントでコードを生成した後、Webアプリケーションを手動でテストするのは時間がかかり、エラーが発生しやすくなります。さらに、AIによるコード変更によって、以前は正常に動作していた機能に意図せずリグレッションが生じる可能性があります。

**解決策:**このツールは、AI コーディング アシスタントで次のことができるようにすることで、ギャップを埋めます。

1. **新しいテストフローを記録する:**ユーザー ジャーニーを自然言語で記述すると、エージェントは AI ガイダンスの下でブラウザー (Playwright を使用) と対話し、再現可能なテスト スクリプト (JSON 形式) を生成します。
2. **既存のテストを実行する:**以前に記録したテスト スクリプトを実行して回帰テストを実行し、新しいコードの変更によって既存の機能が壊れていないことを確認します。
3. 潜在的なテスト手順の検出: Web サイトをクロールし、ビジョンと DOM 構造を使用してページを分析し、LLM にさまざまなページに関連するテスト手順を提案してもらいます。

これにより、より緊密なフィードバック ループが作成され、テスト プロセスが自動化され、AI アシスタント (および開発者) が問題や回帰を迅速に特定して修正できるようになります。

デモ（クリックするとビデオが再生されます）

特徴

• MCP 統合: Cursor/Windsurf/Github Copilot/Roo Code とシームレスに統合
• **AI 支援テスト記録:**自然言語による記述から Playwright ベースのテスト スクリプトを生成します (自動モード)。
• 決定論的なテスト実行: Playwright を使用して、記録された JSON テスト ファイルを確実に実行します。
• AI を活用したテスト検出: Web サイトをクロールし、任意の LLM (OpenAI 準拠形式) を活用して、検出されたページのテスト手順を提案します。
• **回帰テスト:**既存のテスト スイートを簡単に実行して回帰を検出します。
• **自動フィードバック ループ:**実行結果 (失敗、スクリーンショット、コンソール ログを含む) が返され、AI アシスタントに直接フィードバックが提供されます。
• **自己修復：**コード変更があった場合、既存のテストは自動的に修復されます。手動で更新する必要はありません。
• UIテスト: Playwrightで直接サポートされていないUIテストもサポートされています。例えば、 Check if the text is overflowing in the div 。
• ビジュアル回帰テスト: 従来のピクセルマッチとビジョン LLM アプローチを使用します。

仕組み

1. ユーザー: AI コーディング アシスタントに指示を出します (例: 「ログイン フローのテストを記録する」、「回帰テスト 'test_login.json' を実行する」)。
2. **AI コーディング エージェント:**意図を認識し、MCP を使用してMCP Serverが提供する適切なツールを呼び出します。
3. **MCP サーバー:**リクエストを対応する関数 ( record_test_flow 、 run_regression_test 、 discover_test_flows 、 list_recorded_tests ) にルーティングします。
4. Web テスト エージェント:
   • 記録: WebAgent (自動モード) は LLM と対話してステップを計画し、 BrowserController (Playwright) を介してブラウザを制御し、HTML/Vision を処理して、結果のテスト ステップをoutput/ディレクトリ内の JSON ファイルに保存します。
   • 実行: TestExecutor指定された JSON テスト ファイルを読み込み、記録された手順に従ってBrowserControllerを使用してブラウザーと対話し、結果、スクリーンショット、コンソール ログをキャプチャします。
   • 検出: CrawlerAgent``BrowserControllerとLLMClientを使用してページをクロールし、テスト手順を提案します。
5. ブラウザ: Playwright は実際のブラウザ操作を駆動します。
6. **フィードバック:**結果 (成功/失敗、ファイル パス、エラー メッセージ、検出された手順) は MCP サーバーを介して AI コーディング アシスタントに返され、ユーザーに提示されます。

はじめる

前提条件

• Python 3.10以上
• あらゆる LLM へのアクセス (私のテストでは、Gemini 2.0 Flash が無料で最適に動作します)
• MCPがインストールされました（ pip install mcp[cli] ）
• Playwrightブラウザがインストールされている（ playwright install ）

インストール

1. リポジトリをクローンします。
   git clone <repository-url> cd <repository-name>
2. 仮想環境を作成します (推奨):
   python -m venv venv source venv/bin/activate # Linux/macOS # venv\Scripts\activate # Windows
3. 依存関係をインストールします:
   pip install -r requirements.txt
4. Playwright ブラウザをインストールします。
   playwright install --with-deps # Installs browsers and OS dependencies

構成

1. プロジェクトのルート ディレクトリにある .env.example ファイルの名前を .env ファイルに変更します。
2. LLM API キーとその他の必要な詳細を追加します。
   # .env LLM_API_KEY="YOUR_LLM_API_KEY"
   • YOUR_LLM_API_KEYを実際のキーに置き換えます。

MCPサーバーの追加

これを mcp 構成に追加します:

AI コーディング アシスタントと対話している間は、このサーバーを実行したままにしておきます。

使用法

自然言語を使用して、MCP 対応の AI コーディング アシスタントを通じてエージェントと対話します。

例:

• テストを記録する:

  「テストを記録するには、 https://practicetestautomation.com/practice-test-login/にアクセスし、ユーザー名フィールドに「student」と入力し、パスワードフィールドに「Password123」と入力して、送信ボタンをクリックし、「Congratulations student」というテキストが表示されていることを確認します。」

  • (エージェントはこれらのアクションを自動的に実行し、 test_....jsonファイルをoutput/に保存します)
• テストを実行する:

  「回帰テストoutput/test_practice_test_login_20231105_103000.jsonを実行します」

  • (エージェントは指定されたファイル内のステップを実行し、エラーと詳細とともに PASS/FAIL ステータスを報告します。)
• テスト手順の検出:

  「 https://practicetestautomation.com/practice/から潜在的なテスト手順を見つけてください」

  • (エージェントはサイトをクロールし、ページを分析し、それぞれのテスト手順の提案を返します。)
• 記録されたテストの一覧:

  「利用可能な記録済み Web テストを一覧表示します。」

  • (エージェントはoutput/ディレクトリにある.jsonファイルのリストを返します。)

出力：

• 記録されたテスト: output/ディレクトリに JSON ファイルとして保存されます (形式についてはtest_schema.md参照)。
• **実行結果:**実行の概要（ステータス、エラー、エビデンスパス）を示すJSONオブジェクトとして返されます。完全な結果はoutput/execution_result_....jsonにも保存されます。
• **検出結果:**検出されたURLと推奨手順を含むJSONオブジェクトとして返されます。完全な結果はoutput/discovery_results_....jsonに保存されます。

インスピレーション

• ブラウザでの使用：DOMコンテキストツリーの生成は、これらのフレームワークから多大な影響を受けており、静的/動的/視覚的な要素に対応できるように修正されています。オープンソースへの貢献に対し、特に感謝申し上げます。

貢献

貢献を歓迎します！開始方法、問題の報告、プルリクエストの送信方法の詳細については、 CONTRIBUTING.md をご覧ください。

ライセンス

このプロジェクトはAPACHE-2.0ライセンスのもとでライセンスされています。