DevContainerでChrome MCPサーバーを動かす（意外と難しかった・・・）

E2E テストを導入するにあたり、従来は Playwright や Cypress のようなコードベースの専用フレームワークを選ぶのが一般的でした。

ただ最近、AI エージェントが外部ツールを呼び出せる「MCP（Model Context Protocol）」が登場したことで、状況が変わりつつあります。

ブラウザ操作の領域では特に、

• Chrome MCP Server（Chrome DevTools Protocol の MCP 実装）
• Playwright MCP（Playwright の MCP サーバ実装）

などの “ブラウザ操作を MCP サーバとして提供するツール” が公開され始めており、E2E テストを自然言語ベースで実行できる未来が見えてきました。

まずはその可能性を探るため、DevContainer 上で Chrome MCP サーバを動かし、AI エージェント（今回は GitHub Copilot Chat）からブラウザ操作できる環境を整えてみました。

E2Eテストツールとして期待できるChrome MCPサーバー

E2E テストにおける従来の課題として、Playwright や Selenium といったフレームワークは#login-btn のような locator（セレクタ）に依存するため、UI が変更されるとテストが壊れやすい点があります。

しかし、Chrome MCP Server や Playwright MCP は、UI 要素をセレクタではなく「意味」で探索するため、

• 「ログインボタンを押して」と自然言語で操作可能
• DevTools Protocol 経由で UI を解析し、要素を自動探索
• UI が変更されても AI が“意味”をもとに再探索

など、UI変更に対する強さが大きいというメリットがあります。

UI変更内容	Playwright/Selenium	MCPサーバ（Chrome MCP）
class 名変更	locator 修正必須	AI が意味で再探索
テキスト変更	text= 修正	文脈で推定
DOM 階層変更	xpath 破綻	DevTools API で再探索
UIコンポーネント変更	全面修正の可能性	“ボタン” の意味で推定

もちろん、Chrome MCP Server も万能というわけではありませんが、UI変更の影響を受けにくい点は E2E の保守性向上につながり、一度検証してみる価値があると感じました。

今回やること

今回やることとしては、下記です。

• DevContainer 上で Headless Chrome を動かす
• Chrome MCP サーバを起動する
• MCP クライアント（今回は GitHub Copilot Chat）からブラウザを操作する

補足：Headless Chrome とは？

Headless Chrome は「画面を表示しない Chrome」という意味ですが、内部では通常の Chrome と同じ機能が動作します。

• DOM 構築
• JavaScript 実行（V8）
• CSS レイアウト
• Cookie / localStorage
• DevTools Protocol

E2E テストでは headless が一般的で、下記のメリットがあります。

• GUI を描画しない分、高速・安定している
• CI/CD（GitHub Actionsなど）で実行しやすい

DevContainerへのChrome MCPサーバ導入設定

Chrome MCP サーバを DevContainer 内で動かすために、devcontainer.json と Dockerfile を用意します。

chrome-mcp-devcontainer/
└── .devcontainer/
    ├── devcontainer.json
    └── Dockerfile

devcontainer.json

{
  "name": "chrome-mcp-devcontainer",
  "build": { "dockerfile": "Dockerfile" },
  "forwardPorts": [9222],

  "customizations": {
    "vscode": {
      "mcp": {
        "servers": {
          "chrome-devtools": {
            "command": "npx",
            "args": [
              "-y",
              "chrome-devtools-mcp@latest",
              "--browser-url=http://127.0.0.1:9222"
            ],
            "type": "stdio"
          }
        }
      },
      "settings": {
        "chat.mcp.access": "all"
      },
      "extensions": ["GitHub.copilot-chat"]
    }
  }
}

Dockerfile

FROM mcr.microsoft.com/devcontainers/base:ubuntu-24.04

RUN apt-get update && \
    apt-get install -y wget curl gnupg && \
    \
    # Google Chrome 追加
    wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google.list' && \
    \
    # Node.js 20 追加
    curl -fsSL https://deb.nodesource.com/setup_20.x | bash - && \
    \
    apt-get update && \
    \
    # Chrome + Node.js + 日本語フォントまとめて install
    apt-get install -y --no-install-recommends \
        google-chrome-stable \
        nodejs \
        fonts-noto-cjk \
        fonts-noto-cjk-extra \
        fonts-ipafont-gothic \
        fonts-ipafont-mincho \
        fonts-unfonts-core && \
    \
    apt-get clean && rm -rf /var/lib/apt/lists/*

# フォントキャッシュ更新
RUN fc-cache -fv

devcontainer.json と Dockerfile を用意したら、コンテナをリビルドし開発コンテナを立ち上げましょう。

そうすると、Chrome MCP サーバー が開発コンテナに作られます。

Chrome MCPサーバーを実際に動かしてみる

設定が整ったので、ここから動作確認に入ります。

Chrome の起動

下記コマンドを開発コンテナ内のターミナルで実行します。

google-chrome   --headless   --no-sandbox   --disable-gpu   --disable-dev-shm-usage   --remote-debugging-port=9222   --remote-debugging-address=0.0.0.0   --user-data-dir=/tmp/chrome-debug

Chromeが起動したらcurlコマンドを実行しレスポンスとして下記のようなレスポンスが返ってくればOKです。

curl http://127.0.0.1:9222/json/version

{
  "Browser": "Chrome/142.0.7444.175",
  "Protocol-Version": "1.3",
  "User-Agent": "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/142.0.0.0 Safari/537.36",
  "V8-Version": "14.2.231.21",
  "WebKit-Version": "537.36 (@302067f14a4ea3f42001580e6101fa25ed343445)",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/616b0b36-145f-4ae6-a0df-a2346741028f"
}

MCP クライアントからブラウザ操作

GitHub Copilot Chat をAgentモードで起動し、下記のようなプロンプトを実行してみましょう。

#chrome-devtools
https://example.com を開いて最も最近の記事のフルページスクリーンショットを撮ってください

正常にスクリーンショットの取得ができました。

こちらが取得したスクショになります。

躓いたポイント：日本語フォントを入れないと文字化けする

躓いたポイントとしてはキャプチャを取得した際、下記のように文字化けしました。

そこで、.devcontainer/Dockerfileで、Chromeのインストールと合わせ日本語フォントもインストールすることで、文字化けが解消できました。

    # Chrome + Node.js + 日本語フォントまとめて install
    apt-get install -y --no-install-recommends \
        google-chrome-stable \
        nodejs \
        fonts-noto-cjk \
        fonts-noto-cjk-extra \
        fonts-ipafont-gothic \
        fonts-ipafont-mincho \
        fonts-unfonts-core && \
    \
    apt-get clean && rm -rf /var/lib/apt/lists/*

参考リンク

• https://github.com/ChromeDevTools/chrome-devtools-mcp

最後に

Chrome MCP サーバはまだ情報が少ないですが、E2E テストの保守性向上につながる可能性があり、今後の進化に期待しています。

以上