Claude CodeとPlaywright連携でブラウザ操作を自動化する設定手順

Claude CodeとPlaywright連携でブラウザ操作を自動化する2つの方式

方式は二つ。Playwright（ブラウザ操作の自動化ライブラリ）をMCPサーバー経由で呼ぶか、Claude in Chrome拡張機能を使うかです。CIで回すのか、ログイン済みサイトを目視で確認したいのかで選び分けます。

MCP経由とChrome拡張、それぞれが解決する課題

MCP（Model Context Protocol、Claudeに外部ツールを接続する仕組み）でPlaywright MCPサーバーを登録すると、ヘッドレスブラウザをスクリプトのように操作できます。再現性が高くCIと相性が良いのが強みです。登録の基礎はMCPサーバーの設定手順を参照してください。

Chrome拡張は実ブラウザを立ち上げ、既存のログイン状態を共有します。Google DocsやCRMなど認証済みアプリをそのまま触れる点が利点です。

どちらを選ぶか

テストをCIで自動実行したい、環境差を排したいならPlaywright MCP。ログイン後の画面確認やフォーム入力を目視で検証したいならChrome拡張です。

ただしChrome拡張は直接のAnthropicプラン（Pro／Max／Team／Enterprise）が前提で、Amazon BedrockやGoogle Cloud経由では使えません。Bedrockで動かす案件ではこの制約が効くため、MCP方式を軸に据えるのが無難です。

連携の設定手順と、運用中に見落としがちな落とし穴

手順は短く、つまずくのはたいてい接続確認と後始末の段階です。

登録から実行までの流れ

Playwright MCPサーバーをclaude mcp addで登録し、Claudeに「localhost:3000を開いてフォーム送信を試して」と依頼すれば操作が始まります。実行前に/mcpでサーバーの接続状態を確認しましょう。ローカルのPlaywright MCPサーバーでツールがセッションに公開されない不具合が報告されており、ツール一覧に出なければ設定を疑う起点になります。

再接続後にブラウザが残る既知の不具合

厄介なのがプロセスの残留です。/mcpで再接続した後、Playwright MCPサーバーが起動済みのブラウザプロセスを片付けず、日をまたいで蓄積していく症状がIssue #78551として報告されています。長時間セッションのあとはpsでchromiumの残プロセスを数え、不審なら手動で終了させてください。

その前提として、claude --versionで最新版かどうかを確認しておくこと。既知の症状なら更新だけで解消する場合があります。

本記事のコード・挙動に関する記述は、playwright 1.62.0 の実際のソースコードと照合して確認しています。