/ ディレクトリ / プレイグラウンド / web-eval-agent
● コミュニティ refreshdotdev ⚡ 即起動

web-eval-agent

作者 refreshdotdev · refreshdotdev/web-eval-agent

自然言語によるウェブアプリケーションのエンドツーエンドテスト — エージェントがブラウザを操作し、コンソール/ネットワークをキャプチャして、調査結果をまとめて報告します。

web-eval-agent (refreshdotdev) を使うと、ユーザータスクを自然言語で説明でき、MCP がブラウザを開いてフローを実行し、スクリーンショット、コンソールログ、ネットワークトラフィックをレポートします。Playwright スクリプトを書くことなく、探索的な UX テストに便利です。注記: 元のプロジェクトは廃止されており、チームは withrefresh.com に移行しましたが、MCP は既存のライセンスの下で機能し続けています。

なぜ使うのか

主な機能

ライブデモ

実際の動作

web-eval-agent.replay ▶ 準備完了
0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "web-eval-agent": {
      "command": "uvx",
      "args": [
        "web-eval-agent"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "web-eval-agent": {
      "command": "uvx",
      "args": [
        "web-eval-agent"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "web-eval-agent": {
      "command": "uvx",
      "args": [
        "web-eval-agent"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "web-eval-agent": {
      "command": "uvx",
      "args": [
        "web-eval-agent"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "web-eval-agent",
      "command": "uvx",
      "args": [
        "web-eval-agent"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "web-eval-agent": {
      "command": {
        "path": "uvx",
        "args": [
          "web-eval-agent"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add web-eval-agent -- uvx web-eval-agent

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: web-eval-agent

web-eval-agent でウェブデプロイのスモークテストを実施します

👤 Playwright スイートのない単独開発者や小規模チーム ⏱ ~10 min beginner

使うタイミング: デプロイ後に、『明らかに何か壊れていないか』を素早くチェックしたいときに使います。

前提条件
  • operative.sh/mcp の無料 API キー — サインアップしてキーをコピーします
  • Playwright の依存関係 — npx playwright install (MCP が不足していると通知します)
フロー
  1. テストを記述します
    staging.example.com で以下の操作ができることを確認してください: 新しいメールでサインアップする、プロジェクトを作成する、ログアウトする。失敗した内容をレポートしてください。✓ コピーしました
    → スクリーンショット付きの成功/失敗
  2. 失敗を掘り下げます
    失敗したステップについて、コンソールエラーと 500 を返したネットワークリクエストを表示してください。✓ コピーしました
    → スタックレベルの証拠

結果: 2 分でデプロイ後の確信を得られます。

注意点
  • テストアカウントが本番 DB を散らかします — 常にステージングに対して実行してください。本番の場合は、専用の QA アカウントを使用してクリーンアップしてください。
組み合わせ: sentry

新しいフローの探索的 UX 評価

👤 デザイナー、PM ⏱ ~20 min intermediate

使うタイミング: ユーザーテストをスケジュールせずに、フローについて外部の視点を得たいときに使います。

フロー
  1. ユーザーの意図を記述します(ステップではなく)
    初めてのユーザーとして、プロジェクトを同僚と共有できるか試してください。引っかかるところをすべてメモしてください。✓ コピーしました
    → 各ポイントのスクリーンショット付き自由形式の UX 批評
  2. ハッピーパスと対比します
    UI に詳しいパワーユーザーとして、同じフローを実行してください。どのくらい速いですか? 初心者は引っかかるが、エキスパートは引っかからない点は何ですか?✓ コピーしました
    → 比較摩擦マップ

結果: 実際のユーザーテストを実施する前に、低コストの UX 知見が得られます。

ログインの背後にある機能をテストして、ブラウザ状態を永続化します

👤 認証フローをテストしている人 ⏱ ~15 min intermediate

使うタイミング: 機能にはログインが必要で、エージェントにパスワードを処理させたくないときに使います。

フロー
  1. セッションをシードします
    setup_browser_state を呼び出して https://app.example.com/login を開いてください — 自分でサインインします。✓ コピーしました
    → インタラクティブなブラウザが開き、ログインして、セッションが保存されます
  2. 保存した状態を使用してテストを実行します
    請求設定ページをテストしてください: ロードして、現在のプランが表示されていることを確認して、ダウングレードを試してください。✓ コピーしました
    → 認証済みセッションでテストが実行されます

結果: エージェントとの認証情報共有なしに、認証済みテストを実施できます。

組み合わせ

他のMCPと組み合わせて10倍の力を

web-eval-agent + sentry

評価を実行して、新しいエラーを Sentry に送信して、事後レビューを行います

サインアップ評価を実行して、その間にキャプチャされた新しいエラーイベントについて Sentry をチェックしてください。✓ コピーしました
web-eval-agent + playwright

web-eval-agent でプロトタイプを作成して、CI 用に Playwright に強化します

動作する web-eval-agent テストを CI で実行できる Playwright スペックに変換してください。✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
web_eval_agent url: str, task: str, headless_browser?: bool 自然言語のウェブテスト LLM 呼び出し + ブラウザ時間
setup_browser_state url?: str サービスごとに 1 回、ログイン状態を永続化します 0

コストと制限

運用コスト

APIクォータ
operative.sh の無料ティア
呼び出しあたりのトークン
完全な評価は 5-20k トークン (スクリーンショット記述)
金額
低ボリュームの場合は無料
ヒント
繰り返しテストは Playwright に移行させ、web-eval-agent は探索に活用します。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管: operative.sh API キーを環境変数に格納。ブラウザ状態をローカルに保存します。
データ送信先: ターゲットサイト + 評価オーケストレーション用の operative.sh

トラブルシューティング

よくあるエラーと対処法

ブラウザが起動できません

Playwright の依存関係をインストールしてください: npx playwright install-deps

セッショ��がすぐに期限切れになります

一部のサイトは Cookie を回転させます。setup_browser_state を再実行してください。または、より細かい制御のために Playwright の storageState を使用してください。

エージェントがタスクを誤解します

具体的にしてください: URL、探すセレクタやテキスト、期待される結果

代替案

web-eval-agent 他との比較

代替案代わりに使う場面トレードオフ
Playwright MCPスクリプト可能で再現可能なテストが必要な場合コードを自分で書きます
Browserbase MCPCI 用のクラウドホストブラウザが必要な場合1 分あたり課金されます

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る