한 번 기록하세요.
영원히 재생하세요.

세 단계로 설정하기

한 번의 명령으로 모든 것을 스캐폴딩하고, API를 프록시로 연결한 뒤 기록하고 커밋하세요. 브라우저 전용 앱인가요? init 이 SSR 단계를 대신 건너뜁니다.

Set up test-proxy-recorder for end-to-end tests in this project, then follow the
instructions that `init` prints. Run these commands:

  npx @tanstack/intent@latest install
  npm install --save-dev test-proxy-recorder

Then run init, passing this project's backend API base URL as the target — find
it yourself from the app's env/config (the URL the app calls in dev); don't
assume the default:

  npx test-proxy-recorder init <your-backend-api-url> --port 8100 --dir ./e2e/recordings

Then complete the app-specific steps init prints: point the app's API base URL at
the proxy in dev/test only, tag server-side fetches (Next.js), add a smoke test,
and verify record → replay.

또는 직접 연결하기:

1. 설치 및 스캐폴딩

   init 은 프록시 설정, Playwright 픽스처, 전역 티어다운, package.json 스크립트를 작성하고, (Next.js의 경우) SSR fetch 태깅을 루트 레이아웃에 연결합니다. 비파괴적으로 동작합니다.

   npm install --save-dev test-proxy-recorder
   # http://localhost:3002 is your API endpoint; 8100 is the proxy. Flags are optional.
   npx test-proxy-recorder init http://localhost:3002 --port 8100 --dir ./e2e/recordings

2. 앱의 API를 프록시로 연결

   init 이 추측할 수 없는 유일한 것은 바로 API 기본 URL을 담고 있는 환경 변수입니다. 레코더가 활성화되어 있으면 프록시를, 그렇지 않으면 실제 백엔드를 가리키세요. 프록시는 프로덕션에서 절대 실행되지 않습니다.

   // Point your app at the proxy when the recorder is enabled, at the real backend otherwise.
   // The proxy never runs in production — TEST_PROXY_RECORDER_ENABLED is set only for e2e.
   const API_BASE =
     process.env.NODE_ENV === 'production' && !process.env.TEST_PROXY_RECORDER_ENABLED
       ? 'https://api.example.com'
       : 'http://localhost:8100'; // proxy address from `init`
   
   const res = await fetch(`${API_BASE}/todos`);

   Next.js의 경우 init 은 또한 루트 레이아웃에 registerProxyFetch() 를 추가하여 서버 측 fetch 호출에 태깅합니다. 프로덕션에서는 아무 동작도 하지 않습니다.

   // app/layout.tsx — tag server-side fetches so SSR is recorded/replayed
   import { registerProxyFetch } from 'test-proxy-recorder/nextjs';
   
   registerProxyFetch(); // no-op in production unless TEST_PROXY_RECORDER_ENABLED=true

3. 기록, 커밋, 재생

   MODE = 'record'로 설정하고 실제 API를 대상으로 한 번 실행한 뒤, 'replay' 로 전환하고 커밋하세요. 기록은 git에 보관됩니다. 그것이 CI를 결정적으로 만드는 이유입니다. gitignore에 넣지 마세요.

   import { test, expect } from '@playwright/test';
   import { playwrightProxy } from 'test-proxy-recorder';
   
   // Full-stack: the browser also talks to the proxy, so match its URL.
   // (Browser-only app? Match your real API domain instead, e.g. /api\.example\.com/.)
   const CLIENT_SIDE_URL = /localhost:8100/;
   
   // 'record' hits the real API and saves responses.
   // 'replay' serves them from disk — no network needed.
   const MODE = 'replay' as const;
   
   test.beforeEach(async ({ page }, testInfo) => {
     await playwrightProxy.before(page, testInfo, MODE, { url: CLIENT_SIDE_URL });
   });
   
   test('homepage loads', async ({ page }) => {
     await page.goto('/');
     await expect(page.getByText('Welcome')).toBeVisible();
   });

   # 1. Set MODE = 'record' in your test file, run against the real API
   npx playwright test --ui       # recordings written to e2e/recordings/
   
   # 2. Flip MODE back to 'replay' and commit the recordings
   git add e2e/recordings/
   git commit -m "add e2e recordings"