はじめに
GENDA IDの開発にあたり、開発チームでは必ず以下のテストを手動で行っていました :
- 新規登録導線
- 既存ユーザーのログイン導線
- 既存ユーザーのパスワード変更導線
導線の途中にはメールアドレスの認証コード入力や電話番号の認証コード入力が存在します。E2Eテストはこの辺を上手く織り込んでいく必要がありました。
AIエージェントがブラウザを操作出来るようになった
browser-useやPlaywright MCP、Chrome MCP Serverなどを利用することで、AIエージェントがブラウザを操作出来るようになりました。自然言語で目的を伝えることで、目的を達成するまで自律的に考えてブラウザの操作を行なってくれます。
E2Eテスト・コード生成
元々PlaywrightはE2Eテストのために作られたテストツールであり、AIエージェントが操作したログを基にテストコードを作ることが出来れば次からは全く同じ軌跡を辿った自動テストが行えるのではと考え、下記のプロンプトを実行しました。
Playwright MCPを利用して、GENDA IDの新規登録画面を開き登録が完了するまで進めてください。
道中で認証コードを要求されますが、認証コード取得手順のドキュメントを参照して認証コードを取得してください。
また、今回の操作ログをE2Eのテストコードとして起こしてください。
結果、AIエージェントはID新規登録画面から登録完了画面までの遷移を自律的に行い、更に以下のようなテストファイルが生成されました。（抜粋）
test.describe('GENDA ID 新規登録フロー', () => {
/* ...初期化処理・定数設定など... */
test('新規登録からマイページ遷移まで', async ({ page }) => {
// 1. ログインページへアクセス
await page.goto('/ja/login');
// ページが完全に読み込まれるまで待つ
await page.waitForLoadState('networkidle');
// メールアドレス入力フィールドが表示されるまで待つ
await page.waitForSelector('input[type="text"], input[type="email"], input[placeholder*="メール"], input[aria-label*="メール"]', { timeout: 30000 });
// 2. メールアドレスを入力
const emailInput = page.locator('input[type="text"], input[type="email"], input[placeholder*="メール"]').first();
await emailInput.fill(testEmail);
// 次へボタンをクリック
await page.getByRole('button', { name: '次へ' }).click();
// 3. メール認証コード画面に遷移することを確認
await expect(page.locator('text=6桁の認証コードを入力してください')).toBeVisible();
/* ... 中略 ... */
// 13. マイページに遷移
await expect(page).toHaveURL('/ja/mypage');
await expect(page.locator('text=サービス利用状況一覧')).toBeVisible();
});
});
実行してみたところ、新規登録動線を一通り実行して登録完了後のマイページ画面が表示されるところまでを確認することが出来ました。毎回AIエージェントに新規登録動線のテストをお願いするのもコストがかかるので、このようにテストを実行するだけで良くなると楽になります。
今後の展望
「新規登録画面を開き登録が完了するまで進めてください」というざっくりとした指示でここまでやってくれるということは、リグレッションテストを全て自然言語で表現出来ればAIエージェントに全てのE2Eテストを任せることが出来るようになりそうです。
テスト項目書はスプレッドシートで管理されているので、項目書から自然言語への変換もAIエージェントにやって貰えればさくっとプロンプトを作れそうですね。ゆくゆくはCIにも組み込んでいき、より安心してデプロイ出来る環境を整えていきたいと思います。
Discussion