E2E テスト

E2E テストとは

E2E テスト (End-to-End Test) は、ユーザーの操作をブラウザ上で再現し、フロントエンドからバックエンド、データベースまでシステム全体の動作を検証するテスト手法である。「ユーザーがログインして商品を購入できるか」のようなシナリオを自動化する。

テストピラミッド

        /  E2E  \        ← 少数、遅い、高コスト
       / 結合テスト \
      / 単体テスト    \    ← 多数、速い、低コスト

レベル	速度	信頼性	コスト	数
単体テスト	最速	低い (モック)	低い	多い
結合テスト	中程度	中程度	中程度	中程度
E2E テスト	遅い	高い (実環境)	高い	少ない

Playwright での E2E テスト

import { test, expect } from '@playwright/test';

test('ユーザーがログインできる', async ({ page }) => {
  await page.goto('/login');
  await page.fill('[name="email"]', 'alice@example.com');
  await page.fill('[name="password"]', 'password123');
  await page.click('button[type="submit"]');

  await expect(page).toHaveURL('/dashboard');
  await expect(page.locator('h1')).toHaveText('Dashboard');
});

test('商品を検索して詳細を表示', async ({ page }) => {
  await page.goto('/');
  await page.fill('[name="search"]', 'TypeScript');
  await page.click('button[aria-label="検索"]');

  await expect(page.locator('.product-card')).toHaveCount(3);
  await page.click('.product-card >> nth=0');
  await expect(page.locator('h1')).toContainText('TypeScript');
});

ツール比較

Playwright はマルチブラウザ対応で自動待機と高速実行が特徴。Cypress は DX が良いがシングルブラウザ。Puppeteer は Chrome 専用で低レベル API を提供する。

CI での実行

# GitHub Actions
- uses: actions/checkout@v4
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
- uses: actions/upload-artifact@v4
  if: failure()
  with:
    name: playwright-report
    path: playwright-report/

E2E テストの書き方のコツ

ユーザーの行動シナリオを書き、実装の詳細をテストしない。data-testid で要素を特定し、CSS クラス名での特定は避ける。重要なフローだけ E2E にし、全てを E2E でカバーしようとしない。自動待機 (Playwright) を活用し、sleep でタイミングを合わせない。

フレイキーテスト (不安定なテスト)

E2E テストは環境依存で不安定になりやすい。タイミング問題には自動待機や waitFor を使う。テストデータの依存にはテストごとにデータをリセットする。ネットワーク遅延にはモックサーバーを使う。

さらに掘り下げるなら関連書籍が参考になる。