E2E テスト自動化

目次

• 概要
• 使用時機
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

エンドツーエンド (E2E) テストは、UI からすべてのバックエンドシステムを通じた完全なユーザーワークフローを検証し、アプリケーション全体がユーザーの視点から正しく機能することを確保します。E2E テストはブラウザを使用したリアルなユーザー操作をシミュレートし、認証、ナビゲーション、フォーム送信、結果の検証を処理します。

使用時機

• 重要なユーザージャーニーのテスト (サインアップ、チェックアウト、ログイン)
• マルチステップワークフローの検証
• 異なるブラウザとデバイス間でのテスト
• UI 変更に対する回帰テスト
• フロントエンド-バックエンド統合の検証
• リアルなユーザー操作を伴うテスト (クリック、入力、スクロール)
• デプロイメントのスモークテスト

クイックスタート

最小限の動作例:

// tests/e2e/checkout.spec.ts
import { test, expect, Page } from "@playwright/test";

test.describe("E-commerce Checkout Flow", () => {
  let page: Page;

  test.beforeEach(async ({ page: p }) => {
    page = p;
    await page.goto("/");
  });

  test("complete checkout flow as guest user", async () => {
    // 1. Browse and add product to cart
    await page.click("text=Shop Now");
    await page.click('[data-testid="product-1"]');
    await expect(page.locator("h1")).toContainText("Product Name");

    await page.click('button:has-text("Add to Cart")');
    await expect(page.locator(".cart-count")).toHaveText("1");

    // 2. Go to cart and proceed to checkout
    await page.click('[data-testid="cart-icon"]');
    await expect(page.locator(".cart-item")).toHaveCount(1);
    await page.click("text=Proceed to Checkout");

// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリ内の詳細な実装:

ガイド	内容
Playwright E2E Tests	Playwright E2E Tests
Cypress E2E Tests	Cypress E2E Tests
Selenium with Python (pytest)	Selenium with Python (pytest)
Page Object Model Pattern	Page Object Model パターン

ベストプラクティス

✅ すべきこと

• セレクタの安定性のために data-testid 属性を使用
• 保守性のために Page Object Model を実装
• 重要なユーザージャーニーを徹底的にテスト
• 複数のブラウザで実行 (クロスブラウザテスト)
• sleep/タイムアウトの代わりに明示的待機を使用
• 各テスト後にテストデータをクリーンアップ
• 失敗時にスクリーンショットを取得
• 可能な限りテスト実行を並列化

❌ してはいけないこと

• 脆弱な CSS セレクタを使用 (nth-child など)
• すべての可能な UI の組み合わせをテスト (重要なパスに焦点)
• テスト間でのステートの共有
• 固定遅延を使用 (sleep/タイムアウト)
• 不安定なテストを放置
• ユニットレベルテストのために E2E テストを実行
• サードパーティ UI コンポーネントの詳細なテスト
• モバイル/レスポンシブテストをスキップ