Claude Code + Playwright MCP の組み合わせによって、これまで人間が行っていた手動のブラウザ操作が、LLM（大規模言語モデル）によって自動化できるようになった。この記事では、仕組み・設定・使い方・できること・従来との差などを解説
Claude Code で、手動テストを走らせた結果
はじめに：何が変わったのか？
従来、Playwright を使った自動テストには、明示的なコード（TypeScriptやPythonなど）によるシナリオ記述が必要でした。しかし Claude Code と MCP を組み合わせることで、「自然言語でテスト指示」＋「自動ブラウザ操作」が可能になりました。
つまり、テストコードを書くことなく、以下のようなことができるようになります。
- 指定したURLにアクセス
- ログインフォームに入力
- レスポンシブ状態の確認
- コンソールエラーの検出
- ドロップダウンやボタン操作
しかもこれらを「手動テストして」と一言伝えるだけで済むのです。
MCPとは何か？
MCP（Model Context Protocol）は、LLMと外部ツール（PlaywrightやChromeなど）をつなぐためのプロトコルです。
Playwright MCP はその一種で、以下の特徴があります
| 特徴 | 内容 |
|---|---|
| 軽量・高速 | スクリーンショット不要、アクセシビリティスナップショットを使用 |
| LLMフレンドリー | DOM構造ベースで操作、視覚モデル不要 |
| 決定論的 | 画面サイズやUI変更に強い |
| 柔軟性 | Chrome / Firefox / WebKit に対応、端末エミュレーション可能 |
設定方法
最も簡単な .mcp.json 設定は以下の通りです。
Claude Code や Cursor ではこの設定ファイルを認識し、自動で MCP サーバーを起動します。
どこまでできる？（代表的な操作一覧）
| 操作名 | 内容 | 自動化対象 |
|---|---|---|
browser_click | ボタン・リンククリック | ✅ |
browser_type | 入力フォームへのテキスト入力 | ✅ |
browser_select_option | セレクトボックスの選択 | ✅ |
browser_snapshot | アクセシビリティスナップショット取得 | ✅ |
browser_console_messages | コンソールログ取得 | ✅ |
browser_resize | ビューポートサイズ変更 | ✅ |
browser_file_upload | ファイルアップロード | ✅ |
browser_generate_playwright_test | テストコードの生成（参考用） | ✅ |
これらは Claude に「このURLで手動テストして」と言うだけで実行されます。
自動テストとの違い
| 項目 | Playwright Test | Claude + MCP |
|---|---|---|
| 操作対象 | 事前に定義したコード | 自然言語で都度指示 |
| ユースケース | 継続的テスト | 一時的な動作確認、非エンジニアのQA |
| 保守性 | 高い（再利用性あり） | 低いが柔軟で即席対応向き |
| 導入コスト | やや高い（テスト実装が必要） | 低い（設定と指示だけ） |
よく使うオプション一覧
まとめ
Claude Code + Playwright MCP により、Webの手動テストはまったく新しいフェーズに入りました。
- コード不要でテスト操作が可能
- コンソールやネットワークまで確認できる
- モバイル環境での再現も簡単
- 短期的な動作チェックや QA に最適
テストコードを書くほどでもないけど確認したい。そのニーズを Claude が自然言語で満たしてくれるのはまさに「革命」です。
これからの手動テストは、「書く」ではなく「伝える」時代です。
