Playwright 1.56には、テストスイートの計画、対応するTypeScriptスクリプトの作成、そして壊れたロケーターの即時修復を行う3つの組み込みAIエージェントが搭載されています。これにより、手動テストの単調な作業が、AI支援型のワークフローへと変わります。
なぜこの変更が重要なのか
自動化エンジニアは長年、要件をテストケースに変換し、スクリプトを手書きし、実行し、UIが変更されるたびに不安定なセレクターを追いかけるという、繰り返しのループに従ってきました。特に変化の速いフロントエンドでは、メンテナンスのオーバーヘッドが自動化によって節約された時間を上回ってしまうことがあります。テストフレームワークにAIエージェントを直接組み込むことで、Playwrightは「修正して実行する」サイクルを短縮し、エンジニアがセレクター探しではなく、高レベルなテスト戦略に集中できるようにします。
3つのエージェントの解説
- Planner Agent – アプリケーションが動作すべき内容を自然言語で受け取り、ライブサイトを探索して、構造化されたMarkdown形式のプランを出力します。このプランには主要なユーザフローとエッジケースのシナリオがリストアップされており、コードを書く前に明確な設計図を提供します。
- Generator Agent – Markdown形式のプランを読み込み、実行可能なTypeScriptのテストコードを生成します。実行中のブラウザと通信してセレクターが安定しているかを確認し、指示があればPage Object Model（ページ構造とテストロジックを分離するデザインパターン）に従うことも可能です。
- Healer Agent – テストの実行を監視します。失敗の原因がUIの変更にある場合、失敗したステップを再実行して更新されたDOMを調査し、修正されたセレクターまたはロケーターを提案します。提案は、開発者が承認または微調整できるドラフトパッチとして表示されます。
エージェントは「agentic loop（エージェンティック・ループ）」、つまり Planner → Generator → Healer という形で動作します。各ステップが次のステップに情報を引き継ぎ、テスト対象のアプリケーションと同期し続ける自己調整型のパイプラインを構築します。
一般的なAIツールとの違い
チャット形式のモデルやコード補完拡張機能はスニペットを生成することはできますが、ライブDOMや特定のプロジェクト構成に直接アクセスすることはできません。PlaywrightのエージェントはModel Context Protocolを使用しており、現在のページ構造とテストフレームワークの設定をモデルにストリーミングします。これにより、AIは操作対象となる正確な要素について推論できるようになります。生成されるコードは、構文的に正しいだけでなく、生成時点の実際のUIに紐付けられています。
数コマンドですぐに始める
- Nodeプロジェクトをセットアップし、依存関係としてPlaywrightを追加します。
npx playwright init-agents --loop=vscodeを実行して、エディタ内でAIループをブートストラップします。- アプリケーションをロードする最小限の「シード（seed）」テストを記述します。これにより、エージェントに具体的なコンテキストが与えられます。
- 自然言語のプロンプト（例：「割引コードをカバーするチェックアウトフローを作成して」）を入力してPlannerを起動し、Generatorにスクリプトを生成させ、Healerに健全性を維持させます。
エージェントをより効果的に活用するためのヒント
- 明確なシードテスト – 初期テストは、アプリを確実に起動し、主要なUI要素を露出させるものである必要があります。入り口が曖昧だとPlannerが混乱します。
- 構造化されたシードデータ – 期待される入力を記述したJSONフィクスチャを提供すると、Generatorが適切なセレクターを選択しやすくなります。
- Page Object Modelを要求する – Generatorに対して明示的にPage Object Modelを構成するように指示することで、よりクリーンでメンテナンスしやすいコードが得られます。
- AIの出力はドラフトとして扱う – 生成されたスクリプトはコミットする前にレビューしてください。エージェントはビジネスロジックの細かなニュアンスを見逃したり、過度に汎用的なセレクターを生成したりすることがあります。