🤖

Playwright Agents：AIが自動でE2Eテストを計画・実装・修正する革新的な機能

に公開
AI
Playwright
E2E
automation
testing
tech

Playwright Agents：AI が自動で E2E テストを計画・実装・修正する革新的な機能

Playwright Agents とは

Playwright Agents は、2025 年 10 月に登場した E2E テスト（エンドツーエンドテスト）を自動化する革新的な機能です。

従来、E2E テストの作成には以下のような課題がありました：

  • テストケースの洗い出しに時間がかかる
  • テストコードの実装が煩雑
  • UI 変更のたびにテストが壊れて修正が必要

Playwright Agents は、これらの課題を3 つの AI エージェントが協力して解決します。テストの計画から実装、修正までを AI が支援することで、開発者は本質的な作業に集中できるようになります。

3 つのエージェントの役割

Playwright Agents は、それぞれ異なる役割を持つ 3 つの AI エージェントで構成されています。

1. Planner（プランナー）

役割：テスト計画の自動生成

アプリケーションを探索し、テストすべき項目を洗い出して Markdown 形式のテスト計画を自動生成します。

具体的な動作：

  • ユーザーがどのような操作をするかを想定
  • 体系的なテストケースを作成
  • 人間が見落としがちなエッジケースも網羅
    • 極端な年齢入力
    • ネットワークエラー時の挙動
    • ブラウザバック時の動作
    • 空文字入力やバリデーション

実績例：

医療問診サービス「ユビー」での事例では、1,089 行の超詳細なテスト計画書が自動生成され、人間だと数日かかる作業が数分で完了しました。

2. Generator（ジェネレーター）

役割：テストコードの自動生成

Planner が作成した Markdown のテスト計画を、実行可能な Playwright のテストコードに変換します。

メリット：

  • テスト計画からコードへの変換作業が不要
  • 実装の工数を大幅に削減
  • 数時間かかる作業が数分で完了

生成されるコード：

  • ページ操作（クリック、入力、選択）
  • アサーション（期待値の検証）
  • 待機処理
  • エラーハンドリング

3. Healer（ヒーラー）

役割：テストの自動修正

テストを実行し、失敗したテストケースを検出して自動的に修正します。

具体的な修正内容：

  • UI 変更によるセレクタの更新
  • 新しい要素の特定
  • タイムアウト値の調整
  • 動的コンテンツへの対応

メリット：

UI をリファクタリングしても、Healer が自動でテストを修正してくれるため、メンテナンスコストが大幅に削減されます。

セットアップ方法

導入は非常に簡単です。以下のコマンドを実行するだけで、すぐに使い始められます。

VS Code で使う場合

npx playwright init-agents --loop=vscode

前提条件：

  • VS Code v1.105 以降が必要

Claude Code で使う場合

npx playwright init-agents --loop=claude

このコマンドを実行すると、以下のファイルが自動生成されます：

  • .github/: 3 つのエージェントの定義ファイル
  • specs/: Planner が生成する Markdown 形式のテスト計画
  • tests/: Generator が生成する実際のテストコード
  • seed.spec.ts: 初期設定ファイル（ログイン処理などのグローバルセットアップ）

プロジェクト構成

project/
├── .github/
│   ├── planner.yml      # Plannerの定義
│   ├── generator.yml    # Generatorの定義
│   └── healer.yml       # Healerの定義
├── specs/
│   └── test-plan.md     # 生成されたテスト計画
├── tests/
│   └── generated.spec.ts # 生成されたテストコード
└── seed.spec.ts         # 初期設定

対応ツール

現在、以下の開発環境で利用できます：

  • Claude Code: SubAgents として定義して使用
  • VS Code: モードとして定義（v1.105 以降が必要）
  • OpenCode: エージェントとして統合

実践例：Todo アプリのテスト自動生成

実際の使用例を見てみましょう。

ステップ 1: 自然言語で指示

カレンダー機能のテストを作成して

たったこれだけの指示で、AI が自動的にテストを生成します。

ステップ 2: Planner がテスト計画を作成

Planner が以下のようなテスト計画を自動生成：

# カレンダー機能テスト計画

## 基本機能

- [ ] カレンダーが正しく表示される
- [ ] 今日の日付がハイライトされる
- [ ] 月の切り替えができる

## 日付選択

- [ ] 日付をクリックすると選択される
- [ ] 選択した日付が強調表示される
- [ ] 過去の日付は選択できない

## エッジケース

- [ ] 2 月 29 日（うるう年）の処理
- [ ] 月末から月初への切り替え
- [ ] 無効な日付の入力

ステップ 3: Generator がコードを生成

テスト計画から、実行可能なテストコードを自動生成：

import { test, expect } from "@playwright/test";

test.describe("カレンダー機能", () => {
  test("カレンダーが正しく表示される", async ({ page }) => {
    await page.goto("/calendar");
    await expect(page.locator(".calendar")).toBeVisible();
  });

  test("今日の日付がハイライトされる", async ({ page }) => {
    await page.goto("/calendar");
    const today = new Date().getDate();
    await expect(page.locator(`.day[data-date="${today}"]`)).toHaveClass(
      /highlighted/
    );
  });

  // ... 他のテストケース
});

ステップ 4: Healer が自動修正

UI を変更してテストが失敗しても、Healer が自動で修正：

❌ テスト失敗: セレクタ '.calendar' が見つかりません

🔧 Healer が修正中...

✅ 修正完了: 新しいセレクタ '[data-testid="calendar-container"]' を使用

実際の開発者の評価

