Zenn
🐡

Playwright MCPを使ってAIにブラウザ操作をさせてみる

に公開
AI
アクセシビリティ
Playwright
Model Context Protocol
tech

はじめに

2025年3月29日に Playwright MCP が発表されてから、開発者コミュニティで大きな注目を集めています。「MCP」は「Model Context Protocol」の略で、生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことができるものです。

Playwright はブラウザを操作する E2E テストツールです。これまでは、E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールでした。Playwright MCP が登場したことで、生成AIがブラウザを操作することが可能になりました。

環境準備

環境構築手順 A

  1. コードエディタに拡張機能をインストールします。モデルはお好みのAIサービスを選択してください。APIエンドポイントとAPIキーで設定が完了するので手頃で簡単です。

  2. 次に、MCP Servers で Playwright MCP をインストールします。

npm @playwright/mcp install -g
  1. MCP Serversの設定をします。

※Windows + WSL2 Ubuntu 環境の場合は以下のように設定します：

{
  "mcpServers": {
    "playwright": {
      "disabled": false,
      "timeout": 60,
      "command": "wsl",
      "args": [
        "bash",
        "-ic",
        "node /home/ユーザー名/.nvm/versions/node/v22.14.0/lib/node_modules/@playwright/mcp-server/dist/index.js"
      ],
      "transportType": "stdio"
    }
  }
}

（以下のように記載するとよりシンプルに書けます）

"source ~/.nvm/nvm.sh && npx -y @playwright/mcp-server"

環境構築手順 B

  1. Playwright MCP サーバーをインストールします。
npm @playwright/mcp install -g

  1. コードエディタにAI拡張機能をインストールします。エディタのバージョンはv1_99以降である必要があります。

  2. 設定を開き、chat.agent.enabledにチェックを入れてエージェントモードを有効にします。

  3. settings.jsonを設定します：

{
  "mcp": {
    "inputs": [],
    "servers": {
      "playwright": {
        "command": "wsl",
        "args": [
          "bash",
          "-ic",
          "node /home/ユーザー名/.nvm/versions/node/v22.14.0/lib/node_modules/@playwright/mcp-server/dist/index.js"
        ]
      }
    }
  },
  "chat.agent.enabled": true
}

  1. 「Start」をクリックしてMCPを起動します。正しく動作すると「Running」と表示されます。

  2. AIアシスタントをエージェントモードに切り替えます。

生成AIにブラウザを操作させてみる

実行例1:

財務ニュースサイトを開き、今日の主要なニュース3つを日本語で抜粋するよう指示した場合：

以下は、今日の主要な財務ニュースから抜粋した3つのトピックです：

1. 日経平均VIは大幅に低下
株価の大幅上昇により、投資家の警戒感が一時的に和らいでいます。

2. 電子機器メーカーのアナリスト評価
レーティングが強気に変更され、注目を集めています。

3. ドル・円の為替動向
海外株高を受けて、ドル・円がやや値を戻しています。

これらのニュースは、現在の市場動向や投資家心理を反映しています。

実行例2:

別のAIツールで同様の指示を実行した場合：

財務サイトから取得した今日の主要なニュースは以下の通りです：

1. 不登校で母の2割離職、月5万の出費増も。不登校認めようの裏で
2. 熊本地震から9年、あなたの防災力は?
3. 日経平均は大幅反落、円高や米株価指数先物の影響

実行中に、Playwright MCPがChromiumブラウザを立ち上げてブラウザ操作する様子を確認できます。

おわりに

Playwright はもともとE2E テストツールでしたが、MCPを通じて生成AIと連携することで、ブラウザ操作をAIに任せることができるようになりました。これにより、システム開発の領域を超えて、さまざまなユースケースで活用できる可能性が広がります。

今後のアップデートについても情報を共有していきます。

Discussion