test-proxy-recorder 0.1.3 → 0.1.5

package/README.md

@@ -191,7 +191,7 @@ interface ControlRequest {
 ### Playwright Integration API
 
 ```typescript
-import { playwrightProxy } from 'test-proxy-recorder';
+import { playwrightProxy, setProxyMode } from 'test-proxy-recorder';
 
 // Main helper object for use with Playwright tests
 const playwrightProxy = {
@@ -203,14 +203,84 @@ const playwrightProxy = {
 };
 ```
 
-## Recording Format
+### Global Teardown and Hooks Setup (Recommended)
+
+For robust test setups, it's recommended to configure global teardown and afterEach hooks to ensure the proxy is properly reset even when tests fail. This prevents the proxy from staying in record/replay mode, which could affect subsequent test runs.
+
+#### 1. Create Global Teardown File
+
+Create `e2e/global-teardown.ts` to reset the proxy mode after all tests complete:
+
+```typescript
+import { setProxyMode } from 'test-proxy-recorder';
+
+async function globalTeardown() {
+  await setProxyMode('transparent');
+}
+
+export default globalTeardown;
+```
+
+#### 2. Create Global Hooks File
+
+Create `e2e/global-hooks.ts` to ensure proxy cleanup happens after each test, even on failure:
 
-Recordings are stored as JSON files in the recordings directory:
+```typescript
+import { test } from '@playwright/test';
+import { playwrightProxy } from 'test-proxy-recorder';
 
+/**
+ * Global afterEach hook to ensure proxy cleanup happens even when tests fail.
+ * This will run after every test across all test files.
+ */
+test.afterEach(async ({}, testInfo) => {
+  try {
+    await playwrightProxy.after(testInfo);
+  } catch (error) {
+    console.error('Error during proxy cleanup:', error);
+    // Don't throw - we want cleanup to continue even if this fails
+  }
+});
 ```
+
+#### 3. Configure Playwright
+
+Update your `playwright.config.ts` to include the global teardown:
+
+```typescript
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './e2e',
+  globalTeardown: './e2e/global-teardown.ts',
+  // ... rest of your config
+});
+```
+
+#### 4. Import Global Hooks in Your Base Page or Test Setup
+
+Import the global hooks file in your base test file or base page to register the afterEach hook:
+
+```typescript
+// In your e2e/basePage.ts or similar base test file
+import { test as base } from '@playwright/test';
+
+// Import global hooks to register afterEach for proxy cleanup
+import './global-hooks';
+
+export const test = base.extend({
+  // your fixtures
+});
+```
+
+## Recording Format
+
+Recordings are stored as JSON files with `.mock.json` extension in the recordings directory:
+
+```text
 recordings/
-├── test-session-1.json
-├── test-session-2.json
+├── test-session-1.mock.json
+├── test-session-2.mock.json
 └── ...
 ```
 
@@ -228,11 +298,7 @@ Each recording contains:
    test-proxy-recorder http://localhost:8000 --port 8100
    ```
 
-2. **Configure your app** to use the proxy:
-
-   ```bash
-   export EXTERNAL_API_URL=http://localhost:8100 yarn dev
-   ```
+2. **Configure your app** to use the proxy (point your app to the proxy port, e.g., 8100)
 
 3. **Record responses** (first run):
 

package/dist/{index-DfFpm8mB.d.cts → index-CBjvm5rb.d.cts}

@@ -28,6 +28,7 @@ interface Recording {
     response?: RecordedResponse;
     timestamp: string;
     key: string;
+    sequence: number;
 }
 interface WebSocketMessage {
     direction: 'client-to-server' | 'server-to-client';
@@ -46,16 +47,20 @@ interface RecordingSession {
     websocketRecordings: WebSocketRecording[];
 }
 
-type PlaywrightTestInfo = Pick<TestInfo, 'title'>;
+type PlaywrightTestInfo = Pick<TestInfo, 'title' | 'titlePath'>;
 /**
  * Set the proxy mode for a given session
  * @param mode - The proxy mode to set (recording, replay, transparent)
  * @param sessionId - Unique identifier for the session
  * @param timeout - Optional timeout in milliseconds
  */
-declare function setProxyMode(mode: Mode, sessionId: string, timeout?: number): Promise<void>;
+declare function setProxyMode(mode: Mode, sessionId?: string, timeout?: number): Promise<void>;
 /**
  * Generate a session ID from test info
+ * Uses titlePath to create folder structure with test file name
+ * Supports both .spec.ts and .test.ts extensions
+ * Example: ['jobs/Create.spec.ts', 'create a job'] becomes 'jobs/Create__create-a-job'
+ * Example: ['users/Auth.test.ts', 'login test'] becomes 'users/Auth__login-test'
  * @param testInfo - Playwright test info object
  */
 declare function generateSessionId(testInfo: PlaywrightTestInfo): string;

package/dist/{index-DfFpm8mB.d.ts → index-CBjvm5rb.d.ts}

@@ -28,6 +28,7 @@ interface Recording {
     response?: RecordedResponse;
     timestamp: string;
     key: string;
+    sequence: number;
 }
 interface WebSocketMessage {
     direction: 'client-to-server' | 'server-to-client';
@@ -46,16 +47,20 @@ interface RecordingSession {
     websocketRecordings: WebSocketRecording[];
 }
 
-type PlaywrightTestInfo = Pick<TestInfo, 'title'>;
+type PlaywrightTestInfo = Pick<TestInfo, 'title' | 'titlePath'>;
 /**
  * Set the proxy mode for a given session
  * @param mode - The proxy mode to set (recording, replay, transparent)
  * @param sessionId - Unique identifier for the session
  * @param timeout - Optional timeout in milliseconds
  */
-declare function setProxyMode(mode: Mode, sessionId: string, timeout?: number): Promise<void>;
+declare function setProxyMode(mode: Mode, sessionId?: string, timeout?: number): Promise<void>;
 /**
  * Generate a session ID from test info
+ * Uses titlePath to create folder structure with test file name
+ * Supports both .spec.ts and .test.ts extensions
+ * Example: ['jobs/Create.spec.ts', 'create a job'] becomes 'jobs/Create__create-a-job'
+ * Example: ['users/Auth.test.ts', 'login test'] becomes 'users/Auth__login-test'
  * @param testInfo - Playwright test info object
  */
 declare function generateSessionId(testInfo: PlaywrightTestInfo): string;

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 var fs = require('fs/promises');
 var http = require('http');
+var https = require('https');
 var httpProxy = require('http-proxy');
 var ws = require('ws');
 var path = require('path');
@@ -11,6 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var fs__default = /*#__PURE__*/_interopDefault(fs);
 var http__default = /*#__PURE__*/_interopDefault(http);
+var https__default = /*#__PURE__*/_interopDefault(https);
 var httpProxy__default = /*#__PURE__*/_interopDefault(httpProxy);
 var path__default = /*#__PURE__*/_interopDefault(path);
 var filenamify__default = /*#__PURE__*/_interopDefault(filenamify);
@@ -33,7 +35,7 @@ var Modes = {
 };
 var JSON_INDENT_SPACES = 2;
 function getRecordingPath(recordingsDir, id) {
-  return path__default.default.join(recordingsDir, `${id}.json`);
+  return path__default.default.join(recordingsDir, `${id}.mock.json`);
 }
 async function loadRecordingSession(filePath) {
   const fileContent = await fs__default.default.readFile(filePath, "utf8");
@@ -41,6 +43,8 @@ async function loadRecordingSession(filePath) {
 }
 async function saveRecordingSession(recordingsDir, session) {
   const filePath = getRecordingPath(recordingsDir, session.id);
+  const dirPath = path__default.default.dirname(filePath);
+  await fs__default.default.mkdir(dirPath, { recursive: true });
   await fs__default.default.writeFile(
     filePath,
     JSON.stringify(session, null, JSON_INDENT_SPACES)
@@ -93,6 +97,10 @@ var ProxyServer = class {
   proxy;
   currentSession;
   recordingsDir;
+  requestSequenceMap;
+  // Track sequence per request key
+  replaySequenceMap;
+  // Track replay position per request key
   constructor(targets, recordingsDir) {
     this.targets = targets;
     this.currentTargetIndex = 0;
@@ -102,6 +110,8 @@ var ProxyServer = class {
     this.modeTimeout = null;
     this.currentSession = null;
     this.recordingsDir = recordingsDir;
+    this.requestSequenceMap = /* @__PURE__ */ new Map();
+    this.replaySequenceMap = /* @__PURE__ */ new Map();
     this.proxy = httpProxy__default.default.createProxyServer({
       secure: false,
       changeOrigin: true
@@ -119,6 +129,7 @@ var ProxyServer = class {
       this.handleUpgrade(req, socket, head);
     });
     server.listen(port, () => {
+      process.env.TEST_PROXY_RECORDER_PORT = String(port);
       this.logServerStartup(port);
     });
     return server;
@@ -140,10 +151,19 @@ var ProxyServer = class {
     res.end(JSON.stringify({ error: "Proxy error", message: err.message }));
   }
   handleProxyResponse(proxyRes, req) {
+    this.addCorsHeaders(proxyRes, req);
     if (this.mode === Modes.record && this.recordingId) {
       this.recordResponse(req, proxyRes);
     }
   }
+  addCorsHeaders(proxyRes, req) {
+    const origin = req.headers.origin;
+    proxyRes.headers["access-control-allow-origin"] = origin || "*";
+    proxyRes.headers["access-control-allow-credentials"] = "true";
+    proxyRes.headers["access-control-allow-headers"] = req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization";
+    proxyRes.headers["access-control-allow-methods"] = "GET, POST, PUT, DELETE, PATCH, OPTIONS";
+    proxyRes.headers["access-control-expose-headers"] = "*";
+  }
   getTarget() {
     const target = this.targets[this.currentTargetIndex];
     this.currentTargetIndex = (this.currentTargetIndex + 1) % this.targets.length;
@@ -218,6 +238,7 @@ var ProxyServer = class {
     this.recordingId = id;
     this.replayId = null;
     this.currentSession = { id, recordings: [], websocketRecordings: [] };
+    this.requestSequenceMap.clear();
     console.log(`Switched to record mode with ID: ${id}`);
   }
   switchToReplayMode(id) {
@@ -228,6 +249,7 @@ var ProxyServer = class {
     this.replayId = id;
     this.recordingId = null;
     this.currentSession = null;
+    this.replaySequenceMap.clear();
     console.log(`Switched to replay mode with ID: ${id}`);
   }
   setupModeTimeout(timeout) {
@@ -259,6 +281,8 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
+    const currentSequence = this.requestSequenceMap.get(key) || 0;
+    this.requestSequenceMap.set(key, currentSequence + 1);
     const record = {
       request: {
         method: req.method,
@@ -267,7 +291,8 @@ var ProxyServer = class {
         body: body || null
       },
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      key
+      key,
+      sequence: currentSequence
     };
     this.currentSession.recordings.push(record);
   }
@@ -276,7 +301,9 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
-    const record = this.currentSession.recordings.find((r) => r.key === key);
+    const record = this.currentSession.recordings.findLast(
+      (r) => r.key === key && !r.response
+    );
     if (!record) {
       console.error("Request record not found for response:", key);
       return;
@@ -301,17 +328,31 @@ var ProxyServer = class {
     const filePath = getRecordingPath(this.recordingsDir, this.replayId);
     try {
       const session = await loadRecordingSession(filePath);
-      const record = session.recordings.find((r) => r.key === key);
+      const currentSequence = this.replaySequenceMap.get(key) || 0;
+      const record = session.recordings.find(
+        (r) => r.key === key && r.sequence === currentSequence
+      );
       if (!record) {
-        throw new Error(`No recording found for ${key}`);
+        throw new Error(
+          `No recording found for ${key} with sequence ${currentSequence}`
+        );
       }
       if (!record.response) {
         throw new Error("No response recorded for this request");
       }
+      this.replaySequenceMap.set(key, currentSequence + 1);
       const { statusCode, headers, body } = record.response;
-      res.writeHead(statusCode, headers);
+      const origin = req.headers.origin;
+      const responseHeaders = {
+        ...headers,
+        "access-control-allow-origin": origin || "*",
+        "access-control-allow-credentials": "true"
+      };
+      res.writeHead(statusCode, responseHeaders);
       res.end(body);
-      console.log(`Replayed: ${req.method} ${req.url}`);
+      console.log(
+        `Replayed: ${req.method} ${req.url} (sequence: ${currentSequence})`
+      );
     } catch (error) {
       this.handleReplayError(res, error, key, filePath);
     }
@@ -327,6 +368,9 @@ var ProxyServer = class {
     });
   }
   async handleRequest(req, res) {
+    if (req.method === "OPTIONS") {
+      return this.handleCorsPreflightRequest(req, res);
+    }
     if (req.url === CONTROL_ENDPOINT) {
       return this.handleControlRequest(req, res);
     }
@@ -335,23 +379,63 @@ var ProxyServer = class {
     }
     await this.handleProxyRequest(req, res);
   }
+  handleCorsPreflightRequest(req, res) {
+    const origin = req.headers.origin;
+    res.writeHead(HTTP_STATUS_OK, {
+      "Access-Control-Allow-Origin": origin || "*",
+      "Access-Control-Allow-Credentials": "true",
+      "Access-Control-Allow-Headers": req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Max-Age": "86400"
+      // 24 hours
+    });
+    res.end();
+  }
   async handleProxyRequest(req, res) {
     const target = this.getTarget();
     console.log(`[${this.mode}] ${req.method} ${req.url} -> ${target}`);
     if (this.mode === Modes.record) {
-      await this.bufferRequestForRecord(req);
+      await this.bufferAndProxyRequest(req, res, target);
+    } else {
+      this.proxy.web(req, res, { target });
     }
-    this.proxy.web(req, res, { target });
   }
-  async bufferRequestForRecord(req) {
+  async bufferAndProxyRequest(req, res, target) {
     const chunks = [];
     req.on("data", (chunk) => {
       chunks.push(chunk);
     });
-    req.on("end", async () => {
-      const body = Buffer.concat(chunks).toString("utf8");
-      await this.saveRequestRecord(req, body);
+    await new Promise((resolve) => {
+      req.on("end", () => resolve());
     });
+    const body = Buffer.concat(chunks).toString("utf8");
+    await this.saveRequestRecord(req, body);
+    const targetUrl = new URL(target);
+    const isHttps = targetUrl.protocol === "https:";
+    const requestModule = isHttps ? https__default.default : http__default.default;
+    const defaultPort = isHttps ? 443 : 80;
+    const proxyReq = requestModule.request(
+      {
+        hostname: targetUrl.hostname,
+        port: targetUrl.port || defaultPort,
+        path: req.url,
+        method: req.method,
+        headers: req.headers
+      },
+      (proxyRes) => {
+        this.addCorsHeaders(proxyRes, req);
+        this.recordResponse(req, proxyRes);
+        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+        proxyRes.pipe(res);
+      }
+    );
+    proxyReq.on("error", (err) => {
+      this.handleProxyError(err, req, res);
+    });
+    if (chunks.length > 0) {
+      proxyReq.write(Buffer.concat(chunks));
+    }
+    proxyReq.end();
   }
   handleUpgrade(req, socket, head) {
     if (this.mode === Modes.replay) {
@@ -524,15 +608,25 @@ var ProxyServer = class {
 };
 
 // src/playwright/index.ts
-var INTERNAL_API_URL = process.env.INTERNAL_API_URL || "http://localhost:8100";
+function getProxyPort() {
+  const envPort = process.env.TEST_PROXY_RECORDER_PORT;
+  if (envPort) {
+    const parsed = Number.parseInt(envPort, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return 8100;
+}
 async function setProxyMode(mode, sessionId, timeout) {
+  const proxyPort = getProxyPort();
   try {
     const body = {
       mode,
       id: sessionId,
       ...timeout && { timeout }
     };
-    const response = await fetch(`${INTERNAL_API_URL}/__control`, {
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body)
@@ -549,8 +643,34 @@ async function setProxyMode(mode, sessionId, timeout) {
     throw error;
   }
 }
+function parseSpecFilePath(specPath) {
+  const folderMatch = specPath.match(/^(.+?)\/([^/]+)\.(spec|test)\.ts$/);
+  if (folderMatch) {
+    return { folder: folderMatch[1], fileName: folderMatch[2] };
+  }
+  const fileMatch = specPath.match(/^([^/]+)\.(spec|test)\.ts$/);
+  if (fileMatch) {
+    return { folder: null, fileName: fileMatch[1] };
+  }
+  return { folder: null, fileName: null };
+}
+function buildSessionPath(folder, fileName, testName) {
+  if (folder && fileName) {
+    return `${folder}/${fileName}__${testName}`;
+  }
+  if (fileName) {
+    return `${fileName}__${testName}`;
+  }
+  return testName;
+}
 function generateSessionId(testInfo) {
-  return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  const { titlePath } = testInfo;
+  if (!titlePath || titlePath.length === 0) {
+    return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  }
+  const { folder, fileName } = parseSpecFilePath(titlePath[0]);
+  const testName = titlePath.at(-1).toLowerCase().replaceAll(/\s+/g, "-");
+  return buildSessionPath(folder, fileName, testName);
 }
 async function startRecording(testInfo) {
   const sessionId = generateSessionId(testInfo);

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import http from 'node:http';
-export { C as ControlRequest, M as Mode, P as PlaywrightTestInfo, R as Recording, a as RecordingSession, W as WebSocketRecording, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from './index-DfFpm8mB.cjs';
+export { C as ControlRequest, M as Mode, P as PlaywrightTestInfo, R as Recording, a as RecordingSession, W as WebSocketRecording, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from './index-CBjvm5rb.cjs';
 import '@playwright/test';
 
 declare class ProxyServer {
@@ -12,12 +12,15 @@ declare class ProxyServer {
     private proxy;
     private currentSession;
     private recordingsDir;
+    private requestSequenceMap;
+    private replaySequenceMap;
     constructor(targets: string[], recordingsDir: string);
     init(): Promise<void>;
     listen(port: number): http.Server;
     private setupProxyEventHandlers;
     private handleProxyError;
     private handleProxyResponse;
+    private addCorsHeaders;
     private getTarget;
     private handleControlRequest;
     private clearModeTimeout;
@@ -32,8 +35,9 @@ declare class ProxyServer {
     private handleReplayRequest;
     private handleReplayError;
     private handleRequest;
+    private handleCorsPreflightRequest;
     private handleProxyRequest;
-    private bufferRequestForRecord;
+    private bufferAndProxyRequest;
     private handleUpgrade;
     private handleRecordWebSocket;
     private handleReplayWebSocket;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import http from 'node:http';
-export { C as ControlRequest, M as Mode, P as PlaywrightTestInfo, R as Recording, a as RecordingSession, W as WebSocketRecording, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from './index-DfFpm8mB.js';
+export { C as ControlRequest, M as Mode, P as PlaywrightTestInfo, R as Recording, a as RecordingSession, W as WebSocketRecording, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from './index-CBjvm5rb.js';
 import '@playwright/test';
 
 declare class ProxyServer {
@@ -12,12 +12,15 @@ declare class ProxyServer {
     private proxy;
     private currentSession;
     private recordingsDir;
+    private requestSequenceMap;
+    private replaySequenceMap;
     constructor(targets: string[], recordingsDir: string);
     init(): Promise<void>;
     listen(port: number): http.Server;
     private setupProxyEventHandlers;
     private handleProxyError;
     private handleProxyResponse;
+    private addCorsHeaders;
     private getTarget;
     private handleControlRequest;
     private clearModeTimeout;
@@ -32,8 +35,9 @@ declare class ProxyServer {
     private handleReplayRequest;
     private handleReplayError;
     private handleRequest;
+    private handleCorsPreflightRequest;
     private handleProxyRequest;
-    private bufferRequestForRecord;
+    private bufferAndProxyRequest;
     private handleUpgrade;
     private handleRecordWebSocket;
     private handleReplayWebSocket;

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import fs from 'fs/promises';
 import http from 'http';
+import https from 'https';
 import httpProxy from 'http-proxy';
 import { WebSocket, WebSocketServer } from 'ws';
 import path from 'path';
@@ -23,7 +24,7 @@ var Modes = {
 };
 var JSON_INDENT_SPACES = 2;
 function getRecordingPath(recordingsDir, id) {
-  return path.join(recordingsDir, `${id}.json`);
+  return path.join(recordingsDir, `${id}.mock.json`);
 }
 async function loadRecordingSession(filePath) {
   const fileContent = await fs.readFile(filePath, "utf8");
@@ -31,6 +32,8 @@ async function loadRecordingSession(filePath) {
 }
 async function saveRecordingSession(recordingsDir, session) {
   const filePath = getRecordingPath(recordingsDir, session.id);
+  const dirPath = path.dirname(filePath);
+  await fs.mkdir(dirPath, { recursive: true });
   await fs.writeFile(
     filePath,
     JSON.stringify(session, null, JSON_INDENT_SPACES)
@@ -83,6 +86,10 @@ var ProxyServer = class {
   proxy;
   currentSession;
   recordingsDir;
+  requestSequenceMap;
+  // Track sequence per request key
+  replaySequenceMap;
+  // Track replay position per request key
   constructor(targets, recordingsDir) {
     this.targets = targets;
     this.currentTargetIndex = 0;
@@ -92,6 +99,8 @@ var ProxyServer = class {
     this.modeTimeout = null;
     this.currentSession = null;
     this.recordingsDir = recordingsDir;
+    this.requestSequenceMap = /* @__PURE__ */ new Map();
+    this.replaySequenceMap = /* @__PURE__ */ new Map();
     this.proxy = httpProxy.createProxyServer({
       secure: false,
       changeOrigin: true
@@ -109,6 +118,7 @@ var ProxyServer = class {
       this.handleUpgrade(req, socket, head);
     });
     server.listen(port, () => {
+      process.env.TEST_PROXY_RECORDER_PORT = String(port);
       this.logServerStartup(port);
     });
     return server;
@@ -130,10 +140,19 @@ var ProxyServer = class {
     res.end(JSON.stringify({ error: "Proxy error", message: err.message }));
   }
   handleProxyResponse(proxyRes, req) {
+    this.addCorsHeaders(proxyRes, req);
     if (this.mode === Modes.record && this.recordingId) {
       this.recordResponse(req, proxyRes);
     }
   }
+  addCorsHeaders(proxyRes, req) {
+    const origin = req.headers.origin;
+    proxyRes.headers["access-control-allow-origin"] = origin || "*";
+    proxyRes.headers["access-control-allow-credentials"] = "true";
+    proxyRes.headers["access-control-allow-headers"] = req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization";
+    proxyRes.headers["access-control-allow-methods"] = "GET, POST, PUT, DELETE, PATCH, OPTIONS";
+    proxyRes.headers["access-control-expose-headers"] = "*";
+  }
   getTarget() {
     const target = this.targets[this.currentTargetIndex];
     this.currentTargetIndex = (this.currentTargetIndex + 1) % this.targets.length;
@@ -208,6 +227,7 @@ var ProxyServer = class {
     this.recordingId = id;
     this.replayId = null;
     this.currentSession = { id, recordings: [], websocketRecordings: [] };
+    this.requestSequenceMap.clear();
     console.log(`Switched to record mode with ID: ${id}`);
   }
   switchToReplayMode(id) {
@@ -218,6 +238,7 @@ var ProxyServer = class {
     this.replayId = id;
     this.recordingId = null;
     this.currentSession = null;
+    this.replaySequenceMap.clear();
     console.log(`Switched to replay mode with ID: ${id}`);
   }
   setupModeTimeout(timeout) {
@@ -249,6 +270,8 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
+    const currentSequence = this.requestSequenceMap.get(key) || 0;
+    this.requestSequenceMap.set(key, currentSequence + 1);
     const record = {
       request: {
         method: req.method,
@@ -257,7 +280,8 @@ var ProxyServer = class {
         body: body || null
       },
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      key
+      key,
+      sequence: currentSequence
     };
     this.currentSession.recordings.push(record);
   }
@@ -266,7 +290,9 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
-    const record = this.currentSession.recordings.find((r) => r.key === key);
+    const record = this.currentSession.recordings.findLast(
+      (r) => r.key === key && !r.response
+    );
     if (!record) {
       console.error("Request record not found for response:", key);
       return;
@@ -291,17 +317,31 @@ var ProxyServer = class {
     const filePath = getRecordingPath(this.recordingsDir, this.replayId);
     try {
       const session = await loadRecordingSession(filePath);
-      const record = session.recordings.find((r) => r.key === key);
+      const currentSequence = this.replaySequenceMap.get(key) || 0;
+      const record = session.recordings.find(
+        (r) => r.key === key && r.sequence === currentSequence
+      );
       if (!record) {
-        throw new Error(`No recording found for ${key}`);
+        throw new Error(
+          `No recording found for ${key} with sequence ${currentSequence}`
+        );
       }
       if (!record.response) {
         throw new Error("No response recorded for this request");
       }
+      this.replaySequenceMap.set(key, currentSequence + 1);
       const { statusCode, headers, body } = record.response;
-      res.writeHead(statusCode, headers);
+      const origin = req.headers.origin;
+      const responseHeaders = {
+        ...headers,
+        "access-control-allow-origin": origin || "*",
+        "access-control-allow-credentials": "true"
+      };
+      res.writeHead(statusCode, responseHeaders);
       res.end(body);
-      console.log(`Replayed: ${req.method} ${req.url}`);
+      console.log(
+        `Replayed: ${req.method} ${req.url} (sequence: ${currentSequence})`
+      );
     } catch (error) {
       this.handleReplayError(res, error, key, filePath);
     }
@@ -317,6 +357,9 @@ var ProxyServer = class {
     });
   }
   async handleRequest(req, res) {
+    if (req.method === "OPTIONS") {
+      return this.handleCorsPreflightRequest(req, res);
+    }
     if (req.url === CONTROL_ENDPOINT) {
       return this.handleControlRequest(req, res);
     }
@@ -325,23 +368,63 @@ var ProxyServer = class {
     }
     await this.handleProxyRequest(req, res);
   }
+  handleCorsPreflightRequest(req, res) {
+    const origin = req.headers.origin;
+    res.writeHead(HTTP_STATUS_OK, {
+      "Access-Control-Allow-Origin": origin || "*",
+      "Access-Control-Allow-Credentials": "true",
+      "Access-Control-Allow-Headers": req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Max-Age": "86400"
+      // 24 hours
+    });
+    res.end();
+  }
   async handleProxyRequest(req, res) {
     const target = this.getTarget();
     console.log(`[${this.mode}] ${req.method} ${req.url} -> ${target}`);
     if (this.mode === Modes.record) {
-      await this.bufferRequestForRecord(req);
+      await this.bufferAndProxyRequest(req, res, target);
+    } else {
+      this.proxy.web(req, res, { target });
     }
-    this.proxy.web(req, res, { target });
   }
-  async bufferRequestForRecord(req) {
+  async bufferAndProxyRequest(req, res, target) {
     const chunks = [];
     req.on("data", (chunk) => {
       chunks.push(chunk);
     });
-    req.on("end", async () => {
-      const body = Buffer.concat(chunks).toString("utf8");
-      await this.saveRequestRecord(req, body);
+    await new Promise((resolve) => {
+      req.on("end", () => resolve());
     });
+    const body = Buffer.concat(chunks).toString("utf8");
+    await this.saveRequestRecord(req, body);
+    const targetUrl = new URL(target);
+    const isHttps = targetUrl.protocol === "https:";
+    const requestModule = isHttps ? https : http;
+    const defaultPort = isHttps ? 443 : 80;
+    const proxyReq = requestModule.request(
+      {
+        hostname: targetUrl.hostname,
+        port: targetUrl.port || defaultPort,
+        path: req.url,
+        method: req.method,
+        headers: req.headers
+      },
+      (proxyRes) => {
+        this.addCorsHeaders(proxyRes, req);
+        this.recordResponse(req, proxyRes);
+        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+        proxyRes.pipe(res);
+      }
+    );
+    proxyReq.on("error", (err) => {
+      this.handleProxyError(err, req, res);
+    });
+    if (chunks.length > 0) {
+      proxyReq.write(Buffer.concat(chunks));
+    }
+    proxyReq.end();
   }
   handleUpgrade(req, socket, head) {
     if (this.mode === Modes.replay) {
@@ -514,15 +597,25 @@ var ProxyServer = class {
 };
 
 // src/playwright/index.ts
-var INTERNAL_API_URL = process.env.INTERNAL_API_URL || "http://localhost:8100";
+function getProxyPort() {
+  const envPort = process.env.TEST_PROXY_RECORDER_PORT;
+  if (envPort) {
+    const parsed = Number.parseInt(envPort, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return 8100;
+}
 async function setProxyMode(mode, sessionId, timeout) {
+  const proxyPort = getProxyPort();
   try {
     const body = {
       mode,
       id: sessionId,
       ...timeout && { timeout }
     };
-    const response = await fetch(`${INTERNAL_API_URL}/__control`, {
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body)
@@ -539,8 +632,34 @@ async function setProxyMode(mode, sessionId, timeout) {
     throw error;
   }
 }
+function parseSpecFilePath(specPath) {
+  const folderMatch = specPath.match(/^(.+?)\/([^/]+)\.(spec|test)\.ts$/);
+  if (folderMatch) {
+    return { folder: folderMatch[1], fileName: folderMatch[2] };
+  }
+  const fileMatch = specPath.match(/^([^/]+)\.(spec|test)\.ts$/);
+  if (fileMatch) {
+    return { folder: null, fileName: fileMatch[1] };
+  }
+  return { folder: null, fileName: null };
+}
+function buildSessionPath(folder, fileName, testName) {
+  if (folder && fileName) {
+    return `${folder}/${fileName}__${testName}`;
+  }
+  if (fileName) {
+    return `${fileName}__${testName}`;
+  }
+  return testName;
+}
 function generateSessionId(testInfo) {
-  return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  const { titlePath } = testInfo;
+  if (!titlePath || titlePath.length === 0) {
+    return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  }
+  const { folder, fileName } = parseSpecFilePath(titlePath[0]);
+  const testName = titlePath.at(-1).toLowerCase().replaceAll(/\s+/g, "-");
+  return buildSessionPath(folder, fileName, testName);
 }
 async function startRecording(testInfo) {
   const sessionId = generateSessionId(testInfo);

package/dist/playwright/index.cjs

@@ -8,15 +8,25 @@ var Modes = {
 };
 
 // src/playwright/index.ts
-var INTERNAL_API_URL = process.env.INTERNAL_API_URL || "http://localhost:8100";
+function getProxyPort() {
+  const envPort = process.env.TEST_PROXY_RECORDER_PORT;
+  if (envPort) {
+    const parsed = Number.parseInt(envPort, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return 8100;
+}
 async function setProxyMode(mode, sessionId, timeout) {
+  const proxyPort = getProxyPort();
   try {
     const body = {
       mode,
       id: sessionId,
       ...timeout && { timeout }
     };
-    const response = await fetch(`${INTERNAL_API_URL}/__control`, {
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body)
@@ -33,8 +43,34 @@ async function setProxyMode(mode, sessionId, timeout) {
     throw error;
   }
 }
+function parseSpecFilePath(specPath) {
+  const folderMatch = specPath.match(/^(.+?)\/([^/]+)\.(spec|test)\.ts$/);
+  if (folderMatch) {
+    return { folder: folderMatch[1], fileName: folderMatch[2] };
+  }
+  const fileMatch = specPath.match(/^([^/]+)\.(spec|test)\.ts$/);
+  if (fileMatch) {
+    return { folder: null, fileName: fileMatch[1] };
+  }
+  return { folder: null, fileName: null };
+}
+function buildSessionPath(folder, fileName, testName) {
+  if (folder && fileName) {
+    return `${folder}/${fileName}__${testName}`;
+  }
+  if (fileName) {
+    return `${fileName}__${testName}`;
+  }
+  return testName;
+}
 function generateSessionId(testInfo) {
-  return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  const { titlePath } = testInfo;
+  if (!titlePath || titlePath.length === 0) {
+    return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  }
+  const { folder, fileName } = parseSpecFilePath(titlePath[0]);
+  const testName = titlePath.at(-1).toLowerCase().replaceAll(/\s+/g, "-");
+  return buildSessionPath(folder, fileName, testName);
 }
 async function startRecording(testInfo) {
   const sessionId = generateSessionId(testInfo);

package/dist/playwright/index.d.cts

@@ -1,3 +1,3 @@
 import '@playwright/test';
-export { P as PlaywrightTestInfo, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from '../index-DfFpm8mB.cjs';
+export { P as PlaywrightTestInfo, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from '../index-CBjvm5rb.cjs';
 import 'node:http';

package/dist/playwright/index.d.ts

@@ -1,3 +1,3 @@
 import '@playwright/test';
-export { P as PlaywrightTestInfo, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from '../index-DfFpm8mB.js';
+export { P as PlaywrightTestInfo, g as generateSessionId, p as playwrightProxy, s as setProxyMode, b as startRecording, c as startReplay, d as stopProxy } from '../index-CBjvm5rb.js';
 import 'node:http';

package/dist/playwright/index.mjs

@@ -6,15 +6,25 @@ var Modes = {
 };
 
 // src/playwright/index.ts
-var INTERNAL_API_URL = process.env.INTERNAL_API_URL || "http://localhost:8100";
+function getProxyPort() {
+  const envPort = process.env.TEST_PROXY_RECORDER_PORT;
+  if (envPort) {
+    const parsed = Number.parseInt(envPort, 10);
+    if (!Number.isNaN(parsed)) {
+      return parsed;
+    }
+  }
+  return 8100;
+}
 async function setProxyMode(mode, sessionId, timeout) {
+  const proxyPort = getProxyPort();
   try {
     const body = {
       mode,
       id: sessionId,
       ...timeout && { timeout }
     };
-    const response = await fetch(`${INTERNAL_API_URL}/__control`, {
+    const response = await fetch(`http://127.0.0.1:${proxyPort}/__control`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify(body)
@@ -31,8 +41,34 @@ async function setProxyMode(mode, sessionId, timeout) {
     throw error;
   }
 }
