appbuilder-e2e-testing

App Builder E2E テスト

Adobe App Builder SPA および AEM 拡張機能向けの Playwright ベースのブラウザー E2E テストです。このスキルでは、ブラウザーレベルの検証用に Playwright の設定ファイル、テストファイル、CI ワークフローを生成します。

パターンのクイックリファレンス

ユーザーの意図を特定し、該当するセクションを参照して、要件に合わせたテストを生成します。

ユーザーの要望	参照先	アセット
ExC Shell SPA の E2E テスト	references/e2e-testing-patterns.md	assets/playwright.config.ts、assets/e2e-test-template.spec.ts
ブラウザーで AEM 拡張機能をテストする	references/aem-extension-testing.md	assets/playwright.config.ts
CI パイプラインで E2E テストを実行する	references/ci-integration.md	assets/e2e-ci-workflow.yml

すぐに始める場合（明確なリクエスト向け）

ユーザーが「E2E テストを追加して」や「Playwright テストを書いて」と依頼し、意図が明確な場合：

1. プロジェクト内で web-src/（SPA）または依存関係にある @adobe/uix-guest（AEM 拡張機能）を確認します
2. Playwright がない場合はインストールします：npm install -D @playwright/test && npx playwright install chromium
3. assets/playwright.config.ts を基に playwright.config.ts を生成します
4. ExC Shell SPA の場合：references/e2e-testing-patterns.md を読み、iframe のナビゲーション、シェルの読み込み待機、Spectrum の ARIA セレクターを含むテストを生成します
5. AEM 拡張機能の場合：references/aem-extension-testing.md を読み、Extension Tester の URL、ネストされた iframe の処理、モーダルのフローを含むテストを生成します
6. テストを実行します：npx playwright test
7. CI が必要な場合：assets/e2e-ci-workflow.yml を基に GitHub Actions ワークフローを生成します

クイックリファレンス

• テストディレクトリ： プロジェクトのルートにある e2e/（Jest の test/ とは別）
• 設定ファイル： プロジェクトのルートにある playwright.config.ts
• インストールコマンド： npm install -D @playwright/test && npx playwright install chromium（Playwright と Chromium ブラウザーをインストール）
• 実行コマンド： npx playwright test（ヘッドレス）または npx playwright test --headed（ブラウザーを表示）
• デバッグコマンド： npx playwright test --debug（ステップ実行モード）
• レポートコマンド： npx playwright show-report（HTML レポートを開く）
• ExC Shell iframe： page.frameLocator('iframe') を使ってシェル内の SPA にアクセスします — 正確なセレクターは異なるため、references/e2e-testing-patterns.md を参照してください
• Spectrum セレクター： CSS クラスではなく ARIA ロールを使用します：getByRole('button', { name: 'Save' })、getByRole('grid')、getByRole('textbox')
• 認証に関する注意： ExC Shell の認証を完全に自動化するのは複雑です。まず aio app dev（ローカル）に対してテストすることを推奨します。references/e2e-testing-patterns.md § Authentication を参照してください。
• AEM 拡張機能： devMode=true を指定した Extension Tester の URL を使用します。references/aem-extension-testing.md を参照してください。

完全なワークフロー（曖昧または複雑なリクエスト向け）

1. プロジェクトを確認する — web-src/（SPA）、@adobe/uix-guest（AEM 拡張機能）、既存のテスト設定、app.config.yaml の拡張機能タイプを確認します
2. 範囲を確認する — どのページやフローをテストしますか？ローカル開発環境とデプロイ済み環境のどちらですか？CI は必要ですか？
3. Playwright をインストールする — まだインストールされていない場合は npm install -D @playwright/test && npx playwright install chromium を実行します
4. 設定を生成する — assets/playwright.config.ts をコピーし、プロジェクトに合わせてカスタマイズします
5. テストファイルを生成する — 適切なリファレンスドキュメントを読み、プロジェクトの構成に合わせたテストを生成します：
   • ExC Shell SPA → references/e2e-testing-patterns.md
   • AEM 拡張機能 → references/aem-extension-testing.md
