playwright-codegen-pro-core 1.0.4 → 1.0.6

package/lib/tools/backend/browserBackend.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,15 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var browserBackend_exports = {};
 __export(browserBackend_exports, {
   BrowserBackend: () => BrowserBackend
 });
 module.exports = __toCommonJS(browserBackend_exports);
+var import_path = __toESM(require("path"));
 var import_context = require("./context");
 var import_response = require("./response");
 var import_sessionLog = require("./sessionLog");
+var import_mcpSessionRecorder = require("./mcpSessionRecorder");
 var import_utilsBundle = require("../../utilsBundle");
 class BrowserBackend {
   constructor(config, browserContext, tools) {
@@ -38,8 +50,17 @@ class BrowserBackend {
       sessionLog: this._sessionLog,
       cwd: clientInfo.cwd
     });
+    const cwd = clientInfo.cwd || process.cwd();
+    this._recorder = new import_mcpSessionRecorder.McpSessionRecorder(this.browserContext, {
+      cwd,
+      scenarioName: "Recorded via Playwright Codegen Pro MCP",
+      specFile: import_path.default.join(cwd, "tests", "mcp-session.spec.ts"),
+      secrets: this._config.secrets
+    });
+    this._context.mcpRecorder = this._recorder;
   }
   async dispose() {
+    await this._recorder?.dispose().catch((e) => (0, import_utilsBundle.debug)("pw:tools:error")(e));
     await this._context?.dispose().catch((e) => (0, import_utilsBundle.debug)("pw:tools:error")(e));
   }
   async callTool(name, rawArguments = {}) {
@@ -56,12 +77,15 @@ Tool "${name}" not found` }],
     const context = this._context;
     const response = new import_response.Response(context, name, parsedArguments, cwd);
     context.setRunningTool(name);
+    this._recorder?.beginAction(name);
     let responseObject;
     try {
       await tool.handle(context, parsedArguments, response);
       responseObject = await response.serialize();
       this._sessionLog?.logResponse(name, parsedArguments, responseObject);
+      this._recordAction(responseObject, cwd);
     } catch (error) {
+      this._recorder?.completeAction(void 0);
       return {
         content: [{ type: "text", text: `### Error
 ${String(error)}` }],
@@ -72,6 +96,14 @@ ${String(error)}` }],
     }
     return responseObject;
   }
