VS CodeのMCP設定にMicrosoft公式のPlaywrightのMCPサーバーを追加して、Github Copilot ChatからAIに指示を出して、Ubuntu24.04.2 LTS (WSL2 on Windows11) 上でWEBブラウザを起動させて操作させてみました。
2025/11/04追記：このMCPサーバーは非常に重宝しています。
ブラウザ上で発生した不具合や、AI Agentがなんちゃってで実装した処理をブラウザ上で実際に意図した挙動をしているかをAI Agent自身に動作テストをさせるのに役立ちます。
「●●のページで▼▼のエラーが出ているから、email: ◆◆@◆◆, password: ×××× でログインして確認して直して。修正後に必ず動作確認しといて。」
みたいな指示を出すと、直るまで頑張って直しては確認してを繰り返してくれます。
もう、これ無しでは生きていけない感じです。
前提条件
- VS Code Windows版を使っていきます
- Ubuntu 24.04.2 LTS (WSL2 on Windows11) を使っていきます
- Github Copilot Chat (VS Code拡張) を使っていきます
- Github Copilot Proプランを契約しています
- Node.js 22以降インストール済 (Ubuntu上)
- Google Chrome インストール済 (Ubuntu上。デフォルトブラウザがあれば何でもOK)
▼UbuntuへのGoogle Chromeインストール
▼Node.js
▼Github Copilot Pro
これからやること
- VS CodeにMCPサーバー追加
- 動作確認用のWEBアプリ準備
- Github Copilot Chatから指示だし
- スクリーンショットの確認
構成の確認
今回の構成は次の通りです。
- VS Code： Windows11上
- Ubuntu： WSL2 on Windows11
- Google Chrome： Ubuntu上
- PlaywrightのMCPサーバー： Ubuntu上
- プロジェクトフォルダ： Ubuntu上
Windows上でVS Codeを起動して、MCPサーバーはWSL経由でUbuntu上で実行させます。
※この構成でのMCPの設定が今回のポイントになります。
Google ChromeもUbuntu上で実行させます。
スクリーンキャプチャの保存もUbuntu上で実施します。
VS CodeのMCPの設定
PlaywrightのMCPサーバーはインストールせずにnpxコマンドで実行させます。
Ubuntu上の設定ファイルを直編集してもOKですが、
一応VS Codeのメニューから設定していきます。
VS Codeを開いた状態で、[Ctrl]+[Shift]+[P] でMCPサーバーの設定を開きます。
「MCP: サーバーの一覧表示」を選択します。
「サーバーを追加する」を選択します。
「コマンド (stdio)」を選択します。
実行コマンドを入力します。
npx -y @playwright/mcp@latest
MCPサーバーの設定名を入力します。
「リモート」を選択します。
Ubuntu上のVS CodeサーバーのMCPの設定ファイルに次の内容が保存されます。
▼「~/.vscode-server/data/User/mcp.json」
{
"servers": {
"playwright-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@playwright/mcp@latest"
]
}
},
"inputs": []
}
動作確認用のWEBアプリを用意してみる
以前の記事でも使ったもの（雑なログイン機構）を流用してみます。（PHP8.2以降）
こんな感じのファイル構成になります。
※雑な作りなのでプロダクションでは使わないでください。（使わないと思うけど一応お断り）
動作確認
PHPをサーバーモードで起動します。
php -S localhost:8000 -t public/
Ubuntu上でGoogle Chromeを起動してみます。
google-chrome
Ubuntu上のGoogle Chromeのウィンドウが開くので、アドレスバーに
http://localhost:8000/ を入力してアクセスしてみます。
ログインページにリダイレクトされます。
メールアドレス「hoge@example.com」、パスワード「password」でログインします。
ダッシュボードに遷移します。
PlaywrightのMCPを使ってAIに操作させてみる
Github Copilot ChatをAgentモードにし、Claude Sonnet 4.5を選択して次の指示を与えてみます。
`playwright-mcp`の設定を使って、WEBブラウザで次の操作をしてください。各ページのフルページスクリーンショットを撮って、`screenshots/`内に別々に保存してください。
- http://localhost:8000/ にアクセス
- 次の情報でログインする。メールアドレス:`hoge@example.com` / パスワード:`password`
- ダッシュボードに遷移したらログアウトする
以上！
「許可」するとGoogle Chromeが開き、ブラウザ操作が始まります。
各操作で「許可」を求められるので、それぞれ許可すると操作が完了します。
スクリーンショットは「/tmp/」に保存されるようです。
プロジェクトフォルダに保存したい場合は、そこからコピーまたは移動させる指示を出す必要がありますね。
一応、フルページのスクリーンショットは取れていました。
以上です。
- 2
- 0
- 0
- 0
コメント