proxy-setup

test-proxy-recorder — Proxy Setup

test-proxy-recorder runs an HTTP proxy that records real API responses to disk (.mock.json for server-side, .har for browser-side) and replays them in Playwright tests without a live backend.

Two recording mechanisms work independently or together:

Mechanism	File	Records
Proxy	.mock.json	Server-side (SSR) fetches from Node.js
HAR	.har	Browser-side fetch calls, Chrome extension traffic

Setup

Browser-only / SPA / Chrome extension

No backend proxy needed for recording — only the proxy process for session management via /__control.

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  webServer: {
    command: 'test-proxy-recorder https://api.example.com --port 8100 --dir ./e2e/recordings',
    url: 'http://localhost:8100/__control',
    reuseExistingServer: true,
    timeout: 15_000,
  },
});

// e2e/fixtures.ts
import { test as base, type Page } from '@playwright/test';
import { playwrightProxy } from 'test-proxy-recorder';

const CLIENT_SIDE_URL = /api\.example\.com/;

// Change to 'record' to hit the real API and update recordings.
const MODE = 'replay' as const;

export const test = base.extend<{ page: Page }>({
  page: async ({ context }, use, testInfo) => {
    const page = await context.newPage();
    await playwrightProxy.before(page, testInfo, MODE, { url: CLIENT_SIDE_URL });
    await use(page);
  },
});
export { expect } from '@playwright/test';

Full-stack (SSR + browser)

The app's API base URL must be pointed at the proxy, not the real backend.

// package.json
{
  "scripts": {
    "proxy": "test-proxy-recorder http://localhost:3002 --port 8100 --dir ./e2e/recordings",
    "start:all": "concurrently \"pnpm proxy\" \"INTERNAL_API_URL=http://localhost:8100 pnpm start\"",
    "test:e2e": "pnpm build && concurrently --kill-others --success first --names services,tests \"pnpm start:all\" \"wait-on http://127.0.0.1:3000 http://127.0.0.1:8100/__control && playwright test --retries 1\"",
    "test:e2e:record": "pnpm build && playwright test --workers 1 --ui"
  }
}