+  _recordAction(responseObject, cwd) {
+    if (!this._recorder)
+      return;
+    const parsed = (0, import_response.parseResponse)(responseObject, cwd);
+    const pageUrl = parsed?.page?.match(/Page URL:\s*(\S+)/)?.[1];
+    const pageTitle = parsed?.page?.match(/Page Title:\s*(.+)/)?.[1]?.trim();
+    this._recorder.completeAction(parsed?.code, pageUrl, pageTitle);
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/tools/backend/mcpNetworkCapture.js

@@ -0,0 +1,162 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mcpNetworkCapture_exports = {};
+__export(mcpNetworkCapture_exports, {
+  McpNetworkCapture: () => McpNetworkCapture
+});
+module.exports = __toCommonJS(mcpNetworkCapture_exports);
+const debugNet = !!process.env.PW_DEBUG_NETWORK;
+class McpNetworkCapture {
+  constructor(context, getCurrentAction, onUpdate) {
+    this._pending = /* @__PURE__ */ new Map();
+    this._pollTracker = /* @__PURE__ */ new Map();
+    this._listeners = [];
+    this._context = context;
+    this._getCurrentAction = getCurrentAction;
+    this._onUpdate = onUpdate;
+  }
+  start() {
+    const onRequest = (req) => this._onRequest(req);
+    const onResponse = (res) => void this._onResponse(res);
+    const onFailed = (req) => this._onFailed(req);
+    this._context.on("request", onRequest);
+    this._context.on("response", onResponse);
+    this._context.on("requestfailed", onFailed);
+    this._listeners.push(
+      () => this._context.off("request", onRequest),
+      () => this._context.off("response", onResponse),
+      () => this._context.off("requestfailed", onFailed)
+    );
+  }
+  dispose() {
+    for (const remove of this._listeners)
+      remove();
+    this._listeners = [];
+    this._pending.clear();
+  }
+  // ─── Private ─────────────────────────────────────────────────────────────
+  _isNoiseUrl(url, method) {
+    if (method === "OPTIONS")
+      return true;
+    if (/\.(js|css|woff|woff2|ttf|eot|svg|png|jpg|jpeg|gif|ico|map)(\?|$)/i.test(url))
+      return true;
+    try {
+      const parsed = new URL(url);
+      if (/analytics|segment\.io|mixpanel|amplitude|hotjar|fullstory|heap\.io|intercom\.io|clarity\.ms|googletagmanager|google-analytics|facebook\.net|doubleclick|sentry\.io/.test(parsed.hostname))
+        return true;
+      if (/\/analytics\/|\/tracking\/|\/pixel|\/beacon|\/gen_204|\/log$|\/jserror/i.test(parsed.pathname))
+        return true;
+      if (/clients\d?\.google|play\.google\.com\/log|gstatic\.com|googleapis\.com\/.*\/log/i.test(url))
+        return true;
+    } catch {
+      return true;
+    }
+    if (/refresh[_-]?token|token\/refresh|oauth\/token|auth\/refresh/i.test(url))
+      return true;
+    return false;
+  }
+  _isPolling(key) {
+    const now = Date.now();
+    const times = (this._pollTracker.get(key) ?? []).filter((t) => now - t < 3e4);
+    times.push(now);
+    this._pollTracker.set(key, times);
+    return times.length >= 3;
+  }
+  _graphqlOperationName(request) {
+    if (request.method() !== "POST")
+      return void 0;
+    try {
+      if (!/graphql/i.test(request.url()))
+        return void 0;
+      const buf = request.postDataBuffer();
+      if (!buf)
+        return void 0;
+      const body = JSON.parse(buf.toString("utf-8"));
+      return typeof body.operationName === "string" ? body.operationName : void 0;
+    } catch {
+      return void 0;
+    }
+  }
+  _assignBucket(request, action, operationName) {
+    const url = request.url();
+    const method = request.method();
+    if (!["xhr", "fetch"].includes(request.resourceType()))
+      return "noise";
+    if (this._isNoiseUrl(url, method))
+      return "noise";
+    if (!action)
+      return "noise";
+    if (this._isPolling(`${operationName ?? url}|${method}`))
+      return "noise";
+    return /navigate/i.test(action.toolName) ? "pageLoad" : "direct";
+  }
+  _onRequest(request) {
+    const action = this._getCurrentAction();
+    const method = request.method();
+    const operationName = this._graphqlOperationName(request);
+    const bucket = this._assignBucket(request, action, operationName);
+    let requestBodySnippet;
+    if (bucket !== "noise" && ["POST", "PUT", "PATCH", "DELETE"].includes(method)) {
+      const buf = request.postDataBuffer();
+      const text = buf?.toString("utf-8") ?? request.postData() ?? "";
+      if (text)
+        requestBodySnippet = text.slice(0, 500) + (text.length > 500 ? "..." : "");
+    }
+    const event = {
+      url: request.url(),
+      method,
+      bucket,
+      ...operationName ? { operationName } : {},
+      ...requestBodySnippet ? { requestBodySnippet } : {}
+    };
+    this._pending.set(request, event);
+    action?.events.push(event);
+    if (debugNet)
+      console.log(`[MCP-NC] ${method} ${event.url}${operationName ? ` (${operationName})` : ""} \u2192 ${bucket} (${action?.toolName ?? "none"})`);
+  }
+  async _onResponse(response) {
+    const request = response.request();
+    const event = this._pending.get(request);
+    if (!event)
+      return;
+    event.status = response.status();
+    if (event.bucket !== "noise") {
+      const ct = response.headers()["content-type"] ?? "";
+      if (/text|json|html/i.test(ct)) {
+        const buf = await response.body().catch(() => null);
+        if (buf)
+          event.bodySnippet = buf.toString("utf-8").slice(0, 500);
+      }
+    }
+    this._pending.delete(request);
+    this._onUpdate();
+  }
+  _onFailed(request) {
+    const event = this._pending.get(request);
+    if (!event)
+      return;
+    event.aborted = true;
+    this._pending.delete(request);
+    this._onUpdate();
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  McpNetworkCapture
+});

package/lib/tools/backend/mcpSessionRecorder.js

@@ -0,0 +1,243 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mcpSessionRecorder_exports = {};
+__export(mcpSessionRecorder_exports, {
+  McpSessionRecorder: () => McpSessionRecorder,
+  slugify: () => slugify
+});
+module.exports = __toCommonJS(mcpSessionRecorder_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_mcpNetworkCapture = require("./mcpNetworkCapture");
+const WRITE_THROTTLE_MS = 250;
+const MAX_DIRECT = 20;
+const MAX_PAGELOAD = 8;
+const MAX_URL_LEN = 140;
+function truncUrl(url) {
+  return url.length > MAX_URL_LEN ? url.slice(0, MAX_URL_LEN) + "\u2026" : url;
+}
+function slugify(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "mcp-session";
+}
+class McpSessionRecorder {
+  constructor(context, options) {
+    this._actions = [];
+    this._current = null;
+    this._sessionStart = Date.now();
+    this._disposed = false;
+    this._options = options;
+    this._defaultScenario = options.scenarioName;
+    this._defaultSpecFile = options.specFile;
+    this._sessionFile = import_path.default.join(options.cwd, ".playwright-session.md");
+    this._network = new import_mcpNetworkCapture.McpNetworkCapture(context, () => this._current, () => this._scheduleWrite());
+    this._network.start();
+  }
+  /**
+   * Begin a fresh recording. Clears accumulated actions so the next flow becomes its own
+   * test. With a name, the draft is written to tests/<slug>.spec.ts (so back-to-back flows
+   * each get their own file); without a name, resets to the default mcp-session.spec.ts.
+   * Returns the relative path of the spec the new flow will be written to.
+   */
+  reset(name) {
+    this._actions = [];
+    this._current = null;
+    this._sessionStart = Date.now();
+    if (name) {
+      this._options.scenarioName = name;
+      this._options.specFile = import_path.default.join(this._options.cwd, "tests", `${slugify(name)}.spec.ts`);
+    } else {
+      this._options.scenarioName = this._defaultScenario;
+      this._options.specFile = this._defaultSpecFile;
+    }
+    if (this._writeTimer) {
+      clearTimeout(this._writeTimer);
+      this._writeTimer = void 0;
+    }
+    this._writeFiles();
+    return import_path.default.relative(this._options.cwd, this._options.specFile);
+  }
+  /** Called before a tool runs, so network events attribute to it. */
+  beginAction(toolName) {
+    this._current = { toolName, startTime: Date.now(), events: [] };
+  }
+  /** Called after a tool runs with the Playwright code it executed (if any). */
+  completeAction(code, pageUrl, pageTitle) {
+    const current = this._current;
+    if (!current)
+      return;
+    const trimmed = (code ?? "").trim();
+    if (trimmed) {
+      this._actions.push({
+        index: this._actions.length,
+        toolName: current.toolName,
+        code: trimmed,
+        pageUrl,
+        pageTitle,
+        startTime: current.startTime,
+        // Same array reference the network capture pushes into — late responses still land here.
+        networkEvents: current.events
+      });
+    } else if (current.events.length && this._actions.length) {
+      this._actions[this._actions.length - 1].networkEvents.push(...current.events);
+    }
+    this._scheduleWrite();
+  }
+  async dispose() {
+    if (this._disposed)
+      return;
+    this._disposed = true;
+    this._network.dispose();
+    if (this._writeTimer)
+      clearTimeout(this._writeTimer);
+    this._writeFiles();
+  }
+  // ─── Writing ─────────────────────────────────────────────────────────────
+  _scheduleWrite() {
+    if (this._disposed || this._writeTimer)
+      return;
+    this._writeTimer = setTimeout(() => {
+      this._writeTimer = void 0;
+      this._writeFiles();
+    }, WRITE_THROTTLE_MS);
+  }
+  _writeFiles() {
+    try {
+      import_fs.default.writeFileSync(this._sessionFile, this._redact(this._buildPrompt()), "utf-8");
+      const spec = this._redact(this._buildSpec());
+      import_fs.default.mkdirSync(import_path.default.dirname(this._options.specFile), { recursive: true });
+      import_fs.default.writeFileSync(this._options.specFile, spec, "utf-8");
+    } catch {
+    }
+  }
+  _redact(text) {
+    let out = text;
+    for (const value of Object.values(this._options.secrets ?? {})) {
+      if (value)
+        out = out.split(value).join("[redacted]");
+    }
+    out = out.replace(/("(?:password|token|secret|authorization|api[_-]?key|access[_-]?token|refresh[_-]?token)"\s*:\s*")[^"]*(")/gi, "$1[redacted]$2");
+    out = out.replace(/\bBearer\s+[A-Za-z0-9._\-]+/g, "Bearer [redacted]");
+    return out;
+  }
+  // ─── Prompt (.playwright-session.md) ─────────────────────────────────────
+  _buildPrompt() {
+    const relSpec = import_path.default.relative(this._options.cwd, this._options.specFile);
+    let session = "";
+    let lastPageUrl;
+    for (const action of this._actions) {
+      if (action.pageUrl && action.pageUrl !== lastPageUrl) {
+        session += `### Page: ${action.pageUrl}
+`;
+        lastPageUrl = action.pageUrl;
+      }
+      const codeLine = action.code.split("\n")[0];
+      session += `- ${action.toolName}: ${codeLine} at t=${action.startTime - this._sessionStart}ms
+`;
+      const direct = action.networkEvents.filter((e) => e.bucket === "direct");
+      const pageLoad = action.networkEvents.filter((e) => e.bucket === "pageLoad");
+      if (direct.length) {
+        session += `  API calls (direct):
+`;
+        for (const e of direct.slice(0, MAX_DIRECT)) {
+          const op = e.operationName ? ` (${e.operationName})` : "";
+          const payload = e.requestBodySnippet ? ` (payload: ${e.requestBodySnippet})` : "";
+          const body = e.bodySnippet ? ` (body: ${e.bodySnippet})` : "";
+          session += `    - ${e.method} ${truncUrl(e.url)}${op}${payload} \u2192 ${e.status ?? (e.aborted ? "aborted" : "pending")}${body}
+`;
+        }
+        if (direct.length > MAX_DIRECT)
+          session += `    - ...and ${direct.length - MAX_DIRECT} more
+`;
+      }
+      if (pageLoad.length) {
+        session += `  API calls (page load context):
+`;
+        for (const e of pageLoad.slice(0, MAX_PAGELOAD))
+          session += `    - ${e.method} ${truncUrl(e.url)} \u2192 ${e.status ?? "pending"}
+`;
+        if (pageLoad.length > MAX_PAGELOAD)
+          session += `    - ...and ${pageLoad.length - MAX_PAGELOAD} more
+`;
+      }
+    }
+    const creates = this._actions.flatMap((a) => a.networkEvents.filter((e) => e.bucket === "direct" && e.method === "POST" && e.status === 201).map((e) => ({ a, e })));
+    let cleanup = "## Data Created During Session\n";
+    if (creates.length) {
+      for (const { a, e } of creates)
+        cleanup += `- Step ${a.index + 1} (${a.toolName}): POST ${e.url} \u2192 201 Created. Add afterEach cleanup using the response ID.
+`;
+    } else {
+      cleanup += "No data was created. No cleanup needed.\n";
+    }
+    return `# Playwright Test Generation Request (live MCP session)
+
+## Scenario
+Name: ${this._options.scenarioName}
+Target file: ${relSpec}
+
+This session was recorded live while an AI agent drove the browser through the Playwright Codegen Pro MCP. A runnable draft test has already been written to the target file; use this context to produce a polished final test.
+
+## Recorded Session
+${session.trimEnd() || "(no actions recorded yet)"}
+
+${cleanup}
+## Best Practices (follow exactly)
+- Do NOT use page.waitForTimeout(), page.waitForLoadState(), page.waitForNavigation()
+- DO use await expect(locator).toBeVisible() and similar web-first assertions
+- Prefer getByRole, getByLabel, getByPlaceholder, getByTestId over CSS selectors
+- Add a meaningful assertion BEFORE and AFTER each significant action
+- For actions with 'direct' API calls, wrap the click in Promise.all with waitForResponse
+- Never assert on auto-generated IDs, UUIDs, or timestamps from response bodies
+- Use process.env.TEST_* variables for any credentials (secrets are already redacted)
+- For data-creating actions (201), add afterEach cleanup using the response ID
+- Structure as test.describe with one clear test per scenario
+
+## Output Format
+Generate a complete Playwright test file in TypeScript.
+The file should start with: import { test, expect } from '@playwright/test';
+Save the result to: ${relSpec}`;
+  }
+  // ─── Draft spec (<scenario>.spec.ts) ─────────────────────────────────────
+  _buildSpec() {
+    const body = this._actions.map((a) => a.code.split("\n").map((l) => `    ${l}`).join("\n")).join("\n");
+    return `import { test, expect } from '@playwright/test';
+
+// Draft test recorded live via the Playwright Codegen Pro MCP.
+// Review and add assertions \u2014 see .playwright-session.md for captured API calls.
+test('${this._options.scenarioName.replace(/'/g, "\\'")}', async ({ page }) => {
+${body || "    // No actions recorded yet."}
+});
+`;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  McpSessionRecorder,
+  slugify
+});

package/lib/tools/backend/recorder.js

@@ -40,7 +40,7 @@ const recorderGetSession = (0, import_tool.defineTool)({
   schema: {
     name: "recorder_get_session",
     title: "Get recorder session prompt",
-    description: 'Read the Playwright recorder session prompt. Returns recorded actions, network events, and instructions for generating a Playwright test. Available live during recording (via .playwright-session.md) or after clicking "Generate Test" (via .playwright-prompt.md). Requires `npx playwright codegen --ai-codegen`.',
+    description: 'Read the Playwright recorder session prompt. Returns recorded actions, network events (classified as direct/pageLoad/noise), redacted payloads, and instructions for generating a Playwright test. Two sources feed this: (1) browser tools you drive through THIS MCP are recorded live into .playwright-session.md, with a runnable draft test written to tests/mcp-session.spec.ts; (2) a separate `playwright-codegen-pro codegen <url>` recording (.playwright-session.md live, or .playwright-prompt.md after "Generate Test"). Call this after driving the browser to turn the session into a polished test.',
     inputSchema: import_mcpBundle.z.object({
       path: import_mcpBundle.z.string().optional().describe(
         "Path to the prompt file. Defaults to checking .playwright-session.md (live) then .playwright-prompt.md in the current working directory."
@@ -49,7 +49,7 @@ const recorderGetSession = (0, import_tool.defineTool)({
     type: "readOnly"
   },
   handle: async (context, params, response) => {
-    const cwd = context.options.cwd;
+    const cwd = context.options.cwd || process.cwd();
     if (params.path) {
       try {
         const content = await import_fs.default.promises.readFile(params.path, "utf-8");
@@ -71,4 +71,25 @@ const recorderGetSession = (0, import_tool.defineTool)({
     response.addTextResult("No recorder session found. Run `npx playwright codegen --ai-codegen`, record actions, and the session will be available here automatically.");
   }
 });
-var recorder_default = [recorderGetSession];
+const recorderReset = (0, import_tool.defineTool)({
+  capability: "core",
+  schema: {
+    name: "recorder_reset",
+    title: "Start a new recording",
+    description: "Start a fresh recording, clearing the accumulated actions so the next flow becomes its own clean test. Call this between independent flows when testing or documenting a site back-to-back. With a `name`, the draft test is written to tests/<name>.spec.ts and the test is named accordingly (each flow gets its own file); without a name, it resets to the default tests/mcp-session.spec.ts. The previous flow's spec file is left in place.",
+    inputSchema: import_mcpBundle.z.object({
+      name: import_mcpBundle.z.string().optional().describe('Name for the new flow, e.g. "login" or "checkout". Becomes the test name and spec filename tests/<name>.spec.ts.')
+    }),
+    type: "readOnly"
+  },
+  handle: async (context, params, response) => {
+    const recorder = context.mcpRecorder;
+    if (!recorder) {
+      response.addTextResult("Live recording is not active for this server.");
+      return;
+    }
+    const specFile = recorder.reset(params.name);
+    response.addTextResult(params.name ? `Started new recording "${params.name}". Subsequent actions are recorded into ${specFile} (and .playwright-session.md).` : `Recording reset. Subsequent actions are recorded into ${specFile} (and .playwright-session.md).`);
+  }
+});
+var recorder_default = [recorderGetSession, recorderReset];

package/lib/tools/mcp/program.js

@@ -42,12 +42,18 @@ var import_log = require("./log");
 const version = require("../../../package.json").version;
 const codegenProInstructions = `This is the Playwright Codegen Pro MCP server \u2014 an AI-ready fork of the Playwright recorder.
 
-When the user mentions a "codegen session", "recording", or asks you to "write the test" for what they just recorded:
-1. Call the \`recorder_get_session\` tool to read the live recording. It returns the recorded user actions, the network requests they triggered (classified as direct API calls / page-load context / noise), request payloads and response bodies, screenshot paths, and data-cleanup hints. Secrets (passwords, tokens, credit cards) are already redacted.
-2. Generate a complete Playwright test from that context, following the "Best Practices" section embedded in the returned prompt (web-first assertions, role-based locators, waitForResponse around API-triggering clicks, afterEach cleanup for created data, no hard waits).
-3. Save the test where the prompt indicates (the target file is named in the session).
+You can BUILD a test by driving the browser live: every browser tool you call (browser_navigate, browser_click, browser_type, ...) is recorded automatically. As you act, the server writes:
+- .playwright-session.md \u2014 a structured prompt: each action, the network requests it triggered (classified as direct API calls / page-load context / noise), redacted request payloads and response bodies, and data-cleanup hints.
+- tests/mcp-session.spec.ts \u2014 a runnable draft test that grows with each action.
 
-The session is produced by \`playwright-codegen-pro codegen <url>\` (AI capture is always on). \`recorder_get_session\` works while recording (reads \`.playwright-session.md\`) and after the user clicks "Generate Test" (reads \`.playwright-prompt.md\`). If it reports no session, ask the user to start a codegen recording first.`;
+Recommended workflow to "write a test for X":
+1. Drive the site with the browser tools to perform the scenario, reading each tool's snapshot to decide the next step. No need to write or run a script \u2014 the recording captures what you do.
+2. Call \`recorder_get_session\` to read back the accumulated session.
+3. Produce a polished final test from it, following the "Best Practices" in the returned prompt (web-first assertions, role-based locators, waitForResponse around API-triggering clicks, afterEach cleanup for created data, no hard waits). Save it to the target file named in the session.
+
+Testing or documenting multiple flows back-to-back: call \`recorder_reset\` between flows so each becomes its own clean test rather than piling into one. Pass a name (e.g. \`recorder_reset({ name: "login" })\`) to write that flow's draft to \`tests/login.spec.ts\`. Typical loop: drive flow A \u2192 recorder_get_session \u2192 recorder_reset({ name: "checkout" }) \u2192 drive flow B \u2192 recorder_get_session \u2192 ...
+
+\`recorder_get_session\` also reads sessions from a separate \`playwright-codegen-pro codegen <url>\` run (\`.playwright-session.md\` live, or \`.playwright-prompt.md\` after the user clicks "Generate Test"). Secrets are redacted in all cases.`;
 function decorateMCPCommand(command) {
   command.option("--allowed-hosts <hosts...>", "comma-separated list of hosts this server is allowed to serve from. Defaults to the host the server is bound to. Pass '*' to disable the host check.", import_config.commaSeparatedList).option("--allowed-origins <origins>", "semicolon-separated list of TRUSTED origins to allow the browser to request. Default is to allow all.\nImportant: *does not* serve as a security boundary and *does not* affect redirects. ", import_config.semicolonSeparatedList).option("--allow-unrestricted-file-access", "allow access to files outside of the workspace roots. Also allows unrestricted access to file:// URLs. By default access to file system is restricted to workspace root directories (or cwd if no roots are configured) only, and navigation to file:// URLs is blocked.").option("--blocked-origins <origins>", "semicolon-separated list of origins to block the browser from requesting. Blocklist is evaluated before allowlist. If used without the allowlist, requests not matching the blocklist are still allowed.\nImportant: *does not* serve as a security boundary and *does not* affect redirects.", import_config.semicolonSeparatedList).option("--block-service-workers", "block service workers").option("--browser <browser>", "browser or chrome channel to use, possible values: chrome, firefox, webkit, msedge.").option("--caps <caps>", "comma-separated list of additional capabilities to enable, possible values: vision, pdf, devtools.", import_config.commaSeparatedList).option("--cdp-endpoint <endpoint>", "CDP endpoint to connect to.").option("--cdp-header <headers...>", "CDP headers to send with the connect request, multiple can be specified.", import_config.headerParser).option("--cdp-timeout <timeout>", "timeout in milliseconds for connecting to CDP endpoint, defaults to 30000ms", import_config.numberParser).option("--codegen <lang>", 'specify the language to use for code generation, possible values: "typescript", "none". Default is "typescript".', import_config.enumParser.bind(null, "--codegen", ["none", "typescript"])).option("--config <path>", "path to the configuration file.").option("--console-level <level>", 'level of console messages to return: "error", "warning", "info", "debug". Each level includes the messages of more severe levels.', import_config.enumParser.bind(null, "--console-level", ["error", "warning", "info", "debug"])).option("--device <device>", 'device to emulate, for example: "iPhone 15"').option("--executable-path <path>", "path to the browser executable.").option("--extension", 'Connect to a running browser instance (Edge/Chrome only). Requires the "Playwright MCP Bridge" browser extension to be installed.').option("--grant-permissions <permissions...>", 'List of permissions to grant to the browser context, for example "geolocation", "clipboard-read", "clipboard-write".', import_config.commaSeparatedList).option("--headless", "run browser in headless mode, headed by default").option("--host <host>", "host to bind server to. Default is localhost. Use 0.0.0.0 to bind to all interfaces.").option("--ignore-https-errors", "ignore https errors").option("--init-page <path...>", "path to TypeScript file to evaluate on Playwright page object").option("--init-script <path...>", "path to JavaScript file to add as an initialization script. The script will be evaluated in every page before any of the page's scripts. Can be specified multiple times.").option("--isolated", "keep the browser profile in memory, do not save it to disk.").option("--image-responses <mode>", 'whether to send image responses to the client. Can be "allow" or "omit", Defaults to "allow".', import_config.enumParser.bind(null, "--image-responses", ["allow", "omit"])).option("--no-sandbox", "disable the sandbox for all process types that are normally sandboxed.").option("--output-dir <path>", "path to the directory for output files.").option("--output-mode <mode>", 'whether to save snapshots, console messages, network logs to a file or to the standard output. Can be "file" or "stdout". Default is "stdout".', import_config.enumParser.bind(null, "--output-mode", ["file", "stdout"])).option("--port <port>", "port to listen on for SSE transport.").option("--proxy-bypass <bypass>", 'comma-separated domains to bypass proxy, for example ".com,chromium.org,.domain.com"').option("--proxy-server <proxy>", 'specify proxy server, for example "http://myproxy:3128" or "socks5://myproxy:8080"').option("--sandbox", "enable the sandbox for all process types that are normally not sandboxed.").option("--save-session", "Whether to save the Playwright MCP session into the output directory.").option("--secrets <path>", "path to a file containing secrets in the dotenv format", import_config.dotenvFileLoader).option("--shared-browser-context", "reuse the same browser context between all connected HTTP clients.").option("--snapshot-mode <mode>", 'when taking snapshots for responses, specifies the mode to use. Can be "full" or "none". Default is "full".').option("--storage-state <path>", "path to the storage state file for isolated sessions.").option("--test-id-attribute <attribute>", 'specify the attribute to use for test ids, defaults to "data-testid"').option("--timeout-action <timeout>", "specify action timeout in milliseconds, defaults to 5000ms", import_config.numberParser).option("--timeout-navigation <timeout>", "specify navigation timeout in milliseconds, defaults to 60000ms", import_config.numberParser).option("--user-agent <ua string>", "specify user agent string").option("--user-data-dir <path>", "path to the user data directory. If not specified, a temporary directory will be created.").option("--viewport-size <size>", 'specify browser viewport size in pixels, for example "1280x720"', import_config.resolutionParser.bind(null, "--viewport-size")).addOption(new import_utilsBundle.ProgramOption("--vision", "Legacy option, use --caps=vision instead").hideHelp()).action(async (options) => {
     options.sandbox = options.sandbox === true ? void 0 : false;

package/lib/vite/traceViewer/index.hhnlQ6BY.js

@@ -0,0 +1,2 @@
+import{T as x,r,a as C,W as F,j as e,D as z,b as I,c as P,d as A,e as O,f as V}from"./assets/defaultSettingsView-ConrJv9G.js";const $=()=>{const[o,c]=r.useState(!1),[n,l]=r.useState(),[h,u]=r.useState(),[p,b]=r.useState(N),[f,j]=r.useState({done:0,total:0}),[k,v]=r.useState(!1),[y,m]=r.useState(null),[T,R]=r.useState(null),[U,E]=r.useState(!1),g=r.useCallback(t=>{const s=new URL(window.location.href);if(!t.length)return;const i=t.item(0),a=URL.createObjectURL(i);s.searchParams.append("trace",a);const d=s.toString();window.history.pushState({},"",d),l(a),u(i.name),v(!1),m(null)},[]);r.useEffect(()=>{const t=async s=>{var a;if(!((a=s.clipboardData)!=null&&a.files.length))return;const i=["application/zip","application/x-zip-compressed"];for(const d of s.clipboardData.files)if(!i.includes(d.type))return;s.preventDefault(),g(s.clipboardData.files)};return document.addEventListener("paste",t),()=>document.removeEventListener("paste",t)}),r.useEffect(()=>{const t=s=>{const{method:i,params:a}=s.data;if(i!=="load"||!((a==null?void 0:a.trace)instanceof Blob))return;const d=new File([a.trace],"trace.zip",{type:"application/zip"}),w=new DataTransfer;w.items.add(d),g(w.files)};return window.addEventListener("message",t),()=>window.removeEventListener("message",t)});const W=r.useCallback(t=>{t.preventDefault(),g(t.dataTransfer.files)},[g]),M=r.useCallback(t=>{t.preventDefault(),t.target.files&&g(t.target.files)},[g]);r.useEffect(()=>{const t=new URL(window.location.href).searchParams,s=t.get("trace");if(c(t.has("isServer")),s!=null&&s.startsWith("file:")){R(s||null);return}if(t.has("isServer")){const i=new URLSearchParams(window.location.search).get("ws"),a=new URL(`../${i}`,window.location.toString());a.protocol=window.location.protocol==="https:"?"wss:":"ws:";const d=new C(new F(a));d.onLoadTraceRequested(async w=>{l(w.traceUrl),v(!1),m(null)}),d.initialize({}).catch(()=>{})}else s&&!s.startsWith("blob:")&&l(s)},[]);const S=r.useCallback(async t=>{const s=new URLSearchParams;s.set("trace",t);const i=await fetch(`contexts?${s.toString()}`);if(!i.ok){const{error:w}=await i.json();return m(w),w}const a=await i.json(),d=new x(t,a);j({done:0,total:0}),m(null),b(d)},[]);r.useEffect(()=>{(async()=>{if(!n){b(N);return}const t=s=>{s.data.method==="progress"&&j(s.data.params)};try{navigator.serviceWorker.addEventListener("message",t),j({done:0,total:1});let s=await S(n);s!=null&&s.includes("please grant permission for Local Network Access")&&(await fetch(n,{method:"HEAD",headers:{"x-pw-serviceworker":"skip"}}),s=await S(n)),s&&(o||l(void 0))}finally{navigator.serviceWorker.removeEventListener("message",t)}})()},[o,n,h,S]);const D=f.done!==f.total&&f.total!==0&&!y;r.useEffect(()=>{if(D){const t=setTimeout(()=>{E(!0)},200);return()=>clearTimeout(t)}else E(!1)},[D]);const L=!!(!o&&!k&&!T&&(!n||y));return e.jsxs("div",{className:"vbox workbench-loader",onDragOver:t=>{t.preventDefault(),t.dataTransfer.types.includes("Files")&&v(!0)},children:[e.jsxs("div",{className:"hbox workbench-loader-header",...L?{inert:!0}:{},children:[e.jsx("div",{className:"logo",children:e.jsx("img",{src:"playwright-logo.svg",alt:"Playwright logo"})}),e.jsx("div",{className:"product",children:"Playwright"}),p.title&&e.jsx("div",{className:"title",children:p.title}),e.jsx("div",{className:"spacer"}),e.jsx(z,{icon:"settings-gear",title:"Settings",dialogDataTestId:"settings-toolbar-dialog",children:e.jsx(I,{location:"trace-viewer"})})]}),e.jsx(P,{model:p,inert:L}),T&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{children:"Trace Viewer uses Service Workers to show traces. To view trace:"}),e.jsxs("div",{style:{paddingTop:20},children:[e.jsxs("div",{children:["1. Click ",e.jsx("a",{href:T,children:"here"})," to put your trace into the download shelf"]}),e.jsxs("div",{children:["2. Go to ",e.jsx("a",{href:"https://trace.playwright.dev",children:"trace.playwright.dev"})]}),e.jsx("div",{children:"3. Drop the trace from the download shelf into the page"})]})]}),e.jsx(A,{open:U,isModal:!0,className:"progress-dialog",children:e.jsxs("div",{className:"progress-content",children:[e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Loading Playwright Trace..."}),e.jsx("div",{className:"progress-wrapper",children:e.jsx("div",{className:"inner-progress",style:{width:f.total?100*f.done/f.total+"%":0}})})]})}),L&&e.jsxs("div",{className:"drop-target",children:[e.jsx("div",{className:"processing-error",role:"alert",children:y}),e.jsx("div",{className:"title",role:"heading","aria-level":1,children:"Drop Playwright Trace to load"}),e.jsx("div",{children:"or"}),e.jsx("button",{onClick:()=>{const t=document.createElement("input");t.type="file",t.click(),t.addEventListener("change",s=>M(s))},type:"button",children:"Select file"}),e.jsx("div",{className:"info",children:"Playwright Trace Viewer is a Progressive Web App, it does not send your trace anywhere, it opens it locally."}),e.jsxs("div",{className:"version",children:["Playwright v","1.0.5"]})]}),o&&!n&&e.jsx("div",{className:"drop-target",children:e.jsx("div",{className:"title",children:"Select test to see the trace"})}),k&&e.jsx("div",{className:"drop-target",onDragLeave:()=>{v(!1)},onDrop:t=>W(t),children:e.jsx("div",{className:"title",children:"Release to analyse the Playwright Trace"})})]})},N=new x("",[]),q=({traceJson:o})=>{const[c,n]=r.useState(void 0),[l,h]=r.useState(0),u=r.useRef(null);return r.useEffect(()=>(u.current&&clearTimeout(u.current),u.current=setTimeout(async()=>{try{const p=await B(o);n(p)}catch{const p=new x("",[]);n(p)}finally{h(l+1)}},500),()=>{u.current&&clearTimeout(u.current)}),[o,l]),e.jsx(P,{isLive:!0,model:c})};async function B(o){const c=new URLSearchParams;c.set("trace",o);const l=await(await fetch(`contexts?${c.toString()}`)).json();return new x(o,l)}(async()=>{const o=new URLSearchParams(window.location.search);if(O(),window.location.protocol!=="file:"){if(o.get("isUnderTest")==="true"&&await new Promise(h=>setTimeout(h,1e3)),!navigator.serviceWorker)throw new Error(`Service workers are not supported.
+Make sure to serve the Trace Viewer (${window.location}) via HTTPS or localhost.`);navigator.serviceWorker.register("sw.bundle.js"),navigator.serviceWorker.controller||await new Promise(h=>{navigator.serviceWorker.oncontrollerchange=()=>h()}),setInterval(function(){fetch("ping")},1e4)}const c=o.get("trace"),l=(c==null?void 0:c.endsWith(".json"))?e.jsx(q,{traceJson:c}):e.jsx($,{});V.createRoot(document.querySelector("#root")).render(l)})();

package/lib/vite/traceViewer/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" href="./playwright-logo.svg" type="image/svg+xml">
     <link rel="manifest" href="./manifest.webmanifest">
     <title>Playwright Trace Viewer</title>
-    <script type="module" crossorigin src="./index.CzAVbF3D.js"></script>
+    <script type="module" crossorigin src="./index.hhnlQ6BY.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/defaultSettingsView-ConrJv9G.js">
     <link rel="stylesheet" crossorigin href="./defaultSettingsView.B4dS75f0.css">
     <link rel="stylesheet" crossorigin href="./index.CzXZzn5A.css">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playwright-codegen-pro-core",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Core engine for playwright-codegen-pro — AI-powered Playwright codegen with network capture and MCP integration",
   "repository": {
     "type": "git",