はじめに
Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。
「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことが出来るものだと考えてください。
Playwright はブラウザを操作する E2E テストツールです。E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールというものでした。Playwright MCP が登場したことで、 生成AIがブラウザを操作することが出来るようになります。
Cline で Playwright MCP の環境準備
※環境構築手順は Cline と GitHub Copilot 両方書きました。お好きな方を使ってください。
Playwright MCP と Cline を繋げていきます。
VSCode で Cline をインストールします。モデルは OpenAI や Azure OpenAI などを選択してください。APIエンドポイントとAPIキーで設定が完了するので手頃で簡単です。
次に、Cline の MCP Servers で Playwright MCP をインストールします。
Cline の指示に沿って環境構築を行います。
npm install -g @executeautomation/playwright-mcp-server
（追記：上記はコミュニティ版でした。Microsoft 公式版は以下です。）
npm install -g @playwright/mcp
MCP Servers（三のアイコン） > Installed > Configure MCP Servers に設定します。
※私の環境は Windows + WSL2 Ubuntu なので以下のように設定しています。
{
"mcpServers": {
"playwright": {
"disabled": false,
"timeout": 60,
"command": "wsl",
"args": [
"bash",
"-ic",
"node /home/t-kurasawa/.nvm/versions/node/v22.14.0/lib/node_modules/@executeautomation/playwright-mcp-server/dist/index.js"
],
"transportType": "stdio"
}
}
}
（追記：以下のように記載するとちょっとスッキリ書けます）
"source ~/.nvm/nvm.sh && npx -y @executeautomation/playwright-mcp-server"
GitHub Copilot で Playwright MCP の環境準備
Playwright MCP サーバーを入れてください。
npm install -g @executeautomation/playwright-mcp-server
（追記：上記はコミュニティ版でした。Microsoft 公式版は以下です。）
npm install -g @playwright/mcp
VSCode に GitHub Copilot をいれます。VSCode のバージョンは v1_99 以降にしてください。
VSCode の Agent モードを有効にします。
chat.agent.enabledを開き、チェックをいれて有効にします。
{
"mcp": {
"inputs": [],
"servers": {
"playwright": {
"command": "wsl",
"args": [
"bash",
"-ic",
"node /home/t-kurasawa/.nvm/versions/node/v22.14.0/lib/node_modules/@executeautomation/playwright-mcp-server/dist/index.js"
]
}
}
},
"chat.agent.enabled": true,
}
（追記：以下のように記載するとちょっとスッキリ書けます）
"source ~/.nvm/nvm.sh && npx -y @executeautomation/playwright-mcp-server"
MCP を起動するには Start をクリックします。正しく動けば Running と表示されます。
環境準備は以上です。
GitHub Copilot をエージェントモードに切り替え
GitHub Copilot をエージェントモードに切り替えます。
右下の Ask を Agent に変更してください。
生成AIにブラウザを操作させてみる（GitHub Copilot）
GitHub Copilot に日本語指示をして Playwrihgt MCP 経由でブラウザを操作させてみます。
私：
playwright で、https://finance.yahoo.co.jp/ を開き、今日の主要なニュースを3つ抜粋して。日本語で出力して。
GitHub Copilot：
以下は、Yahoo!ファイナンスの今日の主要なニュースから抜粋した3つのトピックです：
日経平均VIは大幅に低下
株価の大幅上昇により、投資家の警戒感が一時的に和らいでいます。
東京エレクトロンのアナリスト評価
レーティングが強気に変更され、注目を集めています。
ドル・円の為替動向
海外株高を受けて、ドル・円がやや値を戻しています。
これらのニュースは、現在の市場動向や投資家心理を反映しています。
（出典：2025年04月08日の https://finance.yahoo.co.jp/ より）
生成AIにブラウザを操作させてみる（Cline）
同じことを Cline にやらせてみます。
私：
playwright で、Yahoo Japan Finance を開き、今日の主要なニュースを3つ抜粋して。日本語で出力して。
Cline：
取得したテキストから主要なニュースを3つ抜粋する必要があります。テキストにはいくつかのニュースが含まれているので、重要な情報を選び出して日本語で整理します。
不登校で母の2割離職、月5万の出費増も。不登校認めようの裏で
熊本地震から9年、あなたの防災力は?
日経平均は大幅反落、円高や米株価指数先物の影響
これらのニュースを日本語でまとめました。次に、結果を出力します。
Task Completed
Yahoo Japan Financeから取得した今日の主要なニュースは以下の通りです：
不登校で母の2割離職、月5万の出費増も。不登校認めようの裏で
熊本地震から9年、あなたの防災力は?
日経平均は大幅反落、円高や米株価指数先物の影響
Playwright MCP が Chromium を立ち上げてブラウザ操作する様子も確認できます。
（出典：2025年04月09日の https://finance.yahoo.co.jp/ より）
おわりに
Playwright は E2E テストツールでしたが MCP で生成AIとつなげることでブラウザ操作を AI に任せることが出来るようになるわけですね。システム開発の領域から一歩踏み出して、さまざまなユースケースで活用できるようになると思います。
今後もアップデートがあればお伝えします。