Claude Codeに、
「実際にブラウザを使う力」を。
Playwright MCPを使うとClaude CodeはWebページを開き、 ボタンをクリックし、フォームへ入力し、ログインし、 実装した機能が本当に動くかまで確認できます。 AI開発を「コード生成」から「実動作の検証」へ広げるブラウザ自動化基盤です。
Playwright MCPはブラウザを操作できるため、Claude Codeによる実装後の動作確認まで1つの開発ループへつなげられます。
Playwright MCPとは？
Playwright MCPは、MicrosoftのPlaywrightをModel Context Protocol経由でAIエージェントから利用できるようにするMCPサーバーです。
Claude Code、VS Code、Cursor、WindsurfなどのMCPクライアントから利用できます。
特徴的なのは、ページ操作の中心にアクセシビリティツリーの構造化スナップショットを使うことです。
つまりAIは、スクリーンショットの座標を推測してクリックするのではなく、ページの要素を構造として理解します。
- heading "ログイン" [level=1]
- textbox "メールアドレス" [ref=e5]
- textbox "パスワード" [ref=e7]
- button "ログイン" [ref=e9]Claude Codeはこのrefを使って、対象要素へ入力・クリックなどの操作を行います。
画像認識に頼らず、要素名や役割を使って操作できるため、ブラウザ自動化をより決定的に行えるのがPlaywright MCPの特徴です。
Playwright MCPでできること
URLを開く、戻る、タブを切り替えるなどのブラウザ操作。
ボタン、リンク、フォーム、チェックボックスなどを操作します。
問い合わせ・ログイン・登録画面などのE2E確認に使えます。
ページ全体や特定要素のスクリーンショットを取得できます。
ログイン状態やブラウザストレージを保持しながら操作できます。
高度な設定ではネットワークモックなども利用できます。
Claude CodeにPlaywright MCPを入れる
Microsoft公式ドキュメントでは、Claude Code向けに次のコマンドが案内されています。
claude mcp add playwright npx @playwright/mcp@latest標準的なMCP設定では次のようになります。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}現在の公式ドキュメントではNode.js 20以上が前提として案内されています。
初回利用時には必要なブラウザが自動でダウンロードされます。
まず動作確認してみる
接続後はClaude Codeへ自然言語で指示できます。
> http://localhost:3000 を開いてください。
> ログイン画面へ移動してください。
> テストユーザーでログインしてください。
> ダッシュボードが表示されることを確認してください。Playwright MCPはブラウザを開き、ページ構造を取得し、必要な要素を探して順番に操作します。
AI開発のE2Eループを作る
機能追加やバグ修正を行います。
Lint、型チェック、ユニットテストなどを実行。
実際のブラウザを開いてユーザー操作を再現します。
表示・フォーム・遷移などに問題がないか確認します。
問題があれば原因を調査して再実装します。
これまで人間が行っていた「ブラウザを開いて確認する」工程までAIへ渡せるため、AI開発の自動化範囲が一段広がります。
Vercel Previewとの相性がかなり良い
前回紹介したVercel MCPとPlaywright MCPを組み合わせると、Preview環境での自動QAが可能になります。
コードを修正してGitへ反映。
Preview Deploymentを生成。
Preview URLを開いてE2E操作。
不具合があればコードを再修正。
例えばフォームを自動QAする
問い合わせフォームや申込フォームなら、次のような指示ができます。
> Preview URLを開いてください。
> 問い合わせフォームへ移動してください。
> 必須項目をテストデータで入力してください。
> 送信してください。
> 完了メッセージが表示されることを確認してください。
> 問題があれば原因を調査してください。AIが「ページが開く」だけでなく、実際のユーザー操作まで確認できるのが大きな違いです。
ログインが必要なサイトも扱える？
Playwright MCPはブラウザセッションを保持できるため、ログイン状態やCookieを継続して利用できます。
デフォルトではセッション間でもログイン状態を保持できる設計になっています。
また、Storage Stateを使って認証状態を保存・再利用する構成も可能です。
自動操作では誤クリックや意図しない変更の可能性もあるため、Preview環境やテストユーザーを分離した運用がおすすめです。
画面を表示せずに実行することもできる
Playwright MCPはデフォルトではheaded modeでブラウザが表示されます。
ブラウザを表示せず実行する場合は--headlessを利用できます。
npx @playwright/mcp@latest --headlessCIや継続的なQAではheadless運用が便利です。
複数ブラウザにも対応
Playwright MCPは、Chrome系だけでなく複数のブラウザエンジンを扱えます。
Chrome系ブラウザで動作確認。
Firefox固有の問題を確認できます。
Safari系エンジンに近い環境で確認。
Microsoft Edgeでの確認にも対応。
スクリーンショットも取得できる
Playwright MCPにはスクリーンショット機能もあります。
ただしMicrosoft公式では、ブラウザ操作そのものについてはスクリーンショットではなく、アクセシビリティスナップショットを利用する設計になっています。
スクリーンショットは、視覚的な最終確認や証跡を残す用途に向いています。
Playwright MCPとPlaywright CLIはどっちがいい？
ここは2026年時点でかなり重要です。
MicrosoftのPlaywright公式ドキュメントでは、MCPに加えてPlaywright CLI + Skillsという方法も案内しています。
ブラウザ状態を維持しながら探索・操作を繰り返す用途に向いています。 構造化スナップショットや豊富なツールを使った高度なブラウザ操作が得意です。
大規模コードベースと同時に扱うコーディングエージェントでは、 MCPよりコンテキスト消費を抑えやすく、高スループットな用途に向いています。
Playwright公式自身が、コーディングエージェントではCLI + Skillsの方がトークン効率に優れるケースがあると説明しています。 一方、ブラウザ状態を保ちながら長く操作するエージェントループではMCPが強みを持ちます。
自動ブラウザ操作で注意すること
本当に「クリックできる」ということ。
管理画面や本番サービスで利用する場合は、 テスト環境・権限・アカウントを明確に分ける必要があります。
本番ではなくQA・Preview環境から始める。
本番ユーザーの資格情報を使わない。
削除・決済・公開などは自動化範囲を慎重に設定する。
成功表示だけでなくDBやログなども確認する。
Vercel・Supabaseと組み合わせる
これまで紹介したMCPと組み合わせると、Web開発のほぼ全工程をAIへ接続できます。
DB・Auth・ログ・Edge Functionsを確認。
コードを実装・修正。
Preview Deploymentやログを確認。
実ブラウザでユーザー操作を再現。
失敗した場合は原因を特定し再修正。
Playwright MCPでAI開発はどう変わる？
AI自身が「使って確認する」。
ブラウザ操作までエージェントへ接続されることで、 AI開発はコード生成からQA・回帰テストまで含む工程へ広がります。
これまでAIコーディングで最後に残っていた大きな工程のひとつが、人間による画面確認でした。
Playwright MCPを組み合わせれば、
実装 → デプロイ → ログイン → 操作 → 検証 → 修正 → 再テスト
というループまでAI中心で構築できます。
コード生成だけを速くしても、確認工程を人間がすべて担当すれば開発速度には限界があります。 ブラウザテストまでAIへ接続することで、本当の意味で開発サイクル全体を短縮できるようになります。
関連記事
出典：Microsoft Playwright公式「Playwright MCP」「Installation」「Playwright MCP Server」ほか。機能・設定方法は記事執筆時点の情報です。
