Apidog

オールインワン協働API開発プラットフォーム

API設計

APIドキュメント

APIデバッグ

APIモック

自動テスト

Vibetest MCPサーバー利用:AI活用QAテスト

Ashley Goolam

Ashley Goolam

Updated on 5月 31, 2025

Vibetest-use MCPで厄介なウェブサイトのバグを退治する準備はできましたか?Browser-Useを搭載したこのオープンソースの優れものは、AIエージェントを使ってサイトをクロールさせ、404エラー、機能しないボタン、UIの不具合などを1分以内に発見できます。GitHubで見つけたのですが、自動テストの常識を覆すツールです。たった1つのコマンドで、複数のエージェントを起動して、ローカルサイトでもライブサイトでもサイトに負荷テストをかけられます。このチュートリアルでは、Vibetest-use MCPのセットアップ方法、ローカルまたはライブサイトでのテスト実行方法、そしてQA(品質保証)プロセスを簡単にする方法をご紹介します。さあ、バグを撲滅しましょう!

💡
APIを扱ったり、プロジェクトをドキュメント化したりしていますか? APIdogを使えば、APIドキュメントの設計、テスト、共有が簡単に行えます。Vibetest-use MCPのワークフローに最適です!
button

Vibetest-use MCPがQAのスーパーヒーローである理由

