はじめに
こんにちは、鷹野です。
Playwright v1.56からの新機能でPlaywright Agentsが追加されました。 この Playwright Agents は、3つの主要なエージェントから構成されており、これらが協調して動作することでテストプロセス全体の自動化を実現してくれるようです。
今回はPlaywright Agentsを実際に触ってみたいと思います。
Playwright Agentsとは
まず、今回導入されたPlaywright Agentsとはなんぞやというところから説明します。冒頭でも触れたように、Playwright Agentsは3つのエージェントで構成されており、それぞれが連携してテストプロセス全体を自動化します。
Playwright Agentsを構成する3つのエージェント
🎭 Planner（プランナー）
役割: ウェブアプリケーションを自動的に探索し、テストすべき項目を洗い出して、Markdown形式のテスト計画を生成。
利点: 人間が見落としがちなテストケースを発見し、網羅的なテスト計画を短時間で作成。これにより、テスト設計にかかる工数を大幅に削減。
🎭 Generator（ジェネレーター）
役割: Plannerが作成したMarkdown形式のテスト計画を読み込み、Playwrightで実行可能なテストコードを自動生成。
利点: テスト計画からコードへの変換作業が不要になり、開発者はより本質的な作業に集中することが可能。
🎭 Healer（ヒーラー）
役割: 実行したテストが失敗した場合、その原因をAIが分析し、コードを自動的に修正。例えば、UIの変更によって要素のセレクタが変わってしまった場合など、新しいセレクタを特定してコードを更新。
利点: テストコードのメンテナンスコストを劇的に削減。これまで手作業で行っていたデバッグと修正作業の多くを自動化できるため、テストの安定性向上に繋がる。
実際に使ってみよう
セットアップ
セットアップは非常に簡単でした。
まず、以下のコマンドでPlaywrightをインストールします。
既にしてある方は、バージョンが1.56以上であることを確認してください。
npm init playwright@latest
TypeScriptかJavaScriptのどちらを使うか聞かれるので選択します。（自分はTypeScriptを選択） その後、色々聞かれますが、特にこだわりがなければそのまま承認し続けて良いです。 全て承認後にインストールが始まります。
インストールが終わったら、プロジェクトにPlaywright Agentsの定義を追加します。 今回はVSCodeに搭載されているGitHub Copilot Chatと連携させるため、以下のコマンドを入力します。
npx playwright init-agents --loop=vscode
--loop=vscode オプションは、VSCode内のCopilot Chatを対話先として設定するためのものです。
Claude CodeやOpenCodeにも対応しているので、そちらで試したい方はPlaywright公式ドキュメントを参照してください。
インストールが完了すると画像のようにファイルが追加されているはずです。
・planner.chatmode.md
・generator.chatmode.md
・healer.chatmode.md
これらのファイルは、それぞれのエージェントの役割をCopilotに指示する役割を果たします。
・.vscode/mcp.json
VSCodeのための設定ファイルです。
・tests/seed.spec.ts
これは、AIエージエントがテストを作成する際の出発点となるファイルです。
ログインなどが必要なサイトの場合はこのファイルに処理を書いてから各エージェントに指示を出します。
以上でセットアップは終了です。
Webサイトのテストを作ってもらう
セットアップが完了したので、実際にPlyawright Agentsを使っていきます。
今回は勉強用に作成した自身のウェブサイトでテストを作成してもらおうと思います。
まず、seed.spec.tsを書いていきます。
対象のサイトはログイン機能などはないため、アクセスする処理を書くだけで完了です。
mport { test, expect } from '@playwright/test';
test.describe('Test group', () => {
test('seed', async ({ page }) => {
// generate code here.
await page.goto('ここにテストしたいサイトのURL');
});
});
Planner
次にPlannerモードに切り替えます。
左下のモードを押下すると以下のように出てくるのでplannerを選択します。
そして、seed.spec.tsをコンテキストとして追加します。
Copilotへの指示はあえてシンプルなものにしてやっていきます。
かなり乱暴なプロンプトを与えましたが、Playwright MCPを用いてサイトの構造を把握し、テストケースをMarkdown形式で出力してくれました。mdファイルはtestsフォルダに出力されていました。
以下が実際に出力されたテストケースの一部分です。全部で13個のテストケースを出力してくれました。また、簡単な指示であったのにも関わらず、正常系だけではなく異常系のテストケースも出力されていたのはすごく便利だなと思いました。
### 1. グローバルナビ（アンカー遷移とアクティブ状態）
前提: トップページを初期表示。
手順:
1. ヘッダーの「About」ボタンをクリック
- 期待: About Me セクションがビューポート内にスクロールインし、ナビの「About」がアクティブ表示になる
2. 「プロジェクト」ボタンをクリック
- 期待: プロジェクト見出しがビューポート内に入り、「プロジェクト」がアクティブ
3. 「経歴」ボタンをクリック
- 期待: 職歴セクションが表示、「経歴」がアクティブ
4. 「コンタクト」ボタンをクリック
- 期待: お問い合わせセクションが表示、「コンタクト」がアクティブ
5. 「ホーム」ボタンをクリック
- 期待: ヒーロー（氏名/肩書）が再び先頭に表示、「ホーム」がアクティブ
成功基準:
- 各クリックで対応セクションが確実に表示され、アクティブ状態が正しく遷移
失敗条件:
- スクロールしない/誤ったセクションに移動/アクティブ表示が変化しない
### 2. ヒーローCTAの挙動
手順:
1. CTA「プロジェクトを見る」をクリック
- 期待: プロジェクトセクション先頭へスクロール、ナビ「プロジェクト」がアクティブ
2. CTA「お問い合わせ」をクリック
- 期待: お問い合わせセクションへスクロール、ナビ「コンタクト」がアクティブ
成功基準: CTAが各対応セクションに遷移する
失敗条件: スクロールしない/誤ったセクションに遷移
...
Generator
次にplannerが作成したテストケースから実際にコードに変換してもらいましょう。 画像のようにモードをgeneratorに変更し、実装したいテストケースのタイトルをコンテキストとして追加します。 プロンプトは先ほどと同様簡単なものにしました。
すると、global-nav-anchor-active-state.spec.tsが出力されたので実際に実行してみます。
下記のようにファイルを指定すると、特定のテストだけを実行できます。
npx playwright test tests/global-nav-anchor-active-state.spec.ts
plannerと同様に簡単な指示を与えただけでしたが、生成されたテストが成功していることが確認できました。
他のテストケースもコードに変換していると、ついにテストが失敗しました。 対象のサイトが簡単なものであるため、生成されたほとんどのテストが成功していましたが、生成されたコードが常に完璧に動作するとは限りません。
このような場合に活躍するのがHealer Agentのようなので使ってみます。
Healer
これまでと同様に簡単な指示から、テストを修正してくれるのか試してみます。
モードをhealerに変更し、テストが失敗したファイルをコンテキストに追加します。
指示を出すと失敗した原因を特定し、自動でコードを書き換えてくれました。
テストも成功となり、簡単に修正できました。
AIで生成されたテストコードは修正に苦労する印象が強かったのですが、かなりピンポイントで最小限の修正をしてくれたので、非常に便利だと感じました。
使ってみて
既に使ってる方にもこれからの方にもおすすめできる強力な機能
実際に使ってみて、Playwright Agentsは非常に強力な機能だと感じました。
普段からPlaywrightを使い込んでいる方にとっては、Planner、Generator、Healerの役割分担が明確で、AIがPlaywright MCPを適切に利用してくれるため、細かくプロンプトを作り込まなくても精度の高い結果を得られる点が大きな魅力だと思います。
また、これからPlaywrightを試したいという方にも、この機能は大変有効だと思います。Plannerがテストすべき項目を洗い出してくれるので「何からテストすれば良いか」という最初の壁を乗り越えやすく、Generatorが生成したコードが完璧でなくてもHealerが修正を手伝ってくれるため、トライアンドエラーを繰り返しながらテストコードを完成させることができます。
各エージェントの所感
特に Planner が優秀で、テスト計画の自動生成は非常に便利でした。
Generator が生成するコードには少しクセがある印象で、誰でも一発で完璧なテストが作れるというわけではなさそうです。しかし、そこを Healer が見事にカバーしてくれるため、まず動くテストを素早く作るという目的は十分に達成できると感じました。
まとめ
今回はPlaywrightのv1.56で導入された新機能であるPlaywright Agentsを試しました。
Planner、Generator、Healerという3つのエージェントが連携することで、テスト計画の立案からコード生成、そして修正までを効率的に自動化できる、非常に強力な機能です。
あえてシンプルなプロンプトで試しましたが、それでも充分な結果が得られました。プロンプトを工夫したり、より複雑なWebサイトで検証したりすることで、さらに強力なテスト自動化を実現できると思いました。
最後まで読んでいただきありがとうございました！