e2e-testing-automation

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 テスト
Cypress E2E Tests	Cypress E2E テスト
Selenium with Python (pytest)	Python（pytest）での Selenium
Page Object Model Pattern	ページオブジェクトモデルパターン

ベストプラクティス

✅ 推奨事項

• 安定したセレクターには data-testid 属性を使用します
• 保守性を高めるため、ページオブジェクトモデルを実装します
• 重要なユーザージャーニーを徹底的にテストします
• 複数のブラウザーでテストを実行します（クロスブラウザーテスト）
• sleep やタイムアウトの代わりに、明示的な待機を使用します
• 各テストの後にテストデータをクリーンアップします
• 失敗時にスクリーンショットを撮影します
• 可能な場合はテストの実行を並列化します

❌ 禁止事項

• 壊れやすい CSS セレクター（nth-child など）を使用しないでください
• あらゆる UI の組み合わせをテストしないでください（重要な経路に集中します）
• テスト間で状態を共有しないでください
• 固定の遅延（sleep／timeout）を使用しないでください
• 不安定なテストを放置しないでください
• 単体テストレベルのテストに E2E テストを使用しないでください
• サードパーティ製 UI コンポーネントを詳細にテストしないでください
• モバイル／レスポンシブのテストを省略しないでください