Ghi lại một lần.
Phát lại mãi mãi.

Thiết lập trong ba bước

Dựng mọi thứ bằng một lệnh, trỏ API của bạn về proxy, rồi ghi lại và commit. Ứng dụng chỉ chạy trên trình duyệt? init sẽ bỏ qua bước SSR giúp bạn.

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.

Hoặc tự kết nối bằng tay:

1. Cài đặt & dựng khung

   init viết cấu hình proxy, một Playwright fixture, một global teardown, package.json script, và (trên Next.js) kết nối việc gắn thẻ fetch SSR vào root layout của bạn — một cách không phá hoại.

   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. Trỏ API của ứng dụng bạn về proxy

   Điều duy nhất init không thể đoán: biến env nào chứa base URL API của bạn. Trỏ nó về proxy khi recorder được bật, về backend thật trong trường hợp còn lại — proxy không bao giờ chạy trong production.

   // 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`);

   Trên Next.js, init cũng thêm registerProxyFetch() vào root layout của bạn để gắn thẻ cho các lời gọi fetch phía máy chủ — một no-op trong production:

   // 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. Ghi lại, commit, phát lại

   Đặt MODE = 'record', chạy một lần dựa trên API thật, rồi lật sang 'replay' và commit. Các bản ghi nằm trong git — đó là điều làm CI tất định. Đừng gitignore chúng.

   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"