Playwright Agents を使った開発者の評価をまとめました。

好評価なポイント

1. 圧倒的な時間短縮効果

多くの開発者が最も評価しているのは、時間短縮効果です。

  • テスト計画作成: 数日 → 数分
  • コード生成: 数時間 → 数分
  • 人間が 1〜2 日かけて作る内容を 30 分程度で形にできた

2. Planner が特に優秀

3 つのエージェントの中でも、Planner の評価が特に高いです。

ユビーでの事例：

  • 1,089 行の超詳細なテスト計画書を自動生成
  • 人間だと見落としがちなケースまで網羅
    • 極端な年齢入力
    • ネットワークエラー時の挙動
    • ブラウザバック時の動作

3. テストコードを書かなくて済む

「テストコードを自前で書くことがなくなった」という声が多く、エンジニアの負担が大幅に軽減されています。

アプリケーション開発により専念できるようになり、生産性が向上します。

懸念点・課題

一方で、以下のような課題も指摘されています。

1. 「70 点の壁」問題

多くの開発者が指摘する典型的な AI ツールの課題：

パッと見ていい感じ
↓
実際に使ってみると細かいところで期待と違う
↓
完璧を求めると結局人の手で大幅な修正が必要

2. 生成コードの品質にバラつき

Generator が生成するコードには、以下のようなクセがあります：

  • if 文を多用しすぎる（本来は条件ごとに別テストケースを作るべき）
  • マジックナンバーが多い
  • ループ内で非同期処理を使うなどパフォーマンスの問題
  • ハードコードされたタイムアウト値

3. 人間のレビューが必須

「一発で完璧なテストが自動で完成するわけではない」という前提で使う必要があります。

**「たたき台を作ってくれるツール」**として捉え、人間がレビュー・リファクタリングする工程は省略できません。

4. 読む量が多い

AI が生成するドキュメントの量が膨大：

  • テスト計画: 400 行
  • テストコード: 200 行

「自分で書いていないから記憶していない」「何をテストしているかすぐ忘れそう」という懸念もあります。

活用シーン

Playwright Agents は、以下のような場面で特に活躍します。

1. 新機能リリース前のテストケース洗い出し

新機能をリリースする前に、Planner を使ってテストケースを網羅的に洗い出せます。

新しいユーザー登録フローのテストケースを洗い出して

2. E2E テスト導入初期のコードベース構築

E2E テストをこれから導入するプロジェクトで、初期のテストコードベースを素早く構築できます。

ログインフォームとダッシュボードの基本的なE2Eテストを作成して

3. テストシナリオ検討の壁打ち相手として

「こんなテストケースも必要かな？」と悩んだときに、AI に相談できます。

決済フローで考慮すべきエッジケースを教えて

4. 重要なユーザーフローのテスト

ログインフォームや決済フローなど、絶対に壊してはいけない重要な機能のテストに最適です。

実践的な使い方のコツ

コツ 1: まずは小さく始める

いきなり全機能のテストを作るのではなく、重要な機能から始めましょう。

まずはログイン機能のテストだけ作成して

コツ 2: 生成されたコードは必ずレビュー

AI が生成したコードをそのまま使うのではなく、必ずレビューしてリファクタリングしましょう。

  • マジックナンバーを定数化
  • 重複コードを関数化
  • テストケースを適切に分割

コツ 3: seed.spec.ts を活用

ログイン処理など、全テストで共通する処理は seed.spec.ts にまとめましょう。

// seed.spec.ts
import { test as setup } from "@playwright/test";

setup("ログイン", async ({ page }) => {
  await page.goto("/login");
  await page.fill('[name="email"]', "test@example.com");
  await page.fill('[name="password"]', "password123");
  await page.click('button[type="submit"]');
  await page.waitForURL("/dashboard");

  // セッションを保存
  await page.context().storageState({ path: "auth.json" });
});

コツ 4: Healer を信頼しすぎない

Healer が自動修正してくれますが、修正内容は必ず確認しましょう。

意図しない修正が行われている可能性があります。

トラブルシューティング

エージェントが起動しない

# Playwrightを最新版に更新
npm install -D @playwright/test@latest

# ブラウザを再インストール
npx playwright install

テスト計画が生成されない

  • アプリケーションが起動しているか確認
  • URL が正しいか確認
  • より具体的な指示を出す

生成されたテストが失敗する

  • スクリーンショットを撮って状態を確認
  • セレクタが正しいか確認
  • 待機時間が十分か確認

まとめ

Playwright Agents は、E2E テストの作成を劇的に効率化する革新的な機能です。

メリット：

✅ テスト計画を自動生成（Planner）
✅ テストコードを自動生成（Generator）
✅ テストを自動修正（Healer）
✅ 時間短縮効果が絶大（数日 → 数分）
✅ エッジケースも網羅

注意点：

⚠️ 「70 点の壁」問題：完璧ではない
⚠️ 人間のレビューが必須：たたき台として使う
⚠️ 生成コードの品質にバラつき：リファクタリングが必要

総合評価：

「完璧ではないが、初速が圧倒的に速くなり、実用的なレベルに達している」というのが一般的な評価です。

特に、新機能リリース前のテストケース洗い出しや、E2E テスト導入初期のコードベース構築において、大きな価値を発揮します。

**「既に使ってる方にもこれからの方にもおすすめできる強力な機能」**として、多くの開発者から支持されています。

E2E テストの作成に時間がかかっている方、テストケースの洗い出しに悩んでいる方は、ぜひ Playwright Agents を試してみてください！

参考リンク

Discussion