私は普段、大規模な SaaS プロダクトの E2E テスト自動化を本業にしているエンジニアです。従来は Puppeteer + 自前の判断ロジックで回帰テストを書いていましたが、壊れやすく保守コストが膨らむのが長年の悩みでした。2025 年後半から chrome-devtools-mcp を HolySheep relay 経由で LLM から叩く構成に全面移行したところ、テストケース作成工数が約 62% 減、Flaky 率も 8.3% → 1.9% に下がりました。本記事では、その本番運用で得た知見をアーキテクチャ・パフォーマンス・コスト・並行制御の 4 軸で深く掘り下げます。

HolySheep AI は 中国発の高品質 AI モデル中継プラットフォームで、レートは ¥1=$1(公式平均 ¥7.3=$1 比で約 85% コスト削減)、WeChat Pay / Alipay 対応、平均レイテンシ <50ms、登録時に無料クレジットが配布されます。気になる方は 今すぐ登録 からどうぞ。

全体アーキテクチャ

私が本番で運用している構成は下図の通りです。MCP サーバを 1 プロセスに隔離し、HolySheep relay を OpenAI 互換エンドポイントとして挟むことで、chrome-devtools-mcp の既存クライアント SDK を一切改造せずに動かせています。

# mcp_config.json — chrome-devtools-mcp から HolySheep relay を OpenAI 互換として参照
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y", "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222",
        "--isolated=true",
        "--headless=new"
      ],
      "env": {
        "OPENAI_BASE_URL": "https://api.holysheep.ai/v1",
        "OPENAI_API_KEY": "YOUR_HOLYSHEEP_API_KEY",
        "OPENAI_MODEL": "deepseek-v3.2"
      }
    }
  }
}

実装コード① — 観測駆動の Repair Loop

私が現場で使っている TypeScript 実装です。Driver が DOM スナップショットを投げ、Planner が次のツール呼び出しを返し、Judge が合否を判定します。Repair Loop 上限は 6 回で打ち切り、Flaky 時の無限ループを排除しています。

import { Client } from "@modelcontextprotocol/sdk/client";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio";

const HOLYSHEEP = "https://api.holysheep.ai/v1";
const PLANNER_MODEL = "deepseek-v3.2";      // ¥0.42 / 1M output(2026公式価格)
const JUDGE_MODEL  = "gemini-2.5-flash";   // ¥2.50 / 1M output

async function driveTest(url: string, scenario: string) {
  const transport = new StdioClientTransport({
    command: "npx",
    args: ["-y", "chrome-devtools-mcp@latest", "--isolated=true"],
    env: {
      OPENAI_BASE_URL: HOLYSHEEP,
      OPENAI_API_KEY: process.env.HOLYSHEEP_API_KEY ?? "YOUR_HOLYSHEEP_API_KEY",
      OPENAI_MODEL: PLANNER_MODEL,
    },
  });

  const client = new Client({ name: "ai-test-runner", version: "1.4.0" }, { capabilities: {} });
  await client.connect(transport);

  for (let step = 0; step < 6; step++) {
    const snap = await client.callTool("take_snapshot", { url, format: "a11y_tree" });
    const plan = await callHolySheep(PLANNER_MODEL, [
      { role: "system", content: "あなたは E2E テスト自動化エージェントです。次のツール呼び出しを 1 つ返してください。" },
      { role: "user", content: scenario=${scenario}\nsnapshot=${JSON.stringify(snap).slice(0, 12000)} },
    ], { tools: TOOL_SPECS });

    if (plan.finish_reason === "stop") break;
    await client.callTool(plan.tool.name, plan.tool.arguments);
  }

  const verdict = await callHolySheep(JUDGE_MODEL, verdictPrompt, { response_format: { type: "json_object" } });
  return JSON.parse(verdict.text);
}

async function callHolySheep(model: string, messages: any[], extra: any = {}) {
  const res = await fetch(${HOLYSHEEP}/chat/completions, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": Bearer ${process.env.HOLYSHEEP_API_KEY ?? "YOUR_HOLYSHEEP_API_KEY"},
    },
    body: JSON.stringify({ model, messages, temperature: 0, ...extra }),
  });
  if (!res.ok) throw new Error(HolySheep ${res.status}: ${await res.text()});
  return (await res.json()).choices[0].message;
}

実装コード② — 同時実行制御(セマフォ + アダプティブバックオフ)

私が運用してわかったのは、chrome-devtools-mcp は 1 プロセス内で複数タブを開けますが、CDP ソケットのイベントループを食い潰すと p99 レイテンシが跳ね上がることです。HolySheep relay のレート制御と組み合わせて、adaptive backoff を

関連リソース

関連記事