はじめに
この記事は自身のブログ記事の内容を元にAIで生成し、加筆・修正してます。
Playwright v1.56で追加された Playwright Test Agents を実際に試してみたので記事にまとめてみました！
Playwright Test Agentsでは、AIがテスト計画の立案からコード生成、さらにUI変更で壊れたテストの自動修正まで行ってくれます。
この記事では、3つのAIエージェント（Planner、Generator、Healer）の基本的な使い方と実際にデモとして実行してみた内容を紹介します。
各エージェントについて
Playwright Test Agentsは、それぞれ異なる役割を持つ3つのエージェントで構成されています。
Planner（プランナー）
- 役割: アプリケーションを分析してテスト計画書を作成
-
出力:
specs/ディレクトリにMarkdown形式のテスト計画
Generator（ジェネレーター）
- 役割: テスト計画からPlaywrightのテストコードを生成
- 特徴: 実際にサイトを操作しながら、セレクターやアサーションの妥当性を確認
-
出力:
tests/ディレクトリに実行可能なテストファイル
Healer（ヒーラー）
- 役割: 失敗したテストを自動で修正
- 特徴: エラーステップを調査し、UI変更に対応した要素やフローを見つけて修正
セットアップ
事前準備
- claude code
- Node.js
- Playwright
今回はデモとして、「Takeshi Kishi」さんが提供するテスト用デモサイトを利用させて頂きます。
セットアップコマンド
Claude Code用にセットアップ
npx playwright init-agents --loop=claude
初期のセットアップが完了すると以下のファイルとディレクトリが作成されます。
repo
├── .claude/agents
│ ├── playwright-test-generator.md
│ ├── playwright-test-healer.md
│ └── playwright-test-planner.md
├── .mcp.json
└── seed.spec.ts
次にClaude Codeを起動していきます。
claude
playwrightが入ってない場合はインストールするか聞かれるので「y」で進みます。
Need to install the following packages:
playwright@1.56.0
Ok to proceed? (y)
もし以下のようにMCPサーバーの使用について聞かれた場合は、適切なオプションを選択します。今回はデモなので「1」で進みます。
╭──────────────────────────────────────────────────────────────────────────────╮
│ │
│ New MCP server found in .mcp.json: playwright-test │
│ │
│ MCP servers may execute code or access system resources. All tool calls │
│ require approval. Learn more in the MCP documentation │
│ (https://docs.claude.com/s/claude-code-mcp). │
│ │
│ ❯ 1. Use this and all future MCP servers in this project │
│ 2. Use this MCP server │
│ 3. Continue without using this MCP server │
│ │
╰──────────────────────────────────────────────────────────────────────────────╯
Enter to confirm · Esc to reject
実際の使い方
ステップ1: テスト計画を作成
@planner
宿泊予約のテスト計画を作成してください。
Plannerがディレクトリ構成を解析し、テスト計画を自動で作成してくれます。
実際に作成されたテスト計画の内容： ※全文は多いので抜粋
# 1. アプリケーション概要
## 1.1 対象システム
## 1.2 主な機能
## 1.3 利用可能な宿泊プラン
# 2. テストシナリオ
## シナリオ 1: 正常系 - 基本的な予約フロー（連絡希望しない）
## シナリオ 8: バリデーション - 氏名未入力エラー
## シナリオ 26: 境界値テスト - 日付ピッカーの最小値（翌日）
## シナリオ 28: UI/UX - 連絡方法変更時の動的項目表示（希望しない→メール）
## シナリオ 37: 多言語対応 - 英語版ページの基本動作
## シナリオ 40: 複雑な料金計算 - 土日を含む3泊4日の予約
## シナリオ 41: 異常系 - 無効なプランIDでのアクセス
## シナリオ 44: プラン別制約 - カップル限定プラン（人数固定）
## シナリオ 47: セッションストレージ - 予約データの保存
## シナリオ 48: Cookie - トランザクションIDの保存
## シナリオ 49: アクセシビリティ - フォームラベルとフィールドの関連付け
# 3. テスト実行環境
## 3.1 推奨ブラウザ
## 3.2 サーバー起動方法
## 3.3 テストデータ
# 4. テスト優先度の定義
# 5. テスト実行時の注意事項
# 6. 既知の制約事項
# 7. テスト完了基準
# 8. 不具合報告時の記載事項
# 9. テスト計画の更新履歴
# 10. 参考情報
## 10.1 ファイル構成
## 10.2 関連ドキュメント
正常系・異常系だけでなく、バリデーション、境界値、アクセシビリティなどの観点まで盛り込まれたテスト計画がMarkdown形式のファイルで生成されます。
ステップ2: テストコードを生成
@generator
hotel-reservation-test-plan.mdからPlaywrightテストを生成してください。
Generatorが「テストコード作成 → 実行 → 結果確認 → 修正」を繰り返しながら、動作するテストコードを作成してくれます。
早速、作成されたテストを実行してみます。
プロジェクトのビルド（初回のみ）
npm run build
全テスト実行
npx playwright test
テスト結果をみるとfirefoxとwebkitでエラーになってるようです。
ステップ3: 失敗したテストを修正
先程失敗したテストケースを修正してもらいます。
@healer
"firefox"と"webkit"のブラウザのテストが失敗しました。修正してください。
Healerがテストを実行しながら自動的に修正し、全てのテストが通るようになりました。
メリット
- 開発スピードの向上: テストコード作成時間の大幅な短縮
- メンテナンスの効率化: UI変更時の自動修正
- テストの網羅性向上: 見落としがちなテストケースの提案
- チーム共有の容易さ: Markdown形式のテスト計画
- 柔軟な使い方: 必要なエージェントのみの利用が可能
使用時のコツ
- シードテストをしっかり作成: Plannerの理解度が向上します
- テスト計画をレビュー: Generatorで生成する前にチームで確認
- 小さく始める: 一部の機能から試して徐々に範囲を拡大
-
定期的なアップデート:
npx playwright init-agentsで最新機能を取得 - 最終判断は人間が: AIは相棒として活用
注意点
- まだ新しい機能のため、本番前の検証が必要
- リソース消費が大きいため、マシンスペックとコストに注意
- セキュリティ: 本番環境の認証情報は渡さない
まとめ
Playwright Test Agentsを実際に使ってみて、テスト作成から実行、自動修正までやってくれて、テストにかけるコストを削減できそうな気がします。
まずは小さい改善から試してみることをおすすめします。