こんにちは、とまだです。
Claude Codeで開発していて、毎回手動でブラウザ確認するのが面倒だと感じたことはありませんか？
フォームの動作確認や、ボタンクリックのテスト、レスポンシブデザインのチェック。
AIがコードを書いてくれても、結局最後は自分の目で確認しなきゃいけないですよね。
今回は、Microsoft公式のPlaywright MCPを使って、自然言語で指示するだけでE2Eテストを完全自動化する方法を紹介します。
（追記：Chrome DevTools MCPとの違いも解説しました！）
忙しい人のために要約
- Playwright MCPで自然言語の指示だけでブラウザ操作が可能
- 「フォームに入力して送信ボタンを押して」と言うだけでテスト実行
- スクリーンショット取得やレスポンシブ確認も対話で完結
- npmコマンド1つで導入、テストコードを書く必要なし
実際に動いている様子を見るとイメージを掴みやすいです！
Playwright MCPとは？
Playwright MCPは、Microsoftが公式提供するModel Context Protocol（MCP）サーバーです。
MCPは、Claude Codeなどの大規模言語モデル（LLM）が外部ツールと連携するためのプロトコルです。
これにより、AIに日本語で指示するだけでブラウザを操作できるようになります。
なお、Playwright 自体は MCP 専門というわけではなく、主にWebサイト・アプリの E2E テストで使われているライブラリです。
最大の特徴：コード不要
従来のE2Eテストツールとの決定的な違いは、テストコードを一切書く必要がないということです。
例えば、Todoアプリのテストなら、こんな感じで指示するだけです。
タスクを3つ追加して、
2つ目を編集して、
1つ目を削除する動作を確認してください
これだけで、AIが自動的にブラウザを操作し、結果を報告してくれます。
技術的な仕組み
Playwright MCPは、ブラウザのアクセシビリティツリーを利用します。
スクリーンショットや画像認識に頼らず、HTMLの構造化データを直接操作するため、高速で確実な動作が可能です。
Playwright MCP を使うメリット
ここでは、メリットについて説明しましょう。
従来の開発フローで困ること
Claude Codeで開発していると、コード生成は爆速になりました。
でも、こんな作業は相変わらず手動でやってませんか？
- 「今作った画面を確認して」→ 自分でブラウザを開く
- 「フォームの動作を確認して」→ 自分で入力してテスト
- 「スマホ表示を確認して」→ デベロッパーツールで切り替え
これらがボトルネックになって、せっかくのAI駆動開発のスピードが活かせていないですよね。
Playwright MCPで変わること
動作確認がすべて自然言語の指示で完結します。
「今作ったアプリの画面を確認して」
AIがブラウザを起動し、スクリーンショットを撮って報告してくれますし、Playwright 自身がチェックもしてくれます。
また、フォーム入力など「操作」も可能です。
「ログインフォームに適当な値を入れて動作確認して」
AIが自動で入力し、送信ボタンをクリックして結果を報告してくれます。
他にも、レスポンシブ対応もチェックできます。
「スマホサイズで表示を確認して」
AIが画面サイズを変更し、レイアウトの崩れがないか確認をしてくれます。
デザイナ観点で見てくれるので、自分では気付けない UI 崩れにもちゃんと気付いてくれます。
実際の使用例
1. 画面のスクリーンショット取得
AI に開発を任せると、一気に機能を作り上げることも多いかもしれません。
そんなときは、一通りの機能をチェックしてもらいます。
「今作ったアプリの画面を一通り確認して」
と指示するだけで、AIが以下を実行します。
- ブラウザを起動
- 指定されたURLにアクセス
- スクリーンショットを撮影
- 「こんな感じで表示されてますよ」と報告
表示の崩れやエラーがあれば、その内容も含めて教えてくれます。
2. フォームの動作確認
実際に機能がちゃんと動作していることもチェックしてもらえます。
「ユーザー登録フォームの動作を確認して。
メールアドレスとパスワードを入力して、
登録ボタンを押してみて」
こで AIが自動的に以下を実行します。
- フォームの各フィールドを認識
- 適切なテストデータを入力
- 送信ボタンをクリック
- 結果画面を確認して報告
エラーメッセージが表示された場合は、その内容も含めて報告してくれます。
3. レスポンシブデザインの確認
「PC、タブレット、スマホの3サイズで表示を確認してください」
AIが画面サイズを切り替えながら、それぞれのスクリーンショットを取得。
レイアウトの崩れがないか確認して報告します。
導入方法
インストール（1コマンドで完了）
Claude Code の場合は、以下の設定に追加するだけです。
claude mcp add playwright npx @playwright/mcp@latest
これだけで準備完了。テスト環境の構築やコードの記述は一切不要です。
なお、Cursor や Codex など他の環境での設定は公式サイトに詳しく書かれてます。
よくある質問
Q: 既存のPlaywrightのテストコードは？
A: 必要ありません。自然言語で指示するだけで、AIが適切な操作を実行します。
Q: 特定の要素を指定したい場合は？
A: 「送信ボタンをクリックして」「メールアドレス欄に入力して」など、日本語で指定できます。
Q: エラーが起きたらどうなる？
A: AIがエラーの内容を分析し、「ボタンが見つかりません」「タイムアウトしました」など、分かりやすく報告します。
導入効果の実例
私は個人開発と実際の現場、両方で Playwright MCP をフル活用しています。
特に新機能追加時の動作確認が劇的に楽になりました。
Before（手動確認）
- ブラウザを開く
- URLを入力
- 各機能を手動で操作
- デベロッパーツールでレスポンシブ確認
- 所要時間：10〜15分
- 途中でエラーが発生してたら、修正して最初からまた確認
After（Playwright MCP）
- 「動作確認して」と指示
- AIが自動で全て実行
- 所要時間：2~3 分
しかも、手動では見落としがちな細かいバグも、AIが網羅的にチェックしてくれます。
また、予め「期待する動き」を簡単にテキストでまとめておいて、それの通りにチェックしてもらうのもおすすめです。
まとめ
Playwright MCPは、E2Eテストの概念を変える画期的なツールです。
テストコードを書く必要がなく、自然言語で指示するだけで、ブラウザ操作を伴うテストが実行できます。
Claude Codeと組み合わせることで、コード生成からテストまで、すべてAIと対話するだけで完結します。
設定も簡単で、一度セットアップすれば今後のすべてのプロジェクトで使い回せます。
手動テストに時間を取られている方は、ぜひ導入してみてください！
再掲となりますが、実際の使い方については YouTube動画で詳しく解説しています。
画面を見ながら学びたい方は、ぜひご覧ください。
他にもClaude CodeやMCP活用、Codex など最新の AI 開発ツールに関する動画を公開してます！
本記事が参考になりましたら「いいね」と、良ければ Youtube のチャンネル登録で応援をよろしくお願いします！