CIでの運用と保守 — 壊れにくいテストを維持する

name: E2E Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
 
jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - uses: actions/setup-node@v4
        with:
          node-version: 20
 
      - name: Install dependencies
        run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
 
      - name: Build application
        run: npm run build
 
      - name: Run E2E tests
        run: npx playwright test
 
      - name: Upload test report
        uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

// playwright.config.ts
export default defineConfig({
  workers: process.env.CI ? 2 : undefined,
});

jobs:
  e2e:
    strategy:
      matrix:
        shard: [1/3, 2/3, 3/3]
    steps:
      - run: npx playwright test --shard=${{ matrix.shard }}

// NG — 固定時間の待機
await page.waitForTimeout(3000);
await page.click('#submit');
 
// OK — Playwrightが自動で待つ
await page.getByRole('button', { name: '送信' }).click();

export default defineConfig({
  retries: process.env.CI ? 2 : 0,
});

test('ユーザーを作成できる', async ({ page }) => {
  const uniqueEmail = `test-${Date.now()}@example.com`;
  // このテスト専用のデータを使う
});

// 壊れやすい — CSSクラスやDOM構造に依存
page.locator('.btn-primary.submit-form');
page.locator('div > form > button:nth-child(2)');
 
// 壊れにくい — ユーザーに見える情報に依存
page.getByRole('button', { name: '送信' });
page.getByLabel('メールアドレス');

// playwright.config.ts — タグでテストを分類
// クリティカルパスには @critical タグを付ける

test('ログインできる @critical', async ({ page }) => { ... });
test('プロフィール画像を変更できる', async ({ page }) => { ... });

# CriticalだけPRで実行
npx playwright test --grep @critical
 
# 全テストはマージ後に実行
npx playwright test

# CIでアップロードされたレポートをダウンロードして確認
npx playwright show-report ./downloaded-report