+function parseSpecFilePath(specPath) {
+  const folderMatch = specPath.match(/^(.+?)\/([^/]+)\.(spec|test)\.ts$/);
+  if (folderMatch) {
+    return { folder: folderMatch[1], fileName: folderMatch[2] };
+  }
+  const fileMatch = specPath.match(/^([^/]+)\.(spec|test)\.ts$/);
+  if (fileMatch) {
+    return { folder: null, fileName: fileMatch[1] };
+  }
+  return { folder: null, fileName: null };
+}
+function buildSessionPath(folder, fileName, testName) {
+  if (folder && fileName) {
+    return `${folder}/${fileName}__${testName}`;
+  }
+  if (fileName) {
+    return `${fileName}__${testName}`;
+  }
+  return testName;
+}
 function generateSessionId(testInfo) {
-  return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  const { titlePath } = testInfo;
+  if (!titlePath || titlePath.length === 0) {
+    return testInfo.title.toLowerCase().replaceAll(/\s+/g, "-");
+  }
+  const { folder, fileName } = parseSpecFilePath(titlePath[0]);
+  const testName = titlePath.at(-1).toLowerCase().replaceAll(/\s+/g, "-");
+  return buildSessionPath(folder, fileName, testName);
 }
 async function startRecording(testInfo) {
   const sessionId = generateSessionId(testInfo);

package/dist/proxy.js

@@ -1,7 +1,8 @@
-import path from 'path';
+import path2 from 'path';
 import { Command } from 'commander';
 import fs from 'fs/promises';
 import http from 'http';
+import https from 'https';
 import httpProxy from 'http-proxy';
 import { WebSocket, WebSocketServer } from 'ws';
 import filenamify from 'filenamify';
@@ -37,7 +38,7 @@ function parseCliArgs() {
   if (targets2.length === 0) {
     program.help();
   }
-  const recordingsDir2 = path.resolve(process.cwd(), options.recordingsDir);
+  const recordingsDir2 = path2.resolve(process.cwd(), options.recordingsDir);
   return { targets: targets2, port: port2, recordingsDir: recordingsDir2 };
 }
 
@@ -57,7 +58,7 @@ var Modes = {
 };
 var JSON_INDENT_SPACES = 2;
 function getRecordingPath(recordingsDir2, id) {
-  return path.join(recordingsDir2, `${id}.json`);
+  return path2.join(recordingsDir2, `${id}.mock.json`);
 }
 async function loadRecordingSession(filePath) {
   const fileContent = await fs.readFile(filePath, "utf8");
@@ -65,6 +66,8 @@ async function loadRecordingSession(filePath) {
 }
 async function saveRecordingSession(recordingsDir2, session) {
   const filePath = getRecordingPath(recordingsDir2, session.id);
+  const dirPath = path2.dirname(filePath);
+  await fs.mkdir(dirPath, { recursive: true });
   await fs.writeFile(
     filePath,
     JSON.stringify(session, null, JSON_INDENT_SPACES)
@@ -117,6 +120,10 @@ var ProxyServer = class {
   proxy;
   currentSession;
   recordingsDir;
+  requestSequenceMap;
+  // Track sequence per request key
+  replaySequenceMap;
+  // Track replay position per request key
   constructor(targets2, recordingsDir2) {
     this.targets = targets2;
     this.currentTargetIndex = 0;
@@ -126,6 +133,8 @@ var ProxyServer = class {
     this.modeTimeout = null;
     this.currentSession = null;
     this.recordingsDir = recordingsDir2;
+    this.requestSequenceMap = /* @__PURE__ */ new Map();
+    this.replaySequenceMap = /* @__PURE__ */ new Map();
     this.proxy = httpProxy.createProxyServer({
       secure: false,
       changeOrigin: true
@@ -143,6 +152,7 @@ var ProxyServer = class {
       this.handleUpgrade(req, socket, head);
     });
     server.listen(port2, () => {
+      process.env.TEST_PROXY_RECORDER_PORT = String(port2);
       this.logServerStartup(port2);
     });
     return server;
@@ -164,10 +174,19 @@ var ProxyServer = class {
     res.end(JSON.stringify({ error: "Proxy error", message: err.message }));
   }
   handleProxyResponse(proxyRes, req) {
+    this.addCorsHeaders(proxyRes, req);
     if (this.mode === Modes.record && this.recordingId) {
       this.recordResponse(req, proxyRes);
     }
   }
+  addCorsHeaders(proxyRes, req) {
+    const origin = req.headers.origin;
+    proxyRes.headers["access-control-allow-origin"] = origin || "*";
+    proxyRes.headers["access-control-allow-credentials"] = "true";
+    proxyRes.headers["access-control-allow-headers"] = req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization";
+    proxyRes.headers["access-control-allow-methods"] = "GET, POST, PUT, DELETE, PATCH, OPTIONS";
+    proxyRes.headers["access-control-expose-headers"] = "*";
+  }
   getTarget() {
     const target = this.targets[this.currentTargetIndex];
     this.currentTargetIndex = (this.currentTargetIndex + 1) % this.targets.length;
@@ -242,6 +261,7 @@ var ProxyServer = class {
     this.recordingId = id;
     this.replayId = null;
     this.currentSession = { id, recordings: [], websocketRecordings: [] };
+    this.requestSequenceMap.clear();
     console.log(`Switched to record mode with ID: ${id}`);
   }
   switchToReplayMode(id) {
@@ -252,6 +272,7 @@ var ProxyServer = class {
     this.replayId = id;
     this.recordingId = null;
     this.currentSession = null;
+    this.replaySequenceMap.clear();
     console.log(`Switched to replay mode with ID: ${id}`);
   }
   setupModeTimeout(timeout) {
@@ -283,6 +304,8 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
+    const currentSequence = this.requestSequenceMap.get(key) || 0;
+    this.requestSequenceMap.set(key, currentSequence + 1);
     const record = {
       request: {
         method: req.method,
@@ -291,7 +314,8 @@ var ProxyServer = class {
         body: body || null
       },
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      key
+      key,
+      sequence: currentSequence
     };
     this.currentSession.recordings.push(record);
   }
@@ -300,7 +324,9 @@ var ProxyServer = class {
       return;
     }
     const key = getReqID(req);
-    const record = this.currentSession.recordings.find((r) => r.key === key);
+    const record = this.currentSession.recordings.findLast(
+      (r) => r.key === key && !r.response
+    );
     if (!record) {
       console.error("Request record not found for response:", key);
       return;
@@ -325,17 +351,31 @@ var ProxyServer = class {
     const filePath = getRecordingPath(this.recordingsDir, this.replayId);
     try {
       const session = await loadRecordingSession(filePath);
-      const record = session.recordings.find((r) => r.key === key);
+      const currentSequence = this.replaySequenceMap.get(key) || 0;
+      const record = session.recordings.find(
+        (r) => r.key === key && r.sequence === currentSequence
+      );
       if (!record) {
-        throw new Error(`No recording found for ${key}`);
+        throw new Error(
+          `No recording found for ${key} with sequence ${currentSequence}`
+        );
       }
       if (!record.response) {
         throw new Error("No response recorded for this request");
       }
+      this.replaySequenceMap.set(key, currentSequence + 1);
       const { statusCode, headers, body } = record.response;
-      res.writeHead(statusCode, headers);
+      const origin = req.headers.origin;
+      const responseHeaders = {
+        ...headers,
+        "access-control-allow-origin": origin || "*",
+        "access-control-allow-credentials": "true"
+      };
+      res.writeHead(statusCode, responseHeaders);
       res.end(body);
-      console.log(`Replayed: ${req.method} ${req.url}`);
+      console.log(
+        `Replayed: ${req.method} ${req.url} (sequence: ${currentSequence})`
+      );
     } catch (error) {
       this.handleReplayError(res, error, key, filePath);
     }
@@ -351,6 +391,9 @@ var ProxyServer = class {
     });
   }
   async handleRequest(req, res) {
+    if (req.method === "OPTIONS") {
+      return this.handleCorsPreflightRequest(req, res);
+    }
     if (req.url === CONTROL_ENDPOINT) {
       return this.handleControlRequest(req, res);
     }
@@ -359,23 +402,63 @@ var ProxyServer = class {
     }
     await this.handleProxyRequest(req, res);
   }
+  handleCorsPreflightRequest(req, res) {
+    const origin = req.headers.origin;
+    res.writeHead(HTTP_STATUS_OK, {
+      "Access-Control-Allow-Origin": origin || "*",
+      "Access-Control-Allow-Credentials": "true",
+      "Access-Control-Allow-Headers": req.headers["access-control-request-headers"] || "Origin, X-Requested-With, Content-Type, Accept, Authorization",
+      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
+      "Access-Control-Max-Age": "86400"
+      // 24 hours
+    });
+    res.end();
+  }
   async handleProxyRequest(req, res) {
     const target = this.getTarget();
     console.log(`[${this.mode}] ${req.method} ${req.url} -> ${target}`);
     if (this.mode === Modes.record) {
-      await this.bufferRequestForRecord(req);
+      await this.bufferAndProxyRequest(req, res, target);
+    } else {
+      this.proxy.web(req, res, { target });
     }
-    this.proxy.web(req, res, { target });
   }
-  async bufferRequestForRecord(req) {
+  async bufferAndProxyRequest(req, res, target) {
     const chunks = [];
     req.on("data", (chunk) => {
       chunks.push(chunk);
     });
-    req.on("end", async () => {
-      const body = Buffer.concat(chunks).toString("utf8");
-      await this.saveRequestRecord(req, body);
+    await new Promise((resolve) => {
+      req.on("end", () => resolve());
     });
+    const body = Buffer.concat(chunks).toString("utf8");
+    await this.saveRequestRecord(req, body);
+    const targetUrl = new URL(target);
+    const isHttps = targetUrl.protocol === "https:";
+    const requestModule = isHttps ? https : http;
+    const defaultPort = isHttps ? 443 : 80;
+    const proxyReq = requestModule.request(
+      {
+        hostname: targetUrl.hostname,
+        port: targetUrl.port || defaultPort,
+        path: req.url,
+        method: req.method,
+        headers: req.headers
+      },
+      (proxyRes) => {
+        this.addCorsHeaders(proxyRes, req);
+        this.recordResponse(req, proxyRes);
+        res.writeHead(proxyRes.statusCode || 200, proxyRes.headers);
+        proxyRes.pipe(res);
+      }
+    );
+    proxyReq.on("error", (err) => {
+      this.handleProxyError(err, req, res);
+    });
+    if (chunks.length > 0) {
+      proxyReq.write(Buffer.concat(chunks));
+    }
+    proxyReq.end();
   }
   handleUpgrade(req, socket, head) {
     if (this.mode === Modes.replay) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "test-proxy-recorder",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "HTTP proxy server for recording and replaying network requests in testing. Works seamlessly with Playwright testing framework.",
   "type": "module",
   "main": "dist/index.mjs",