generate

Playwright テストを生成する

ユーザーストーリー、URL、コンポーネント名、または機能の説明から、本番環境に対応できる Playwright テストを生成します。

入力

$ARGUMENTS にはテスト対象を指定します。例：

• "ユーザーがメールアドレスとパスワードでログインできる"
• "チェックアウトフロー"
• "src/components/UserProfile.tsx"
• "フィルター付きの検索ページ"

手順

1. 対象を理解する

$ARGUMENTS を解析し、以下を特定します：

• ユーザーストーリー：検証する動作を抽出します
• コンポーネントのパス：コンポーネントのソースコードを読みます
• ページ／URL：ルートとその要素を特定します
• 機能名：関連するアプリ領域に対応付けます

2. コードベースを調査する

Explore サブエージェントを使用して、コンテキストを収集します：

• playwright.config.ts を読み、testDir、baseURL、projects を確認します
• testDir 内の既存テストを確認し、パターン、フィクスチャ、規約を把握します
• コンポーネントのパスが指定されている場合は、コンポーネントを読み、props、状態、インタラクションを理解します
• pages/ 内に既存のページオブジェクトがあるか確認します
• fixtures/ 内に既存のフィクスチャがあるか確認します
• 認証のセットアップ（auth.setup.ts または storageState の設定）を確認します

3. テンプレートを選択する

このプラグイン内の templates/ で一致するパターンを確認します：

テスト対象	テンプレートの読み込み元
ログイン／認証フロー	../pw/templates/auth/login.md
CRUD 操作	templates/crud/
チェックアウト／決済	templates/checkout/
検索／フィルター UI	templates/search/
フォーム送信	templates/forms/
ダッシュボード／データ	templates/dashboard/
設定ページ	templates/settings/
オンボーディングフロー	templates/onboarding/
API エンドポイント	templates/api/
アクセシビリティ	templates/accessibility/

テンプレートをアプリに合わせて調整し、{{placeholders}} を実際のセレクター、URL、データに置き換えます。

4. テストを生成する

以下のルールに従います：

構造：

import { test, expect } from '@playwright/test';
// Import custom fixtures if the project uses them

test.describe('Feature Name', () => {
  // Group related behaviors

  test('should <expected behavior>', async ({ page }) => {
    // Arrange: navigate, set up state
    // Act: perform user action
    // Assert: verify outcome
  });
});

ロケーターの優先順位（最初に機能するものを使用）：

1. getByRole() — ボタン、リンク、見出し、フォーム要素
2. getByLabel() — ラベルのあるフォームフィールド
3. getByText() — インタラクティブではないテキストコンテンツ
4. getByPlaceholder() — プレースホルダーテキストのある入力欄
5. getByTestId() — セマンティックな方法が使えない場合

アサーション — 常に Web ファーストにします：

// GOOD — auto-retries
await expect(page.getByRole('heading')).toBeVisible();
await expect(page.getByRole('alert')).toHaveText('Success');

// BAD — no retry
const text = await page.textContent('.msg');
expect(text).toBe('Success');

次のものは使用しないでください：

• page.waitForTimeout()
• page.$(selector) または page.$$(selector)
• 絶対に必要な場合を除く、単独の CSS セレクター
• ロケーターで実行できる処理に対する page.evaluate()

必ず含めてください：

• 動作を説明する、わかりやすいテスト名
• 正常系と併せたエラーケース／エッジケースのテスト
• すべての Playwright 呼び出しへの適切な await
• baseURL を基準にしたナビゲーション（page.goto('http://...') ではなく page.goto('/')）

5. プロジェクトの規約に合わせる

• プロジェクトが TypeScript を使用している場合 → .spec.ts を生成します
• プロジェクトが JavaScript を使用している場合 → require() インポートを使った .spec.js を生成します
• プロジェクトにページオブジェクトがある場合 → インラインロケーターの代わりに使用します
• プロジェクトにカスタムフィクスチャがある場合 → インポートして使用します
• プロジェクトにテストデータ用ディレクトリがある場合 → そこにテストデータファイルを作成します

6. 必要に応じて補助ファイルを生成する

• ページオブジェクト：テストで1ページ上の一意なロケーターを5つ以上扱う場合は、ページオブジェクトを作成します
• フィクスチャ：テストに共有セットアップ（認証、データ）が必要な場合は、フィクスチャを作成または拡張します
• テストデータ：テストで構造化データを使う場合は、test-data/ に JSON ファイルを作成します

7. 検証する

生成したテストを実行します：

npx playwright test <generated-file> --reporter=list

失敗した場合：

1. エラーを読みます
2. アプリではなくテストを修正します
3. 再度実行します
4. アプリの問題であれば、ユーザーに報告します

出力

• 生成したテストファイル（パスを含む）
• 作成した補助ファイル（ページオブジェクト、フィクスチャ、データ）
• テスト実行結果
• カバレッジに関する注記：今回テスト対象となった動作