Playwright로 시작하는 E2E 테스트 - React로 시작하는 TDD 번외편

Getting Started with E2E Testing using Playwright - TDD with React Extra

npm init playwright@latest

import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  // ... (중간 생략)
 
  // [설정] 테스트 시작 전 로컬 서버를 자동으로 실행합니다.
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },
});

import { test, expect } from '@playwright/test';
 
test('메인 페이지 접속 후 카운터 동작 확인', async ({ page }) => {
  // 1. 페이지 접속 (localhost:5173)
  await page.goto('http://localhost:5173');
 
  // 2. 초기 상태 확인 ("Vite + React" 글자가 보이는가?)
  await expect(page.getByText('Vite + React')).toBeVisible();
 
  // 3. 버튼 클릭 ("count is 0" 버튼 찾아서 클릭)
  // Vite 초기 템플릿 기준 버튼 텍스트입니다. 우리가 만든 Counter라면 '+' 버튼을 찾으면 됩니다.
  const button = page.getByRole('button', { name: /count is/i });
  await expect(button).toBeVisible();
  
  await button.click();
 
  // 4. 결과 검증 (숫자가 1로 바뀌었는가?)
  await expect(button).toHaveText('count is 1');
});

npx playwright test --ui

npx playwright codegen http://localhost:5173

git clone https://github.com/PROMLEE/my-tdd-app.git
cd my-tdd-app
git checkout extra-playwright