テスト講座 #6 PlaywrightでE2EとCI統合 — トラックの締めくくり

        ┌──────────────┐
        │     E2E      │      ← 主要シナリオ 5〜10個
        ├──────────────┤
        │  結合 (RTL)   │
        ├──────────────┤
        │   ユニット     │
        ├──────────────┤
        │    静的       │
        └──────────────┘

pnpm create playwright

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './e2e',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:5173',
    trace: 'on-first-retry',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
  webServer: {
    command: 'pnpm dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

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

test('ホームページがタイトルを表示する', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/My App/);
});

test('ログインリンクをクリックするとログインページへ遷移する', async ({ page }) => {
  await page.goto('/');
  await page.getByRole('link', { name: 'ログイン' }).click();
  await expect(page).toHaveURL('/login');
});

pnpm playwright test                  # headless
pnpm playwright test --headed         # ブラウザを表示
pnpm playwright test --ui             # ビジュアルUIモード（強力）
pnpm playwright test --debug          # デバッグモード（ステップ実行）

const button = page.getByRole('button', { name: '保存' });
// この時点ではまだDOMを見ていない

await button.click();
// このタイミングでelementを探し、見つからなければ自動で待つ

await page.getByRole('button', { name: '保存' }).click();
// ボタンが現れるのを待ち、enabledになるのを待ってクリック

await expect(page.getByRole('alert')).toHaveText('保存しました');
// alertが現れるのを待ち、テキストが一致するまで待つ

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

test.describe('認証フロー', () => {
  test('間違ったパスワードでログインするとエラーが表示される', async ({ page }) => {
    await page.goto('/login');

    await page.getByLabel('メール').fill('user@example.com');
    await page.getByLabel('パスワード').fill('wrong');
    await page.getByRole('button', { name: 'ログイン' }).click();

    await expect(page.getByRole('alert')).toContainText('パスワード');
    await expect(page).toHaveURL('/login'); // ページ遷移なし
  });

  test('正しい資格情報でログインするとダッシュボードへ遷移する', async ({ page }) => {
    await page.goto('/login');

    await page.getByLabel('メール').fill('user@example.com');
    await page.getByLabel('パスワード').fill('correct-password');
    await page.getByRole('button', { name: 'ログイン' }).click();

    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByRole('heading', { name: /ようこそ/ })).toBeVisible();
  });

  test('ダッシュボードからログアウトするとホームに戻る', async ({ page }) => {
    // 事前ログイン
    await page.goto('/login');
    await page.getByLabel('メール').fill('user@example.com');
    await page.getByLabel('パスワード').fill('correct-password');
    await page.getByRole('button', { name: 'ログイン' }).click();
    await expect(page).toHaveURL('/dashboard');

    // ログアウト
    await page.getByRole('button', { name: 'ログアウト' }).click();
    await expect(page).toHaveURL('/');
  });
});

import { test as setup } from '@playwright/test';

const authFile = '.auth/user.json';

setup('authenticate', async ({ page }) => {
  await page.goto('/login');
  await page.getByLabel('メール').fill('user@example.com');
  await page.getByLabel('パスワード').fill('correct-password');
  await page.getByRole('button', { name: 'ログイン' }).click();

  await page.waitForURL('/dashboard');

  // クッキーとlocalStorageをファイルに保存
  await page.context().storageState({ path: authFile });
});

projects: [
  { name: 'setup', testMatch: /.*\.setup\.ts/ },
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'], storageState: '.auth/user.json' },
    dependencies: ['setup'],
  },
],

test('サーバーが500を返すとエラー画面が出る', async ({ page }) => {
  await page.route('/api/posts', (route) => {
    route.fulfill({ status: 500, body: 'Internal Error' });
  });

  await page.goto('/posts');
  await expect(page.getByRole('alert')).toContainText('サーバーエラー');
});

import { Page, Locator } from '@playwright/test';

export class LoginPage {
  readonly emailInput: Locator;
  readonly passwordInput: Locator;
  readonly submitButton: Locator;
  readonly alert: Locator;

  constructor(public readonly page: Page) {
    this.emailInput = page.getByLabel('メール');
    this.passwordInput = page.getByLabel('パスワード');
    this.submitButton = page.getByRole('button', { name: 'ログイン' });
    this.alert = page.getByRole('alert');
  }

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

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

test('ログインフロー', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('user@example.com', 'correct-password');

  await expect(page).toHaveURL('/dashboard');
});

name: Playwright Tests

on:
  push:
    branches: [main]
  pull_request:

jobs:
  test:
    timeout-minutes: 30
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 22

      - uses: pnpm/action-setup@v4

      - name: Install dependencies
        run: pnpm install

      - name: Install Playwright browsers
        run: pnpm exec playwright install --with-deps

      - name: Run tests
        run: pnpm exec playwright test

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

name: Tests

on:
  push:
    branches: [main]
  pull_request:

jobs:
  unit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - uses: pnpm/action-setup@v4
      - run: pnpm install
      - run: pnpm test:run --coverage
      - uses: actions/upload-artifact@v4
        with:
          name: coverage
          path: coverage/

  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - uses: pnpm/action-setup@v4
      - run: pnpm install
      - run: pnpm exec playwright install --with-deps
      - run: pnpm exec playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

- uses: davelosert/vitest-coverage-report-action@v2
  if: github.event_name == 'pull_request'

test('ホームページのビジュアルリグレッション', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('home.png');
});

#1 — 図（ピラミッド vs トロフィー）
#2 — Vitest（ユニット + そのセットアップ）
#3 — RTL（結合への第一歩）
#4 — MSW（ネットワーク傍受 = 結合の核）
#5 — userEvent + フォーム（ユーザー入力の結合）
#6 — Playwright + CI（E2E + 自動化）