はじめに

この記事は、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を利用することが考えられます。