Vibetest-use MCPは、Browser-Useを搭載したツールで、AIエージェントを展開してウェブサイトをクロールし、リンク切れ、応答しないボタン、UIエラーなどの問題を検出することでQAテストを自動化します。Model Context Protocol (MCP)上に構築されており、Browser-Useと連携してPlaywright経由でブラウザ(Chrome、Firefoxなど)を制御し、徹底的なテストを保証します。GitHubリポジトリでは、ライブサイト(例: https://example.com)やローカル環境(例: localhost:3000)など、あらゆるURLをテストできること、そしてより詳細なスキャンのために設定可能なエージェント数(例: 3、5、10)を使用できることが強調されています。開発サイトから本番アプリケーションまで、Vibetest-use MCPはQAを楽な作業に変えます。

Vibetest-use MCPのセットアップ

Vibetest-use MCPを起動しましょう。初心者にも優しく、分かりやすく説明します!

1. リポジトリをクローンし、仮想環境をセットアップする:

  • リポジトリをクローンし、Python環境を準備します:
git clone https://github.com/browser-use/vibetest-use.git
cd vibetest-use
uv venv
source .venv/bin/activate  # macOS/Linux
.venv\Scripts\activate     # Windows
uv pip install -e .
  • これにより、依存関係がインストールされ、MCPサーバー環境がセットアップされます。

2. 環境変数を設定する:

  • Vibetest-use MCPの一部の機能にはGoogle APIキーが必要です。エクスポートするか、.envに追加します:
export GOOGLE_API_KEY="your_google_api_key_here"
  • または、.envを作成します:
GOOGLE_API_KEY=your_google_api_key_here

3. MCPサーバーを実行する:

  • サーバーを起動します:
.venv/bin/vibetest-mcp
  • これにより、MCPサーバーが起動し、テストコマンドを受け付ける準備が整います。
vibetest mcp connected

私は10分でこれをセットアップできました。素早く簡単です!

Vibetest-use MCPのユースケース例

Vibetest-use MCPでテストする準備はできましたか?バグを素早く見つける3つの方法をご紹介します!

1. 複数のエージェントでライブウェブサイトをテストする:

  • https://example.comのようなライブサイトを6つのエージェントでテストします:
vibetest my website with 6 agents: https://example.com
vibetest with multiple agents
  • 5つのBrowser-Codeエージェントが同時にクロールし、リンク切れ、UIバグ、アクセシビリティの問題などをチェックします。「/page-not-foundで404エラー、/submitでボタンが応答しない」のような出力が期待できます。
vibetest finding project errors

2. ローカルホスト開発サイトをテストする:

  • ローカル開発サーバー(例: localhost:3000)をテストします:
run vibetest on localhost:3000
  • これにより、テストサイトで見つけた配置がずれたdivのような問題を早期に発見できます!
vibetest on local dev site

3. カスタムエージェント数でのヘッドレステスト:

  • CI/CDのために、10エージェントでヘッドレス実行します:
run a headless vibetest on localhost:8080 with 10 agents
  • ヘッドレスモードはブラウザが表示されずに実行され、結果がログに記録されます(例: --output results.json)。自動化されたパイプラインに最適です。

これらのテストはそれぞれ60秒未満で完了しました。Vibetest-use MCPは高速です!

Vibetest-use MCPとClaude Code Desktopの連携

Claude Code DesktopからVibetest-use MCPテストを実行したいですか?連携方法は以下の通りです。

1. Vibetest MCPサーバーをClaude Desktopに追加する:

  • Claude CLIを使用します:
claude mcp add vibetest /full/path/to/vibetop-use/.venv/bin/vibetest-mcp -e GOOGLE_API_KEY="your_google_api_key"
  • これにより、サーバーがClaude Desktopに登録され、Google APIキーが渡されます。

2. 接続を確認する:

  • Claude Desktopを開き、以下を入力します:
/mcp
  • vibetestサーバーが接続済みと表示されていることを確認します。

3. Vibetopコマンドを実行する:

  • Claude Desktopで以下を入力します:
Vibetest my website with 5 agents: https://example.com
Run vibetop on localhost:3000
  • ClaudeはコマンドをMCPサーバーに転送し、テスト結果を返します。

Claude Desktop経由でサイトをテストしたところ、フォームのバグが即座に検出されました。非常にスムーズです!

Vibetest-use MCPとCursorの使用

Cursorの洗練されたインターフェースがお好みですか?テストのためにVibetest-use MCPをセットアップする方法をご紹介します。

1. Cursor設定UI経由でMCPサーバーを追加する:

  • Cursor Settings > MCP(左サイドバー)を開きます。
  • Add Serverまたは「+」ボタンをクリックします。
  • 以下の設定を追加します(パスとキーは調整してください):
{
  "mcpServers": {
    "vibetest": {
      "command": "/full/path/to/vibetop-use/.venv/bin/vibetest-mcp",
      "env": {
        "GOOGLE_API_KEY": "your_google_api_key"
      }
    }
  }
}
  • 保存し、必要であればCursorを再起動します。

2. CursorでVibetestコマンドを使用する:

  • Cursorのチャットまたはコマンドインターフェースで試してみてください:
Vibetest my website with 5 agents: https://example.com
Run vibetest on localhost:3000
Run a headless vibetest on localhost:8080 with 10 agents
  • CursorはMCPサーバーと通信し、結果をインラインで表示します。

Cursorでヘッドレステストを実行したところ、JSON出力が非常に明確でした。QAの楽園です!

Vibetest-use MCPのカスタマイズ

Vibetest-use MCPを調整したいですか?自分好みにする方法をご紹介します。

1. エージェント数を調整する:

  • 素早いスキャンには--agents 2を、詳細なテストには--agents 10を使用します。エージェントが多いほどカバレッジは向上しますが、メモリ使用量が増加します。

2. 特定の機能をターゲットにする:

  • prompts.pyを編集して、特定のフロー(例: チェックアウトプロセス)をテストします:
prompt = "Vibetest with 3 the checkout flow on {website}. Verify cart updates and payment buttons."
vibetest completed
  • 実行します:
uv run vibetest --url https://shop.com --prompt "Test checkout flow"

3. CI/CDと連携する (Ubuntu):

  • GitHub Actionsに追加します:
name: QA with Vibetest-use
on: [push]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: |
          curl -LsSf https://astral.sh/uv/install.sh | sh
          uv venv
          source .venv/bin/activate
          uv pip install -e .
          uv pip install playwright
          uv run playwright install chromium
          uv run vibetest --url http://localhost:3000 --agents 5 --output results.json
      env:
        GOOGLE_API_KEY: ${{ secrets.GOOGLE_API_KEY }}

4. DeepSeekでスマートに:

  • DeepSeekと組み合わせて使用します:
uv run vibetest --url https://example.com --llm deepseek-chat
  • 複雑なテストの推論能力が向上します。

Vibetest-use MCPの機能を探る

Vibetest-use MCPにはQAに役立つ機能が満載です。これらをチェックしてみてください:

  1. 並列テスト: Xで宣伝されているように、10以上のエージェントを60秒未満のスキャンで実行できます。

2. クロスブラウザテスト: playwright.config.ts経由でFirefox/Safariをテストします:

{ browserName: 'firefox' }

3. 詳細調査モード: mcp-browser-cli --deep-researchを使用してUX分析を行い、Markdownレポートを保存します。

4. コミュニティ: Browser-CodeのDiscordまたはGitHub(38スター)に参加してアイデアを共有しましょう。

テストでFirefox固有の不具合を発見しました。Vibetest-use MCPはQAのチャンピオンです!

まとめ: Vibetest-use MCPをマスターする

あなたはVibetest-use MCPを解き放ち、プロのようにQA(品質保証)を自動化しました!セットアップからライブサイト、ローカルサーバーのテスト、Claude DesktopやCursorとの連携まで、アプリをバグフリーに保つ準備が整いました。さらに多くのエージェント、DeepSeek、CI/CDを試してみてください。そして、忘れずにAPIdogでAPIをドキュメント化しましょう。XやGitHubでVibetest-use MCPの成果を共有してください。あなたのQAスキルが飛躍するのを楽しみにしています!🚀

button