会社負担でCopilotがVSCodeで使える環境の人も多いと思うので、その環境下でPlaywrightMCPを使う方法をここに残しておこうと思います。
playwright-mcpの機能まとめ
- ブラウザの自動操作をサポート（スクリーンショット不要）
- VS Code との連携が可能（コマンドまたはGUIボタンでインストール）
- CLIからの起動も可能（npx @playwright/mcp@latest）
- ヘッドレスモード（GUIなし）対応：バックグラウンド処理向け
- Docker対応：headless Chromium のみサポート
- Visionモード：XY座標ベースでの操作が必要なモデルに対応（--visionフラグ）
前提条件
VS Codeは最新のバージョンにしておいてください。
つい最近まで公式ドキュメントでVS Code Insidersをインストールするように案内がされていたので、そのせいでVS Code Insidersをインストールすように書いてあるブログが複数存在している状態ですが、2025年4月20日現在、VS Codeを最新バージョンにすれば使えるので、バージョンはアップデートしておいてください。
インストール
npx @playwright/mcp@latest
エージェントモードを有効化
VS Codeの設定(画面右下にある歯車マーク)を開いて、chat.agent.enabledを検索して、チェックをいれてVSCode の Agent モードを有効にします。
他にmcpを検索して、mcpの設定をONにするように、という記事を見かけましたが、現在ではその設定項目が消えているようで、私が試したときにはなかったです。
vscodeのsetting.jsonに追加
コマンドパレットでsetting.jsonを検索するなどして開いて、以下を書き込みました。
{
//他の設定の後に・・・
"mcp": {
"inputs": [],
"servers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
},
"github.copilot.chat.agent.thinkingTool": true
}
"servers" 内のキーは、Copilot Chat に読み込ませたい MCP ツールの「名前」になります。@playwright/mcp を利用する場合、公式の例にある通り、サーバー名を "playwright" にするのが推奨されています。
"mcp-server-time"と書いているブログを見ましたが、これはエラーにはならないものの、Copilot Chatが自動で認識しない可能性があるようです（特にエージェントが playwright に特化している場合）
もし複数のMCPサーバを使いたい場合、serversキーの中の、playwrightの後にキーを入れて設定を追加してください。
"github.copilot.chat.agent.thinkingTool": trueは、trueにするとエージェントモードで常にMCPを使うように設定できます。
上記を入力すると、入力したsetting.jsonの文字列の側に起動という文字とともに再生ボタンが表示されるので押してください。
chat画面で使ってみる
copilotのchat画面のプロンプト入力部に、質問するというドロップダウンメニューをエージェントに切り替えてください。
レンチみたいなアイコンをクリックすると、現在有効なMCPサーバが表示されるので、ここにPlaywrightが表示されていれば成功しています。
そうすると、MCPサーバ経由で回答してくれます。
例えば「このファイルのE2Eテストを作成してください」とプロンプト入力すると、現在アクティブなファイルへのPlaywrightを使ったテスト方法を教えてくれました。
他にも、ブラウザで Google を開いて、「Playwright MCP」と検索して、一番上のリンクをクリックしてください。とプロンプトに入れるだけで、chromeを開き、Googleのサイトを開いてくれました(reCAPTCHAに引っかかって最後までタスクを実行できませんでしたが。。。)
https://example.com/contact にアクセスして、名前に「hoge」、メールに「hoge@example.com」、メッセージに「こんにちは」と入力して、送信ボタンをクリックしてください。という指示もうまくいきました。