6. アクションをスタブ化する — テストでバックエンドからの決定的な応答が必要な場合は、page.route() のインターセプトを追加します
7. 実行して反復する — npx playwright test を実行し、必要に応じてセレクターやタイミングを修正します
8. CI ワークフローを追加する — 必要な場合は references/ci-integration.md を読み、assets/e2e-ci-workflow.yml を基にワークフローを生成します
9. 検証する — すべてのテストが合格し、ARIA セレクターとアサーションが使用され、固定の待機時間がないことを確認します

確認する入力情報

• 現在のリポジトリのパスとプロジェクトの種類（SPA または AEM 拡張機能）
• E2E テストの対象とするページまたはユーザーフロー
• ローカル開発環境とデプロイ済み環境のどちらに対してテストを実行するか
• CI 統合が必要かどうか

成果物

• プロジェクト向けに設定した playwright.config.ts
• e2e/ ディレクトリ内の E2E テストファイル
• GitHub Actions ワークフロー（CI が必要な場合）
• テスト実行の成功結果

品質基準

• すべてのテストで ARIA セレクター（getByRole、getByLabel）を使用すること — CSS クラスセレクターは使用しません
• iframe のナビゲーションには frameLocator() を使用すること — インデックスを指定した frame() は使用しません
• すべてのテストに await expect() アサーションを含めること — アサーションのないテストは作成しません
• 決定論的な結果が得られるよう、アクションのレスポンスは page.route() でスタブ化すること
• page.waitForTimeout() をハードコードしないこと — waitForSelector、waitForResponse、または Playwright の自動待機を使用します
• ローカルマシンで 60 秒未満でテストが実行されること

参考資料

• ExC Shell SPA 向け Playwright E2E パターン（iframe ナビゲーション、Spectrum セレクター、認証、アクションのスタブ化）については、references/e2e-testing-patterns.md を使用します。
• AEM 拡張機能のテストパターン（Extension Tester、ネストされた iframe、モーダルのライフサイクル、拡張ポイント）については、references/aem-extension-testing.md を使用します。
• GitHub Actions での Playwright の実行（ブラウザーのインストール、アーティファクトのアップロード、ヘッドレス設定）については、references/ci-integration.md を使用します。
• 基本の Playwright 設定テンプレートとして assets/playwright.config.ts を使用します。
• E2E テスト用の GitHub Actions ワークフローテンプレートとして assets/e2e-ci-workflow.yml を使用します。

よくある問題

• iframe が見つからない： ExC Shell の iframe セレクターは環境によって異なります。DevTools で確認してください。page.frameLocator('iframe[src*="your-app"]') を試すか、page.frames() で見つけてください。
• シェルのスピナーが消えない： SPA で runtime.done() が呼び出されていることを確認してください。E2E テストでは、シェル自体ではなく iframe 内のコンテンツが表示されるまで待ちます。
• Spectrum コンポーネントをクリックできない： React Spectrum コンポーネントは ARIA ロールをレンダリングします。CSS セレクターではなく getByRole() を使用してください。references/e2e-testing-patterns.md の「Spectrum セレクター」を確認してください。
• 認証ポップアップがテストを妨げる： シェル認証をスキップするローカル開発環境（aio app dev）でテストしてください。references/e2e-testing-patterns.md の認証セクションを参照してください。
• AEM 拡張機能が読み込まれない： Extension Tester には IMS ログインが必要です。拡張機能の読み込みには余裕のあるタイムアウト（10 秒以上）を設定してください。references/aem-extension-testing.md の「よくある落とし穴」を確認してください。
• CI でテストが不安定： リトライ（retries: 1）を追加し、アクション呼び出しには waitForResponse() を使用してください。ヘッドレス設定については references/ci-integration.md を確認してください。

チェーン

• appbuilder-ui-scaffolder からチェーンされます（UI コンポーネントの生成後に E2E テストを追加します）
• appbuilder-testing からチェーンされます（ユーザーが Jest のユニットテストを超えるブラウザーレベルの検証を求めている場合）
• appbuilder-cicd-pipeline へチェーンします（E2E テストのジョブを CI/CD パイプラインに追加します）