はじめに
この記事は、Playwright Test Agentsを用いて、AIエージェントにE2Eテストの修正させることを試みた内容をまとめたものです。
筆者のモチベーション
E2E テストの導入後、しばしばテストが失敗することがあり、修正に手間取ることがありました。
この失敗の原因調査は、時間がかかることが多く、結構な手間がかかります。また、その修正自体も、テストコードの内容を理解した上で行う必要があり、俗人的な対応になっていました。
これらの修正作業をAIエージェントに任せることができれば、修正作業の負担が軽減されるのではないかと考え、Playwright Test Agents を試してみることにしました。
筆者の環境
筆者の環境は以下の通りです。
- VSCode: v1.108.0
- GitHub Copilot: Business Plan
- Playwright: v1.56.1
- Node.js: v22.18.0
Playwright Test Agents とは
Playwright Test Agents とは、Playwrightが提供するAIエージェント機能で、以下の3つのエージェントが用意されています。
- planner: アプリケーションを探索し、テスト計画を企て Markdown 形式で出力するエージェント
- generator: テスト計画に基づき Playwright のテストコードを生成するエージェント
- healer: 生成したテストを実行し、失敗した場合に修正するエージェント
参考になるブログ
Playwright Test Agents をより理解するために、以下のブログ記事が参考になりました。
Playwright Test Agents のセットアップ
Playwright Test Agents を使用するには、以下の手順でセットアップを行いました。
なお、筆者は既に Playwright を利用したプロジェクトが存在している状態で進めました。
-
Playwright Test Agents のインストール
ターミナルで以下のコマンドを実行し、既存プロジェクトにインストールしました。npx playwright init-agents --loop=vscode -
生成物の確認
前の手順を実行すると、以下のファイルが生成されたことが確認できました。{your-project-root} ├── .github │ └── chatmodes │ ├── 🎭 planner.chatmode.md │ ├── 🎭 generator.chatmode.md │ └── 🎭 healer.chatmode.md ├── .vscode │ └── mcp.json └── tests └── e2e └── seed.spec.ts -
生成物に対する警告
VSCodeで.github/chatmode/*.chatmode.mdを開くと以下の警告が出ました。チャット モードの名前がエージェントに変更されました。 このファイルを {your-project-root}/.github/agents/*.agent.md に移動してください -
警告の解消
前の警告を解消するために、示された通りにをディレクトリを移動、ファイル名を変更しました。
このとき、テストに関するエージェントであることがわかりやすいように、test-の接頭辞をファイル名に付けました。また、絵文字をファイル名から削除しました。{your-project-root} ├── .github │ └── agents │ ├── test-planner.agent.md │ ├── test-generator.agent.md │ └── test-healer.agent.md ├── .vscode │ └── mcp.json └── tests └── e2e └── seed.spec.ts -
日本語への翻訳
生成された.github/agents/*.agent.mdは英語で記述されていたため、生成AIで日本語に翻訳させました。
以上で、Playwright Test Agents のセットアップは完了です。
VSCode の GitHub Copilot のチャットから、各エージェントを利用できるようになりました。
MCPの設定
以下の設定はトライアル時には追加していないですが、必要に応じてオプション引数を追加することができます。
--- a/.vscode/mcp.json
+++ b/.vscode/mcp.json
@@ -5,7 +5,10 @@
"command": "npx",
"args": [
"playwright",
- "run-test-mcp-server"
+ "run-test-mcp-server",
+ "--headless",
+ "--config",
+ "./playwright.config.ts"
]
}
},
Playwright Test Agents の Healer のトライアル
Healer の特徴は、以下の処理を単純なプロンプトで実行できる点です。
- エージェント自身がテストスイートを実行する
- 失敗するテストケースがあるかを確認する
- 失敗するテストケースがある場合には、原因を調査する
- 原因に基づき、必要に応じてテストコードを修正する
これらの処理が実際に行われるか、test-healerのエージェントに以下のプロンプトを与えて確認してみました。
`--grep=@foo`のオプションをCLIオプションをつけて、テストを実行して、失敗したテストを修正してください。
ここで、--grep=@fooオプションは、@fooタグが付与されたテストケースのみを実行するためのものです（実際にはfooとは違う文字列でタグを付与しています）。
以下に、Healer エージェントの実行結果の一部を示します。
実行結果のサマリー、失敗したテストの詳細、推奨事項が表示されていることがわかります。
今回試した範囲では、テストコードの修正は行われませんでしたが、失敗したテストケースの原因調査が自動で行われたことが確認できました。
おわりに
Playwright Test Agents の Healer エージェントを用いて、E2E テストの修正を試みました。
今回のトライアルでは、失敗したテストケースの原因調査が自動で行われることが確認でき、修正作業の一部をAIエージェントに任せることができる可能性が示されました。モチベーションであった、修正作業の負担が大幅に軽減される期待できました。
また、この後の展望として、この実行→原因調査→修正の一連の処理をCIに導入することに試みたいです。実現方法の案としてはGitHub Copilot CLIを利用することが考えられます。