Graba una vez.
Reproduce para siempre.

Configúralo en tres pasos

Genera todo el andamiaje con un solo comando, apunta tu API al proxy, luego graba y haz commit. ¿App solo de navegador? init se salta el paso de SSR por ti.

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.

O cablea a mano:

1. Instala y genera el andamiaje

   init escribe la config del proxy, un fixture de Playwright, un teardown global y los scripts de package.json y, en Next.js, cablea el etiquetado de los fetch SSR en tu root layout — de forma no destructiva.

   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. Apunta la API de tu app al proxy

   Lo único que init no puede adivinar: qué variable de entorno guarda la URL base de tu API. Apúntala al proxy cuando el grabador está activo, y al backend real en caso contrario — el proxy nunca se ejecuta en producción.

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

   En Next.js, init también añade registerProxyFetch() a tu root layout para etiquetar las llamadas del lado del servidor fetch — un no-op en producción:

   // 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. Graba, haz commit, reproduce

   Establece MODE = 'record', ejecuta una vez contra la API real, luego cambia a 'replay' y haz commit. Las grabaciones viven en git — eso es lo que hace a CI determinista. No las pongas en .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"