ジェネラティブエージェンツの大嶋です。
「AIエージェントキャッチアップ #58 – Playwright Test Agents」という勉強会を開催しました。
generative-agents.connpass.com
アーカイブ動画はこちらです。
Playwright Test Agents
今回は、Playwrightに導入されたエージェント機能「Playwright Test Agents」をキャッチアップしました。
Playwright Test Agentsの公式ドキュメントはこちらです。
今回のポイント
Playwright Test Agentsとは
PlaywrightのTest Agentsは、AIエージェントを活用して、Playwrightのテストコードを生成するための機能です。
具体的には、Claude CodeやOpenCodeといったコーディングエージェントに対して、MCPやサブエージェントの設定を提供します。
3つのサブエージェントの役割
Playwright Test Agentsは、3つのサブエージェント（Planner、Generator、Healer）を提供します。
- Planner：アプリケーションを探索してテスト計画を作成するエージェント
- Generator：Plannerが作成したテスト計画をもとに、実際のPlaywrightテストコードを生成するエージェント
- Healer：テストコードを実行し、失敗したテストを自動的に修正するエージェント
Claude Codeでの使い方
Playwright Test AgentsをClaude Codeで使う場合、以下のコマンドを実行します。
npx playwright init-agents --loop=claude
すると、.mcp.jsonや.claude/agents/以下のサブエージェントの設定が作成されます。
この状態でClaude Codeに「Playwrightのテストコードを実装して」などと依頼すると、Playwright Test Agentsが提供するエージェントを使い、テストコードを生成してくれます。
テストコードの実装の様子
テストコードの実装は、サブエージェントがPlaywright MCPでブラウザを操作しながら、その動作をPlaywrightのテストコードとして出力するような流れとなります。
実際に試したところ、すべてのテストコードがパスするまでHealerエージェントがテストコードを修正してくれました。
指示を出してからテストコードがすべてパスするまで、Claude Codeが20分以上も作業を続けてくれました。
サブエージェントとの役割分担により、メインのエージェントが長期的に次は何をすべきかを見失わずに作業できたのだと思います。
テストコード生成というアプローチのメリット
AIエージェントにPlaywright MCPを使わせてE2Eテストを実施させる方法では、E2Eテストの再現性・コスト・実行時間といった課題があります。
その点、テストコードを生成するアプローチであれば、一度完成したテストコードは何度でも気軽に実行できるといったメリットがあります。
今回はいわゆるTODOアプリ程度のテストコードを生成してみましたが、より本格的なアプリケーションに対してどの程度テストを生成できるのか気になるところです。
次回のご案内
以上、今回は「Playwright Test Agents」をキャッチアップしました。
次回は「AIエージェントキャッチアップ #59 – W&B Weave」ということで、LLMアプリケーションのトレースや評価の機能を持つ「W&B Weave」がテーマです！
generative-agents.connpass.com
ご興味・お時間ある方はぜひご参加ください！
また、その次の回以降のテーマも募集しているので、気になるエージェントのOSSなどあれば教えてください！
