플레이라이트, Next.js, CI | E2E 테스트를 로컬에서 깔고 깃허브 액션에 붙이는 순서

Playwright 설치와 초기 설정
# npm
npm init playwright@latest

# 또는 pnpm
pnpm create playwright

# 선택 항목
# ✔ Where to put your end-to-end tests? › tests
# ✔ Add a GitHub Actions workflow? › Yes
# ✔ Install Playwright browsers? › Yes

playwright.config.ts — Next.js 로컬 서버 연동
import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',

  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },

  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],

  // 테스트 실행 전 Next.js 개발 서버 자동 시작
  webServer: {
    command: 'npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
  },
})

기본 E2E 테스트 예시 (tests/home.spec.ts)
import { test, expect } from '@playwright/test'

test('홈 페이지 제목 확인', async ({ page }) => {
  await page.goto('/')
  await expect(page).toHaveTitle(/tech.ambitstock/)
})

test('검색 기능 동작 확인', async ({ page }) => {
  await page.goto('/')

  // 검색창 찾기
  const searchInput = page.getByRole('searchbox')
  await searchInput.fill('Next.js')
  await searchInput.press('Enter')

  // 결과 페이지 확인
  await expect(page).toHaveURL(/search/)
  await expect(page.getByText('Next.js')).toBeVisible()
})

test('포스트 상세 페이지 OG 메타 확인', async ({ page }) => {
  await page.goto('/node-type-stripping-erasable-syntax-tsx-2026/')

  // OG title 메타 태그 확인
  const ogTitle = page.locator('meta[property="og:title"]')
  await expect(ogTitle).toHaveAttribute('content', /타입 스트리핑/)
})

.github/workflows/playwright.yml
name: Playwright E2E Tests
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

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

      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      # 브라우저 바이너리 캐시
      - name: Cache Playwright browsers
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: playwright-${{ hashFiles('package-lock.json') }}

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps

      - name: Run Playwright tests
        run: npx playwright test

      # 실패 시 리포트 업로드
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 7