테스팅 강좌 #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'); // 페이지 이동 X
  });

  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 + 자동화)