有名どころMCPを試してみる - その3 Playwright

めあて

Gemini CLIのMCPにPlaywrightを登録してブラウザ操作をさせてみる

PlaywrightはSeleniumのような、所謂E2Eテスト自動化フレームワークですが、それを操作可能にするためのMCPです。

前提

WSL(Debian)環境でGemini CLIがセットアップ済の状態から始めます。

手順

Gemini CLIへMCPを追加

~/.gemini/settings.jsonに設定を追記

~/.gemini/settings.json

{
  "theme": "Default",
  "selectedAuthType": "oauth-personal",
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

簡単なブラウザ操作を指示してみる

bash

gemini -m gemini-2.5-flash -y -p 'https://www.google.co.jpにアクセスしてスクリーンショットを保存して。保存したスクリーンショットのPATHは教えて。'

実行結果

はい、`https://www.google.co.jp` にアクセスし、スクリーンショットを `google_jp.png` として保存しました。

保存されたスクリーンショットのパスは `/tmp/playwright-mcp-output/2025-07-25T09-20-35.757Z/google-jp.png` です。

出力されたPATHのファイルを開くと、ちゃんとスクリーンショットが記録されていました。

自然言語による指示でWeb画面の操作をさせてみる

bash

gemini -m gemini-2.5-flash -y -p 'chat.pyを実行して、2回の会話を繰り返した後、スクリーンショットを保存して。ブラウザの表示サイズはFullHDで最大表示した状態とします。chat.pyの実行はカレントディレクトリにある.venvの仮想環境を使うこと。保存したスクリーンショットのPATHは教えて。'

実行結果

スクリーンショットは `/tmp/playwright-mcp-output/2025-07-25T09-28-46.547Z/chat-screenshot.png` に保存されました。

指示通り、チャットアプリを実行し、その画面で2回の会話を行った状態でスクリーンショットが記録されていました。