e2e-test-suite-init

E2E テストスイートの初期化

Playwright の E2E テストを書き始めるために必要な、すべての設定ファイル、ベースクラス、フィクスチャ、ヘルパーを含む e2e/ ディレクトリ構造全体を作成します。

---

事前確認

1. e2e/ がすでに存在するか確認します。 存在する場合は中止し、ユーザーに伝えます。既存のテストスイートを上書きしてはいけません。
2. Playwright がインストールされているか確認します。 package.json に @playwright/test がない場合は追加します。

---

ワークフロー

ステップ 1 — ディレクトリ構造を作成する

e2e/
├── auth/
│   └── auth.setup.ts
├── fixtures/
│   └── base.ts
├── helpers/
│   └── env-config.ts
├── poms/
│   └── base.page.ts
├── test-data/
├── tests/
│   ├── handover/
│   ├── regression/
│   └── smoke/
├── .auth/                   # git-ignored, holds saved session state
├── .gitignore
├── .env.example
├── playwright.config.ts
└── tsconfig.json

ステップ 2 — 設定ファイルを生成する

参照テンプレートを使用して各ファイルを生成します。

ファイル	テンプレートの参照先
playwright.config.ts	references/playwright-config-template.md
poms/base.page.ts	references/base-page-template.md
fixtures/base.ts	references/fixtures-template.md
helpers/env-config.ts	references/env-config-template.md
auth/auth.setup.ts	e2e-test-conventions スキルの references/auth-setup.md を参照

ステップ 3 — サポートファイルを生成する

e2e/.gitignore:

.auth/
.env
.env.*
!.env.example
test-results/
playwright-report/
blob-report/

e2e/.env.example:

BASE_URL="https://your-app.example.com"
LOGIN_EMAIL="[email protected]"
LOGIN_PASSWORD="your-password"
AUTH_FILE="e2e/.auth/user.json"

e2e/tsconfig.json:

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "commonjs",
        "moduleResolution": "node",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "outDir": "./dist",
        "rootDir": "."
    },
    "include": ["**/*.ts"],
    "exclude": ["node_modules", "dist"]
}

ステップ 4 — プロジェクトに合わせて調整する

以下についてユーザーに尋ねるか、既存のコードベースから推測します。

1. ログインページの URL — auth.setup.ts をカスタマイズするため
2. ログイン後の URL — ログイン後に待機する URL（例：/dashboard、/home）
3. 認証情報の保存方法 — Cookie/localStorage のみか、IndexedDB（Firebase、Supabase など）も使用するか
4. ベース URL — デフォルト環境のアプリケーション URL

ステップ 5 — 次の手順を表示する

すべてのファイルを生成した後、ユーザーに以下を伝えます。

1. Playwright ブラウザーをインストールする：npx playwright install
2. .env.example を .env.production にコピーして、値を設定する
3. 最初のページの POM を作成する：/create-pom [page-name]
4. 最初のテストを作成する：/create-regression-test [feature]

---

ルール

• 既存の e2e/ ディレクトリを上書きしてはいけません
• 生成するコードはすべて TypeScript にします
• すべてのパターンで e2e-test-conventions スキルに従います
• 2 層の環境変数読み込みパターン（getEnvConfig()、getBaseUrl() など）を使用します
• 認証ファイルのパスは、getAuthFilePath() を介して AUTH_FILE 環境変数から取得する必要があります
• playwright.config.ts では、5 つすべてのブラウザーを設定する必要があります
• 3 つすべてのスイート（regression、handover、smoke）を設定する必要があります