playwright-codegen-pro-core 1.0.2 → 1.0.3

package/lib/cli/program.js

@@ -305,7 +305,7 @@ import_utilsBundle.program.command("cli", { hidden: true }).allowExcessArguments
   process.argv.splice(process.argv.indexOf("cli"), 1);
   (0, import_program.program)();
 });
-async function launchContext(options, extraOptions) {
+async function launchContext(options, extraOptions, extraContextOptions = {}) {
   validateOptions(options);
   const browserType = lookupBrowserType(options);
   const launchOptions = extraOptions;
@@ -314,7 +314,7 @@ async function launchContext(options, extraOptions) {
   launchOptions.handleSIGINT = false;
   const contextOptions = (
     // Copy the device descriptor since we have to compare and modify the options.
-    options.device ? { ...playwright.devices[options.device] } : {}
+    options.device ? { ...playwright.devices[options.device], ...extraContextOptions } : { ...extraContextOptions }
   );
   if (!extraOptions.headless)
     contextOptions.deviceScaleFactor = import_os.default.platform() === "darwin" ? 2 : 1;
@@ -438,10 +438,17 @@ async function open(options, url) {
 async function codegen(options, url) {
   const { target: language, output: outputFile, testIdAttribute: testIdAttributeName } = options;
   const tracesDir = import_path.default.join(import_os.default.tmpdir(), `playwright-recorder-trace-${Date.now()}`);
+  const videoDir = import_path.default.join(process.cwd(), ".playwright-session-video");
+  try {
+    import_fs.default.rmSync(videoDir, { recursive: true, force: true });
+  } catch {
+  }
   const { context, browser, launchOptions, contextOptions, closeBrowser } = await launchContext(options, {
     headless: !!process.env.PWTEST_CLI_HEADLESS,
     executablePath: process.env.PWTEST_CLI_EXECUTABLE_PATH,
     tracesDir
+  }, {
+    recordVideo: { dir: videoDir, size: { width: 1280, height: 720 } }
   });
   const donePromise = new import_utils.ManualPromise();
   maybeSetupTestHooks(browser, closeBrowser, donePromise);

package/lib/server/recorder/recorderApp.js

@@ -60,6 +60,9 @@ class RecorderApp {
     this._inspectedContext = null;
     this._scenarioName = "my scenario";
     this._throttledSessionFile = null;
+    this._screenshotDir = null;
+    this._actionScreenshots = /* @__PURE__ */ new Map();
+    this._screenshotCounter = 0;
     this._page = page;
     this._recorder = recorder;
     this._frontend = createRecorderFrontend(page);
@@ -73,8 +76,18 @@ class RecorderApp {
     };
     this._aiCodegen = !!params.aiCodegen;
     this._throttledOutputFile = params.outputFile ? new import_throttledFile.ThrottledFile(params.outputFile) : null;
-    if (this._aiCodegen)
+    if (this._aiCodegen) {
       this._throttledSessionFile = new import_throttledFile.ThrottledFile(import_path.default.join(process.cwd(), ".playwright-session.md"));
+      this._screenshotDir = import_path.default.join(process.cwd(), ".playwright-session-screenshots");
+      try {
+        import_fs.default.rmSync(this._screenshotDir, { recursive: true, force: true });
+      } catch {
+      }
+      try {
+        import_fs.default.mkdirSync(this._screenshotDir, { recursive: true });
+      } catch {
+      }
+    }
     this._primaryGeneratorId = process.env.TEST_INSPECTOR_LANGUAGE || params.language || determinePrimaryGeneratorId(params.sdkLanguage);
     this._selectedGeneratorId = this._primaryGeneratorId;
     for (const languageGenerator of (0, import_languages.languageSet)()) {
@@ -113,6 +126,7 @@ class RecorderApp {
         this._networkCapture?.dispose();
         this._networkCapture = null;
         this._recorder.close();
+        void this._finalizeVideo();
         inspectedContext.close({ reason: "Recorder window closed" }).catch(() => {
         });
         this._page.browserContext.close({ reason: "Recorder window closed" }).catch(() => {
@@ -265,6 +279,7 @@ class RecorderApp {
       this._throttledSessionFile?.flush();
       this._networkCapture?.dispose();
       this._networkCapture = null;
+      void this._finalizeVideo();
       this._page.browserContext.close({ reason: "Recorder window closed" }).catch(() => {
       });
     });
@@ -300,6 +315,27 @@ class RecorderApp {
     this._actions.push(action);
     this._networkCapture?.onActionAdded(action);
     this._updateActions("reveal");
+    void this._captureScreenshotForAction(action);
+  }
+  async _captureScreenshotForAction(action) {
+    if (!this._screenshotDir || !this._inspectedContext)
+      return;
+    const page = findPageByGuid(this._inspectedContext, action.frame.pageGuid);
+    if (!page)
+      return;
+    const index = ++this._screenshotCounter;
+    const filename = `${String(index).padStart(3, "0")}-${action.action.name}.png`;
+    const filepath = import_path.default.join(this._screenshotDir, filename);
+    try {
+      const controller = new import_progress.ProgressController();
+      await controller.run(async (progress) => {
+        const buffer = await page.screenshot(progress, { type: "png", fullPage: false });
+        await import_fs.default.promises.writeFile(filepath, buffer);
+      });
+      this._actionScreenshots.set(action, filepath);
+      this._updateActions();
+    } catch {
+    }
   }
   _onSignalAdded(signal) {
     const lastAction = this._actions.findLast((a) => a.frame.pageGuid === signal.frame.pageGuid);
@@ -364,7 +400,9 @@ class RecorderApp {
         scenarioName: this._scenarioName,
         outputFile: "tests/" + this._scenarioName.replace(/\s+/g, "-") + ".spec.ts",
         mode: "clipboard",
-        pageHasWebSockets: false
+        pageHasWebSockets: false,
+        screenshots: this._actionScreenshots,
+        videoPath: this._aiCodegen ? ".playwright-session.webm" : void 0
       });
       this._throttledSessionFile.setContent(prompt);
     }
@@ -399,7 +437,9 @@ class RecorderApp {
         scenarioName,
         outputFile,
         mode: "clipboard",
-        pageHasWebSockets: false
+        pageHasWebSockets: false,
+        screenshots: this._actionScreenshots,
+        videoPath: this._aiCodegen ? ".playwright-session.webm" : void 0
       });
       const promptFilePath = import_path.default.join(process.cwd(), ".playwright-prompt.md");
       await import_fs.default.promises.writeFile(promptFilePath, prompt, "utf-8");
@@ -414,6 +454,26 @@ class RecorderApp {
       this._emitGenerationStatus({ status: "error", message: String(error?.message ?? error), progress: 0 });
     }
   }
+  async _finalizeVideo() {
+    if (!this._aiCodegen)
+      return;
+    const videoDir = import_path.default.join(process.cwd(), ".playwright-session-video");
+    const finalPath = import_path.default.join(process.cwd(), ".playwright-session.webm");
+    for (let attempt = 0; attempt < 10; attempt++) {
+      try {
+        const files = await import_fs.default.promises.readdir(videoDir);
+        const webmFile = files.find((f) => f.endsWith(".webm"));
+        if (webmFile) {
+          await import_fs.default.promises.rename(import_path.default.join(videoDir, webmFile), finalPath);
+          await import_fs.default.promises.rm(videoDir, { recursive: true, force: true }).catch(() => {
+          });
+          return;
+        }
+      } catch {
+      }
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+  }
   async _runGeneration(scenarioName, outputFile) {
     if (!process.env.PW_AI_ENDPOINT) {
       await this._exportPrompt(scenarioName, outputFile);

package/lib/server/recorder/sessionPromptBuilder.js

@@ -55,6 +55,10 @@ function buildPrompt(session, options) {
       const a = ctx.action;
       const location = a.selector ? `${a.selector}` : a.url ?? "";
       sessionSection += `- ${a.name}: ${location} at t=${ctx.startTime}ms
+`;
+      const screenshot = options.screenshots?.get(ctx);
+      if (screenshot)
+        sessionSection += `  Screenshot: ${import_path.default.relative(process.cwd(), screenshot)}
 `;
       const direct = (ctx.networkEvents ?? []).filter((e) => e.bucket === "direct");
       const pageLoad = (ctx.networkEvents ?? []).filter((e) => e.bucket === "pageLoad");
@@ -92,13 +96,25 @@ function buildPrompt(session, options) {
     cleanupSection = "## Data Created During Session\nNo data was created. No cleanup needed.\n";
   }
   const wsSection = hasWebSockets ? "## WebSocket Note\nThis page uses WebSocket connections. Assert on UI state changes that reflect server pushes rather than trying to intercept WS frames.\n\n" : "";
+  const screenshotCount = options.screenshots?.size ?? 0;
+  let visualSection = "";
+  if (screenshotCount > 0 || options.videoPath) {
+    visualSection = "## Visual Context\n";
+    if (screenshotCount > 0)
+      visualSection += `Per-action screenshots: ${screenshotCount} file(s) under .playwright-session-screenshots/ \u2014 referenced inline below. Read them as visual context for each step.
+`;
+    if (options.videoPath)
+      visualSection += `Full session video: ${options.videoPath} (finalized when the recorder window is closed).
+`;
+    visualSection += "\n";
+  }
   return `# Playwright Test Generation Request
 
 ## Scenario
 Name: ${options.scenarioName}
 Target file: ${relativeOutput}
 
-## Recorded Session
+${visualSection}## Recorded Session
 ${sessionSection.trimEnd()}
 
 ${cleanupSection}

package/package.json

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