e2e-testing-patterns

E2E テストパターン

信頼性が高く、高速で、保守しやすいエンドツーエンドテストスイートを構築し、迅速にコードをリリースするための自信を得るとともに、ユーザーより先にリグレッションを検出しましょう。

このスキルを使用する場面

• エンドツーエンドテストの自動化を実装するとき
• 不安定または信頼性の低いテストをデバッグするとき
• 重要なユーザーワークフローをテストするとき
• CI/CD テストパイプラインをセットアップするとき
• 複数のブラウザーでテストするとき
• アクセシビリティ要件を検証するとき
• レスポンシブデザインをテストするとき
• E2E テスト標準を確立するとき

コアコンセプト

1. E2E テストの基本

E2E でテストすべきもの:

• 重要なユーザージャーニー(ログイン、チェックアウト、サインアップ)
• 複雑なインタラクション(ドラッグアンドドロップ、複数ステップのフォーム)
• クロスブラウザー互換性
• 実際の API 統合
• 認証フロー

E2E でテストすべきでないもの:

• ユニットレベルのロジック(ユニットテストを使用)
• API コントラクト(統合テストを使用)
• エッジケース(遅すぎる)
• 内部実装の詳細

2. テストの思想

テストピラミッド:

        /\
       /E2E\         ← Few, focused on critical paths
      /─────\
     /Integr\        ← More, test component interactions
    /────────\
   /Unit Tests\      ← Many, fast, isolated
  /────────────\

ベストプラクティス:

• 実装ではなくユーザー行動をテストする
• テストを独立させる
• テストを決定論的にする
• 速度を最適化する
• CSS セレクターではなく data-testid を使用する

詳細なパターンと実例

詳細なパターンのドキュメントは references/details.md にあります。上記のナビゲーション階層では不十分な場合にそのファイルを読んでください。

ベストプラクティス

1. データ属性を使用する: 安定したセレクターには data-testid または data-cy を使用します
2. 壊れやすいセレクターを避ける: CSS クラスや DOM 構造に依存しないでください
3. ユーザー行動をテストする: 実装の詳細ではなく、クリック、入力、表示をテストします
4. テストを独立させる: 各テストは分離して実行されるべきです
5. テストデータをクリーンアップする: 各テストでテストデータを作成して破棄します
6. ページオブジェクトを使用する: ページのロジックをカプセル化します
7. 意味のあるアサーション: 実際にユーザーから見える動作を確認します
8. 速度を最適化する: 可能な場合はモックし、並列実行します

// ❌ Bad selectors
cy.get(".btn.btn-primary.submit-button").click();
cy.get("div > form > div:nth-child(2) > input").type("text");

// ✅ Good selectors (findBy* commands come from @testing-library/cypress;
// add `import "@testing-library/cypress/add-commands";` to your Cypress support file)
cy.findByRole("button", { name: "Submit" }).click();
cy.findByLabelText("Email address").type("[email protected]");
cy.get('[data-testid="email-input"]').type("[email protected]");

よくある落とし穴

• 不安定なテスト: 固定のタイムアウトではなく、適切な待機を使用してください
• 遅いテスト: 外部 API をモックし、並列実行を使用してください
• 過剰なテスト: E2E ですべてのエッジケースをテストしないでください
• 結合したテスト: テスト同士が依存し合わないようにしてください
• 不適切なセレクター: CSS クラスや nth-child を避けてください
• クリーンアップなし: 各テスト後にテストデータをクリーンアップしてください
• 実装のテスト: 内部ではなくユーザー行動をテストしてください

失敗するテストのデバッグ

// Playwright debugging
// 1. Run in headed mode
npx playwright test --headed

// 2. Run in debug mode
npx playwright test --debug

// 3. Use trace viewer (record with `use: { trace: 'on-first-retry' }` in the config)
npx playwright show-trace path/to/trace.zip
await page.screenshot({ path: 'screenshot.png' });

// 4. Add test.step for better reporting
test('checkout flow', async ({ page }) => {
    await test.step('Add item to cart', async () => {
        await page.goto('/products');
        await page.getByRole('button', { name: 'Add to Cart' }).click();
    });

    await test.step('Proceed to checkout', async () => {
        await page.goto('/cart');
        await page.getByRole('button', { name: 'Checkout' }).click();
    });
});

// 5. Inspect page state
await page.pause();  // Pauses execution, opens inspector