Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。
「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことが出来るものだと考えてください。
Playwright はブラウザを操作する E2E テストツールです。E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールというものでした。Playwright MCP が登場したことで、 生成AIがブラウザを操作することが出来るようになります。
※環境構築手順は 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 なので以下のように設定しています。
cline_mcp_settings.json
{
"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"
Playwright MCP サーバーを入れてください。
npm install -g @executeautomation/playwright-mcp-server
（追記：上記はコミュニティ版でした。Microsoft 公式版は以下です。）
npm install -g @playwright/mcp
VSCode に GitHub Copilot をいれます。バージョンは v1_99 以降にしてください。
VSCode の Agent モードを有効にします。
chat.agent.enabledを開き、チェックをいれて有効にします。
settings.json
{
"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 をエージェントモードに切り替えます。
右下の Ask を Agent に変更してください。
GitHub Copilot に日本語指示をして Playwrihgt MCP 経由でブラウザを操作させてみます。
私：
playwirhgt で、https://finance.yahoo.co.jp/ を開き、今日の主要なニュースを3つ抜粋して。日本語で出力して。
GitHub Copilot：
以下は、Yahoo!ファイナンスの今日の主要なニュースから抜粋した3つのトピックです：
日経平均VIは大幅に低下
株価の大幅上昇により、投資家の警戒感が一時的に和らいでいます。
東京エレクトロンのアナリスト評価
レーティングが強気に変更され、注目を集めています。
ドル・円の為替動向
海外株高を受けて、ドル・円がやや値を戻しています。
これらのニュースは、現在の市場動向や投資家心理を反映しています。
（出典：2025年04月08日の https://finance.yahoo.co.jp/ より）
Playwright は E2E テストツールでしたが MCP で生成AIとつなげることでブラウザ操作を AI に任せることが出来るようになるわけですね。システム開発の領域から一歩踏み出して、さまざまなユースケースで活用できるようになると思います。
今後もアップデートがあればお伝えします。
Be the first to comment
