Claude × Playwright MCP ガイド 2026: AIに実際のブラウザを操作させる

Higgsfieldで動画、Notionで整理を扱ったので、今日は自動化だ。ClaudeにPlaywright MCPを繋ぐと、「このサイトを開いてログインし、この表を抜いて」でAIが実際のChromeを立ち上げ、自分でクリック・入力する。 Playwright公式サーバーで、インストールはコマンド一行。面白いのは、これがスクリーンショットを見る方式ではない点だ。以下で解く。

何ができるようになる?

Claudeが実際のブラウザ(Chromium・Firefox・WebKit)を操作する。

• ページを開いてクリック・入力・フォーム作成・送信
• 表・リストのデータ抽出(スクレイピング)
• E2Eテストの自動化(「ログイン→カート→決済まで通るか確認して」)
• 繰り返しのウェブ作業を言葉で指示

ビジョンモデル(画像認識)なしで動く。これが核心だ。

なぜ動くのか — スクリーンショットを見ない?

「AIが画面を見てクリックする」と聞くとスクリーンショットを思い浮かべる。Playwright MCPはアクセシビリティツリーのスナップショット方式だ。ピクセルではなくページ構造をテキストで読み、各要素に固有のref(参照)を付けて正確に掴む。

• 決定的(deterministic)な操作 — 「3番目のボタン」のような曖昧さなくrefで指定
• トークン効率 — スナップショット1回で約200〜400トークン(スクショ・DOMは数千)

この構造がなぜ強いかはMCPが標準になった背景と併せて見ると分かりやすい。

いつ使うか

向いている場面	向かない場面
繰り返しのフォーム・ログイン・データ抽出	アクセシビリティツリーに出ないUI(canvas等)
E2E・回帰テストの自動化	ピクセル単位の視覚確認(スクショで補助)
ウェブワークフローをチャットで	完全サーバーレス/クラウド専用環境

インストール方法

Claude Codeなら本当に一行だ。

claude mcp add playwright npx @playwright/mcp@latest

ユーザースコープに登録され、ローカルのstdioサブプロセスとして実行、デフォルトはheaded Chromiumだ。Claude Desktop・Cursor・VS Code・Windsurfなどのクライアントでも使える。

使い方

繋がったら、言葉で頼むだけ。

「このサイトを開いてログインフォームを埋めて送信して」 「このページから商品名・価格を表にして」 「登録→決済の流れがエラーなく通るかテストして」

Claudeがbrowser_snapshotでページ構造を受け取り、refで要素を掴んでクリック・入力する。これを業務全体へ広げる絵はAIツールを組み合わせる実践に続く。

特異点・限界(自分で確認)

主力ツールはbrowser_snapshot(アクセシビリティツリー)で、視覚確認が必要な時だけbrowser_screenshot(PNG)を使う。ローカル実行方式なのでブラウザがインストールされている必要があり、自分のPCで動く(クラウドではない)。アクセシビリティツリーに出にくい要素(canvas・特殊ウィジェット)は操作が難しい場合がある。

ノウハウ・コツ

基本はスナップショットにし、スクリーンショットは「目で確認」が要る時だけ最小限にするとトークンを節約できる。要素が紛らわしければrefを明示して指示すると誤作動が減る。繰り返しテストは流れを段階に分けて指示する方が安定する。

よくある質問

Q. AIはスクリーンショットを見てクリックする? いいえ。基本はアクセシビリティツリーのスナップショット(構造化テキスト)を読み、要素のrefで操作する。視覚確認が要る時だけスクショを別途使う。

Q. インストールは難しい? Claude Codeならclaude mcp add playwright npx @playwright/mcp@latestの一行だ。Claude Desktop・Cursorなど他のMCPクライアントも対応する。

Q. どのブラウザを使う? Chromium・Firefox・WebKitに対応し、デフォルトはheaded Chromium。実際のローカルブラウザとして動く。

Q. テスト自動化に使える? 使える。ログイン→決済のようなE2Eフローを言葉で指示して検証でき、決定的なref操作なので再現性が高い。