GitHub CopilotとPlaywright MCPでウェブをテストする

許可されたブラウザーツールがそのセッションにあれば、操作できます。VS Codeの内蔵ブラウザーには独自のツールがあります。ワークスペースにPlaywright MCPを登録する方法もあります。GitHub.comのエージェントは別環境で動き、既定のPlaywright MCPはその環境のlocalhostを使います。最初にクライアントとURL、成功条件を決めます。たとえば、OFFを読み、Enable demoを押してONを確認します。 VS Codeのブラウザーツール GitHub MCPの概要

Redditでは、Copilotでテスト用のブラウザーを開けなかったという投稿がありました。どのクライアントで、何のツールを有効にしていたかは書かれていません。同じ問題を調べるときは、そこから確認します。すでにVS Codeでデバッグしているなら、まず統合ブラウザーを試し、MicrosoftのPlaywrightツールが必要になった時点でMCPを追加します。 ブラウザーテストの投稿

要点

• VS Codeの統合ブラウザーは、組み込みツールでページを開いて操作できます。

• VS Codeのワークスペースでは、.vscode/mcp.jsonのserversにPlaywright MCPを追加します。

• 単体のCopilot CLIは別に設定します。対話セッションでは/mcp addを使います。

• GitHubの既定のPlaywright MCPは、クラウドタスクの実行環境内のlocalhostだけにアクセスできます。

• クリック後にページから期待どおりの状態を読み取れたら、テストは成功です。

実行環境を特定する

GitHub.comで接続が拒否されたら、クラウドタスク内でアプリがポートを開いているか確認します。VS CodeのAgentsウィンドウでは、一部のリモートセッションで統合ブラウザーの通信をリモートホスト経由にできます。ポートを変える前に、ブラウザーが使うホストを確認します。 クラウドのツール資料 統合ブラウザーのネットワーク設定

実行ホストとlocalhostの関係は、別のクラウドエージェントの例でも確認できます。

VS Codeの統合ブラウザーを試す

アプリを起動して、統合ブラウザーでURLを開きます。Chatでローカルのエージェントセッションを開始し、ツール選択画面でブラウザーツールを確認します。表示されない場合は、workbench.browser.enableChatToolsと組織のポリシーを確認してください。エージェントに同じURLを開かせ、画面に表示された見出しを読み取らせます。 VS Codeのブラウザーツール

ページを読み取れたら、操作を1回実行し、結果を確認させます。プルリクエストごとに同じ確認をするなら、手順をPlaywrightテストとしてリポジトリに保存します。

VS CodeにPlaywright MCPを登録する

Node.js 18以降を使います。例では、チーム内でそろえられるようパッケージのバージョンを固定しています。既存の.vscode/mcp.jsonに設定を追加し、MCP: List Serversからplaywrightを起動します。ツールが出ない場合はサーバーの出力を確認してください。VS Codeは条件を満たすサーバーをCopilotセッションに引き渡します。対話入力が必要な設定は、公式ドキュメントで対応する形式を確認してください。

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--isolated"]
    }
  }
}

現在のセッションでナビゲーションとスナップショットを選べるか確認します。ワークスペースの信頼、組織の設定、エージェント選択で変わります。最初は分離したプロファイルを使います。ログイン済みセッションが必要なら、権限、アカウント、表示されるワークスペースを別途確認します。 VS Code MCP設定 Playwright MCPリポジトリ 既存ブラウザーの接続

別のコーディングエージェントでPlaywright MCPを設定済みなら、用途が合うコマンドと引数は使い回せます。サーバーの登録にはVS Codeの形式を使います。

CLIとクラウドは個別に設定する

対話型のCopilot CLIで/mcp addを実行し、ローカルのSTDIOサーバーを選びます。VS Codeの例と同じコマンドと引数を入力します。保存したら/mcp show playwrightで確認します。ユーザー設定の~/.copilot/mcp-config.jsonではmcpServersを使います。プロジェクトにはポータブルな.mcp.jsonを置くこともできます。同名の設定はプロジェクト側が優先されます。 Copilot CLIの設定

GitHub.comのクラウドタスクでは、タスク内でアプリを起動し、その環境のポートを使います。クリックする前に、プロセスの起動とページ見出しを確認させます。Redditには、Webエージェントでブラウザーが使用中だというエラーを見た人もいます。同じ症状が出たら、エラー全文とタスクの条件を控えてからやり直します。 クラウドエージェントの投稿

画面で分かる状態変化を検証

自分で管理するテストページを使い、目に見えるIDと無害な操作を用意します。操作前の値を読み、クリックして同じページで値を確認します。スクリーンショットは補足になります。

次のHTMLをテストアプリが配信するフォルダーにcopilot-fixture.htmlとして保存します。配信先のURLを開き、試す前に毎回再読み込みします。ボタンと識別子はクリック後も画面に残ります。確認項目を増やす場合はブラウザーエージェントの指示テンプレートを調整してください。

<!doctype html>
<meta charset="utf-8">
<title>Copilot test fixture</title>
<h1>COPILOT-DEMO</h1>
<p>Status: <output id="status">OFF</output></p>
<button type="button" id="enable">Enable demo</button>
<script>
  document.getElementById("enable").addEventListener("click", () => {
    document.getElementById("status").textContent = "ON";
  });
</script>

ブラウザーツールで、許可した copilot-fixture.html のテストURLを開いてください。ページIDが COPILOT-DEMO、初期状態が OFF であることを確認します。Enable demo を1回クリックし、同じIDと ON を読み取ります。URL、ツール、押したボタン、確認した値を報告してください。URL、ID、初期状態が違う場合は停止します。

GitHubの手順では、より大きなアプリの問題を再現して修正を検証します。初回接続では一つのボタンと一つの検証に絞ります。 GitHubのデバッグ手順 初めてのブラウザー作業 Playwrightのブラウザー自動化

最初に失敗した手順を調べる

サーバーが起動直後に止まる場合は、ログでコマンド、Nodeのバージョン、設定の範囲を確認します。サーバーが動いていてもツールが出ない場合は、同じセッションでツールの選択、ワークスペースの信頼、組織ポリシーを確認します。 MCP接続後にツールが出ないとき

接続拒否なら、ブラウザー側の環境からURLとポートを確認します。ページは開くのにクリックできない場合は、要素が見えているか、有効か、一意に特定できるかを確認します。アクセシブル名と期待する状態を指定してください。クリックできないときの対処では、別の要素に覆われているケースも扱っています。

ローカルの動作確認は組み込みツールから始めます。チームで設定を共有するならPlaywright MCPをワークスペースに追加します。CLIやGitHub.comでは、実際に操作するセッションのホストとツールを確かめ、まず1つの状態変化を検証してください。

Secholar.L

Tabbit グロース&コンテンツ担当

Secholar.L は AI ブラウザとエージェントワークフローについて、実際の調査と検証可能な一次情報に基づく実践的なガイドを執筆しています。