브라우저 흐름 테스트: 컴포넌트 테스트가 놓치는 연결을 어떻게 검증하는가

import ProfileNameForm from './profile-name-form'
 
async function saveName(name: string) {
  const response = await fetch('/api/profiles', {
    method: 'PUT',
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({ name }),
  })
 
  if (!response.ok) {
    throw new Error('프로필 저장에 실패했습니다.')
  }
 
  window.location.assign('/profile/saved')
}
 
export default function ProfilePage() {
  return <ProfileNameForm initialName="이전 이름" saveName={saveName} />
}

import ProfilePage from './profile-page'
 
export default function App() {
  if (window.location.pathname === '/profile/saved') {
    return <h1>프로필 저장 완료</h1>
  }
 
  return <ProfilePage />
}

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './app'
 
const rootElement = document.getElementById('root')
 
if (!rootElement) {
  throw new Error('root 요소를 찾을 수 없습니다.')
}
 
createRoot(rootElement).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

pnpm exec tsc --noEmit

실제로 실행함  ProfileNameForm, React state, 입력·버튼·상태 문구
대역으로 바꿈  페이지가 만든 saveName 함수
실행하지 않음  fetch URL, HTTP 응답, window.location.assign, 새 페이지 로드

pnpm add -D @playwright/[email protected]
pnpm exec playwright install chromium
node --version
pnpm exec playwright --version

import { defineConfig, devices } from '@playwright/test'
 
export default defineConfig({
  testDir: './e2e',
  retries: 1,
  reporter: [['html', { open: 'never' }]],
  use: {
    baseURL: 'http://127.0.0.1:4173',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
  webServer: {
    command: 'pnpm exec vite --host 127.0.0.1 --port 4173',
    url: 'http://127.0.0.1:4173/profile',
    reuseExistingServer: false,
  },
})

import { expect, test } from '@playwright/test'
 
test('프로필 이름을 저장하고 완료 페이지로 이동한다', async ({ page }) => {
  let receivedName: string | undefined
 
  await page.route('**/api/**', async (route) => {
    const request = route.request()
    const pathname = new URL(request.url()).pathname
 
    if (pathname !== '/api/profile' || request.method() !== 'PUT') {
      await route.fulfill({
        status: 404,
        json: { message: 'not found' },
      })
      return
    }
 
    const body = request.postDataJSON() as { name?: string }
    receivedName = body.name
    await route.fulfill({
      status: 200,
      json: { name: receivedName },
    })
  })
 
  await page.goto('/profile')
  await page.getByLabel('이름').fill('새 이름')
  await page.getByRole('button', { name: '저장' }).click()
 
  await expect(page).toHaveURL(/\/profile\/saved$/)
  await expect(
    page.getByRole('heading', { name: '프로필 저장 완료' }),
  ).toBeVisible()
  expect(receivedName).toBe('새 이름')
})

pnpm exec playwright test e2e/profile-save.spec.ts --project=chromium

 async function saveName(name: string) {
-  const response = await fetch('/api/profiles', {
+  const response = await fetch('/api/profile', {
     method: 'PUT',

1. 실제 Chromium이 /profile 문서를 연다.
2. 사용자가 이름 입력을 지우고 새 값을 쓴다.
3. 저장 버튼이 React 폼 제출을 시작한다.
4. 페이지가 PUT /api/profile과 { name: "새 이름" }을 보낸다.
5. 통제한 200 응답 뒤 브라우저가 /profile/saved로 이동한다.
6. 새 문서에서 프로필 저장 완료 제목이 보인다.

// 피한다. 1초가 충분하다는 보장이 없다.
await page.waitForTimeout(1_000)
expect(page.url()).toContain('/profile/saved')
 
// 실제 완료 조건을 제한 시간까지 다시 확인한다.
await expect(page).toHaveURL(/\/profile\/saved$/)

브라우저 + 통제 API 응답  프론트엔드 요청 모양, 로딩·오류 처리, URL 이동을 빠르게 검증
브라우저 + 실제 테스트 API  프론트엔드와 서버 계약, 인증, 저장 결과까지 통합 검증
운영 점검                 실제 배포 주소, 비밀값, 네트워크와 운영 데이터 경계를 확인

pnpm exec playwright test e2e/profile-save.spec.ts --project=chromium --trace=on
pnpm exec playwright show-report

문제       컴포넌트 테스트는 통과하지만 저장 뒤 완료 페이지로 이동하지 않음
잘못된 판단 사용자처럼 버튼을 눌렀으므로 실제 페이지 연결도 검증됐다고 생각함
관찰       Chromium 흐름에서 PUT /api/profiles가 404이고 URL이 /profile에 머묾
원인       컴포넌트 테스트가 페이지의 실제 saveName, fetch URL과 이동을 대역으로 제거함
행동       실제 페이지를 열고 API 경로·본문·최종 URL·완료 제목을 한 흐름에서 확인함
검증       /api/profile 수정 뒤 요청 본문과 /profile/saved 화면이 모두 통과함