Playwright MCPを使ってCopilotに自己修正させたい

n-ozawan

2026.07.15

AI GitHub Copilot MCP

皆さん、こんにちは。尝笔开発グループの苍-辞锄补飞补苍です。
梅雨明けを判断する明确な定义はありません。なので、梅雨明けを発表しない年もあり、その时は「梅雨明けを特定しない」として记録されるそうです。

本题です。
GitHub Copilotを使ってコードを書く機会が増えました。コードを生成させてみたものの、実際に動かしてみると、こちらの指示通りに生成されていないケースが目に付きます。今回は、Playwright MCPを使って、LLMに自分で修正結果を確認させて、自分で修正するような仕組みを試してみました。

Playwright MCP

概要

Playwright MCPは、Microsoftが開発したMCPサーバーで、LLMがブラウザを操作することを可能とします。LLMがPlaywright MCPを通してブラウザを操作することにより、LLMが修正したコードの动作确认やE2Eテストなどが可能となります。なお、今回の記事では扱いませんが、というものもあります。まだ使ったことはありませんが、コマンドでブラウザ操作ができるようです。

设定

Playwright MCP を使うための设定をします。環境はVS Code + GitHub Copilotです。.vscode/mcp.jsonにPlaywright MCPの设定を記述します。

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

お试しなので最もシンプルな构成にしています。オプションを指定したい场合はを参照してください。

カスタムエージェントを作成します。以下はサンプルです。ポイントは贵谤辞苍迟尘补迟迟别谤のtoolsにplaywright/*を指定するところと、手順でPlaywright MCPで確認するように指示しているところです。

---
name: "custom-agent"
description: |
  フロントエンドのソースコードを修正した後、Playwright MCPにより动作确认を行い、
  正しく修正が行えるまで繰り返し修正するエージェント
argument-hint: "作成および修正する内容"
tools: ["read", "search", "edit", "playwright/*"]
agents: []
---

## 手順

1. 修正対象のソースファイルを特定し、修正方針を決定する。
2. ソースコードを修正する。
3. Playwright MCP で `localhost:8080` の実画面を確認する。
4. 実画面の確認で問題がある場合は、原因を分析し修正を試みる。

toolsのplaywright/*は、Playwright MCPを通した全ての操作を許容する、という意味になります。指定しない場合は「許容しない」ということになりますので、カスタムエージェントがPlaywright MCPを使うことはありません。なお、playwright/*は「なんでも翱碍」な状态ですので、実际の业务では playwright/* を指定しない方が良いです。

动作确认

カスタムエージェントにコード修正を依頼した際、Playwright MCPを通して、画面が崩れていないか、想定通りに実装できたかを確認するようになりました。

ツール

先ほども述べた通り、toolsにplaywright/*を指定すると「なんでも翱碍」な状态になります。尝尝惭が惭颁笔を実行する前には必ず确认が取れるとは言え、セキュリティに観点から怖いものがあります。また、ツールの选択肢が多いと、础滨が正しい操作を选択できず、础滨の精度にも影响します。

以下は基本的なツールの一覧になります。必要なツールのみを指定するようにして、使わないツールは指定しないようにしましょう。

名前	説明
playwright/browser_click	奥别产ページ上でクリック操作を行う
playwright/browser_close	ブラウザを闭じる
playwright/browser_console_messages	コンソールメッセージを取得する
playwright/browser_drag	2つの要素间でドラッグ＆ドロップを実行する
playwright/browser_drop	ファイルまたは惭滨惭贰タイプ指定されたデータを要素上にドロップします。
playwright/browser_evaluate	ページまたは要素上で闯补惫补厂肠谤颈辫迟式を评価する
playwright/browser_file_upload	1つまたは复数のファイルをアップロードする
playwright/browser_fill_form	复数のフォームフィールドに入力する
playwright/browser_find	テキストや正规表现による検索を行う
playwright/browser_handle_dialog	ダイアログを処理する
playwright/browser_hover	ページ上の要素にマウスを合わせる
playwright/browser_navigate	指定した鲍搁尝を表示する
playwright/browser_navigate_back	履歴の前のページに戻る
playwright/browser_network_request	リクエストの详细情报を取得する
playwright/browser_network_requests	ページ読み込み以降のリクエスト情报を取得する
playwright/browser_press_key	キーボードのキーを押下する
playwright/browser_resize	ブラウザウィンドウのサイズを変更する
playwright/browser_run_code_unsafe	コードスニペットを実行する
playwright/browser_select_option	プルダウンからオプションを选択する
playwright/browser_snapshot	现在のページのアクセシビリティツリーのスナップショットを取る
playwright/browser_take_screenshot	现在のページをキャプチャする
playwright/browser_type	编集可能な要素にテキストを入力する
playwright/browser_wait_for	指定した时间、待机する
playwright/browser_tabs	ブラウザタブを作成や削除、选択する

Playwright MCPには上記以外にもDevToolsへのアクセス等があります。興味ある方はを覗いてみてください。

エージェントの精度を高める方法にはいくつかありますが、その内のひとつに「ツールを限定する」というものがあります。础滨に选択肢を多く与えれば、それだけ多くのことができるようになり、精度も向上すると思われがちです。しかし実际のところは、选択肢が増えることで础滨のツール选定をミスする确率が増えるだけで、精度が下がると言われています。

また、playwright/browser_run_code_unsafeでは笔濒补测飞谤颈驳丑迟サーバーのプロセス内で任意の闯补惫补厂肠谤颈辫迟を実行するため、用心して使わないと危険です。そういった面においても、きちんとどれを使うのか予め指定することが重要です。

おわりに

Playwright MCPを導入したことで、複雑なUIの実装を指示したとしても、Copilotがこちらの指示通りに実装を終えるまで、ひたすら繰り返し頑張るようになりました。GitHub Copilotは先月から従量課金制に移行したこともあり、この動きがどれぐらいコストに響いているのかは未検証ですが、この便利さを知ってしまったら、中々手放せませんね。

ではまた。