今回はPlaywrightに新たに追加されたAIによるE2Eテスト自動化機能「Test Agents」をご紹介します。
目次
はじめに
ソフトウェアの開発において、テスト品質を高めることは重要な事項でさまざまな支援ツールが提供されてきました。なかでも「Playwright」は作成や実行の難易度の高いE2Eテスト向けの支援ツールで、大幅な工数削減に貢献します。
今回はPlaywrightの利便性をさらに向上させる新機能「Test Agents」を解説していきます。Test Agentsにより、テストの策定から実行、分析までの工程が円滑で素早くなることが期待できます。
PlaywrightのTest Agentsとは
PlaywrightはモダンなWebアプリケーションのE2Eテストを自動化できるオープンソースのテストフレームワークです。テストの高速化と動的UIへの安定的な対応が特徴で、E2Eテストの品質を一定に保つことができます。詳しくは下記の記事にて解説しています。
Test AgentsはPlaywrightに追加された新機能で、AIを用いたテスト自動化によって更に利便性を高めます。
AIの活用によって、従来は手動で行っていたE2Eテストの工程を省略でき、さらにテスト品質の安定化が図られています。これらは次の3つのエージェントが働くことで実現されています。
- Planner
- アプリケーションを走査してテストプランを作成します
- Generator
- テストプランからPlaywrightのテストファイルを作成します
- Healer
- テストの実行と失敗したテストの自動修復を行います
エージェントはぞれぞれ独立しているため、必要な部分だけ動かしたり、連携して順次実行させたりできます。また、LLMをベースとした自然言語の入力に対応しており、テストコードの知識が少なくてもテストケースの作成や実行を指示できます。
Test Agentsの特長
AIによるテスト工程の自動化
Test Agentsでは、3つのエージェントを順番に実行することでE2Eテスト工程の多くの作業を省略できます。
Plannerはテスト対象のコードからマークダウン形式のテストプランを作成します。このテストプランはGeneratorの入力に使用でき、テストケースとなるコードを書き出します。最後にHealerで実行時に失敗したテストを自動的に分析し、コードを修復（セルフヒーリング）することで、テストの保守コストを最小限に抑えます。
テスト品質の安定化
Test Agentsが人間に代わって多く作業を担当するため、一定のテスト品質を確保できます。エンジニアであっても、アプリケーションの規模が大きくなるほどテストケースの漏れや実装ミスが発生しやすく、また知識や経験によって品質に差が生じることもあります。
一連のテスト工程を学習したLLMにテスト計画やコードを書かせることで、初期の段階から人的ミスを生じさせにくくできます。
Test Agentsを使ってみよう
Test AgentsはVisual Studio Codeのほか、Claude CodeやOpenCodeでも使用可能です。
今回はPlaywrightとの親和性が高く、一番手軽に実行が可能なVisual Studio Code（＋Copilot Chat）を使用します。
Node.jsのインストール
Playwrightの実行にはNode.jsが必要なので、インストールしていない場合は公式サイトにアクセスしてインストールします。
ページ下部に表示されているOSとアーキテクチャを選択し、左の緑色のボタンをクリックしてインストーラーのダウンロードを行います。
- macOSの場合は、「macOSインストーラー」
- Windowsの場合は、「Windowsインストーラー」
ページ上部にバージョン（2025年11月時点の推奨版は「v24.11.1 (LTS)」）の選択肢がありますが、その時点のバージョンをダウンロード頂ければ問題ありません。尚、最新版（Currentの付いたバージョン）は最新機能が使用できる反面、動作が安定しないことがありますので、特別な理由がない限りは推奨版を使用するようにしてください。
インストーラのダウンロードが終わったらダブルクリックで起動し、指示の通りインストールを行ってください。
インストール後、コマンドを実行できるアプリを起動し、Node.jsおよびnpmが使用できるようになっていることを確認します。
- macOSの場合は、「ターミナル」アプリ
- Windowsの場合は「PowerShell」または「コマンドプロンプト」
以下のコマンドを実行し、結果を確認します。
node -v
npm -v実行結果に自分のインストールしたバージョンが表示されれば、使用する準備ができてきます。コマンドが実行できない場合はOSを再起動して再度試すようにしてください。
Webアプリケーションの作成
テスト対象としてNext.jsのサンプルアプリケーションを作成します。下記のコマンドを入力してNext.jsプロジェクトを作成しましょう。
npx create-next-app --example active-class-name testagents-exampleプロジェクトディレクトリに移り、開発サーバーを起動させてみましょう。
cd testagents-example
npm run devブラウザから「http://localhost:3000」を開いて表示されれば成功です。
また、同ディレクトリにて下記のコマンドでPlaywrightをインストールしておきましょう。
npm init playwright@latestTest Agentsの実行
Visual Studio Codeで先ほど作成したプロジェクトディレクトリを開きましょう。また、ターミナルで下記のコマンドを入力してエージェントを適用します。
npx playwright init-agents --loop=vscodeGitHub Copilotのチャットを開くと以下のようにTest Agentsが選択可能になっています。
チャットから下記を入力してTest Agentsを実行します。モデルには任意のLLMを選択しましょう。
- コンテキスト：
seed.spec.ts - エージェント：playwright-test-planner
- プロンプト：このアプリケーションのテストプランを作成してください。
実行結果を許可していくと、最終的にテストプランのマークダウンファイルtest-plan.mdが作成されます。
次に、チャットからGeneratorのエージェントを使ってプロンプトを入力しましょう。
- コンテキスト：
test-plan.md - エージェント：playwright-test-planner
- プロンプト：次の章のテストコードを作成してください。### 1. ページナビゲーション機能
完了すると、specsディレクトリ内にテストコードが作成されます。
下記のコマンドでテストを実行してみましょう。
npx playwright testテストが失敗した場合はHealerエージェントで修正できます。すべて成功した場合も、テストコードの一部を失敗するように変更してみましょう。
Healerエージェントを使うには、チャットで下記を入力しましょう。
- コンテキスト：失敗したテストファイル
- エージェント：playwright-test-healer
- プロンプト：テストを修正してください。
再度テストして成功することを確認してみましょう。
さいごに
PlaywrightのTest Agentsは、E2Eテストの品質の安定化を図った新機能で、LLMによる自然言語での指示を可能にしました。WebアプリケーションのE2Eテスト工程をさらに短縮させることができ、開発サイクルの高速化にもつながりますので、ぜひこの記事を参考にお試しください。
メシウスでは様々なJavaScriptフレームワークと一緒に使えるJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。