Playwright MCPでE2Eテストを自動化してみた
はじめに
こんにちは、DIVXの主税です。現在、開発案件でプロジェクト管理を担当しています。
プロジェクト管理の仕事は多岐にわたりますが、その中でも動作確認はデリバリーの品質を左右する重要な業務です。
しかし、重要だからこそ丁寧にやりたいのに、時間が足りない。特に以下のような確認作業に時間を取られていました。
- レスポンシブ対応の確認：PC・タブレット・スマートフォンそれぞれで画面を開いてスクリーンショットを撮る
- 異常系の確認：バリデーションエラーやタイムアウトなど、意図的にエラーになる状況を作って挙動を確認する
- 画面遷移の確認：複数画面を順番に遷移するか確認する
そんな中で出会ったのが Playwright MCP でした。そもそもUI/UXの確認はテストコードで自動化しにくい領域でしたが、Claude Codeと組み合わせることで、自然言語の指示だけでブラウザ操作を自動化できます。
DIVXでは2023年3月からAI活用を義務化しており、今回のPlaywright MCPもその延長線上にあります。
本記事では、その活用体験を共有します。
Playwright MCP × Claude Codeとは
Playwright MCPの概要
Playwright MCPは、Microsoftが公式に提供するMCPサーバーです。Playwrightというブラウザ自動操作ライブラリを、MCP（Model Context Protocol）を通じてClaude Codeなどの自律型コーディングツールから利用できるようにしたものです。
Playwright MCPについては以下のGitHubが参考になります。
https://github.com/microsoft/playwright-mcp
なぜMCPで課題が解決できるのか
Playwright MCPを使うと、テストコードを書かなくても、自然言語で指示するだけでブラウザ操作ができます。
従来はHTMLの構造を把握してセレクタ（#nameやbutton[type="submit"]など）を指定する必要がありました。Playwright MCPでは、AIがアクセシビリティツリーを通じて「送信ボタン」などの自然言語から適切な要素を特定してくれます。セレクタを意識する必要がなく、UIが多少変わっても動作します。
公式READMEでは、以下の特徴が挙げられています。
- 高速かつ軽量：Playwrightのアクセシビリティツリーを使用
- LLMフレンドリー：構造化データのみで動作
- 決定論的な操作：曖昧さを回避
Claude Codeとの技術的な連携
Claude Codeは、Anthropicが提供する自律型コーディングツールです。ターミナル上で動作し、コードの理解・生成・実行を自律的に行います。
Claude CodeとPlaywright MCPの連携は、以下の流れで動作します。
[ユーザー]
↓ 自然言語で指示
[Claude Code]
↓ MCPプロトコルでツール呼び出し
[Playwright MCP Server]
↓ ブラウザ操作を実行
[ブラウザ]
↓ アクセシビリティツリーのスナップショットを返却
[Claude Code]
↓ 結果を解釈して次のアクションを判断
[ユーザー]設定は、Claude Codeの設定ファイルに以下を追加するだけです。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}この2つを組み合わせることで、AIに自然言語で指示するだけでブラウザ操作を自動化できるようになります。
AIの判断プロセス
Playwright MCPの動きは、まさに自律的な自動化そのものです。単に指示を実行するだけでなく、AIが自律的に判断しながらテストを進めてくれます。
具体的な動作フロー
たとえば「このブランチの実装内容をもとにテストを実行して」と指示した場合、以下のような流れで動作します。
1. 実装内容の自動理解
Claudeはまず、ブランチの変更内容を把握します。
git log/git diffで変更ファイルを確認- 設計書やREADMEがあれば読み込み
- 関連するコンポーネントのソースコードを解析
2. テストプランの自動生成
実装内容を理解した上で、テストシナリオを自動で作成します。
# | シナリオ | 期待結果 |
|---|---|---|
1 | ボタンが表示される | 有効状態で表示 |
2 | ボタンをクリック | API呼び出しが実行される |
3 | 成功時 | 完了メッセージが表示 |
3. アクセシビリティツリーによる要素特定
ブラウザ操作時、Playwright MCPはアクセシビリティツリーのスナップショットを取得します。各要素には参照ID（ref）が付与され、これを使って決定論的に操作します。
playwright - Click (element: "送信ボタン", ref: "e377")ref: "e377" は、アクセシビリティツリー上の要素参照です。セレクタの曖昧さなく、確実に目的の要素を操作できます。
4. エラー時の自動リカバリ
テスト実行中にエラーが発生した場合も、Claudeが自動で対処を試みます。たとえば、ブラウザセッションが競合した場合、既存プロセスを終了して新しいセッションで再実行するといった判断を自律的に行います。
5. テスト結果レポートの自動生成
すべてのテストが完了すると、結果をまとめたレポートを出力します。
# | テストシナリオ | 結果 | 詳細 |
|---|---|---|---|
1 | ボタン表示 | ✅ 成功 | 正しく表示 |
2 | クリック動作 | ✅ 成功 | API呼び出し確認 |
3 | 成功メッセージ | ✅ 成功 | トースト表示 |
E2Eテストの時間短縮に貢献した機能
レスポンシブ確認
以前は、PC・タブレット・スマートフォンの3サイズで画面を確認するために、デベロッパーツールでサイズを切り替えながらスクリーンショットを撮っていました。
Playwright MCPでは、こう指示するだけです。
PC・タブレット・スマートフォンの3サイズで表示を確認してくださいAIが自動で画面サイズを切り替え、レイアウト崩れがあれば指摘してくれます。
エラー時の分析・報告
異常系のテストは、エラーが発生する状況を作ること自体に手間がかかります。バリデーションエラーを出すために不正な値を入力したり、タイムアウトを発生させるために接続を遮断したり。
Playwright MCPは、エラーが発生した場合に原因を言語化してくれます。
- 「ボタンが見つかりません」
- 「タイムアウトしました」
- 「期待した画面に遷移しませんでした」
何が起きたのかを自分で調査する手間が省け、確実な時間短縮につながります。
また、スクリーンショットの取得と保管場所を指定すれば、それぞれのスクリーンショットを取得、保存まで自律して実行されます。
手動確認との使い分け
Playwright MCPは便利ですが、完全に任せきりにはしていません。
基本的なフォーム入力・送信、レスポンシブ表示、エラーシナリオ、画面遷移の網羅的なチェックはAIに任せ、テスト結果の妥当性確認や複雑な条件分岐の検証は人間が行う。この使い分けが、限られた時間の中で品質を担保するポイントだと感じています。
まとめ
Playwright MCPとClaude Codeを組み合わせることで、自然言語で指示するだけでE2Eテストを自動化できるようになりました。テストコードを書く必要がなく、AIが自律的に判断して実行してくれます。
現在では開発メンバーのレビュープロセスにも組み込まれ、「考慮漏れ」や「手戻り」をチーム全体で抑えることができています。E2Eテストに課題を感じている方は、ぜひ一度試してみてください。
