@dev-blinq/cucumber_client 1.0.1428-dev → 1.0.1428-stage

package/bin/client/recorderv3/bvt_recorder.js

@@ -4,20 +4,330 @@ import { existsSync, readdirSync, readFileSync, rmSync } from "fs";
 import path from "path";
 import url from "url";
 import { getImplementedSteps, parseRouteFiles } from "./implemented_steps.js";
-import { NamesService } from "./services.js";
+import { NamesService, RemoteBrowserService, PublishService } from "./services.js";
 import { BVTStepRunner } from "./step_runner.js";
 import { readFile, writeFile } from "fs/promises";
-import { updateStepDefinitions, loadStepDefinitions, getCommandsForImplementedStep } from "./step_utils.js";
-import { updateFeatureFile } from "./update_feature.js";
+import { loadStepDefinitions, getCommandsForImplementedStep } from "./step_utils.js";
 import { parseStepTextParameters } from "../cucumber/utils.js";
 import { AstBuilder, GherkinClassicTokenMatcher, Parser } from "@cucumber/gherkin";
 import chokidar from "chokidar";
 import { unEscapeNonPrintables } from "../cucumber/utils.js";
 import { findAvailablePort } from "../utils/index.js";
 import socketLogger from "../utils/socket_logger.js";
+import { tmpdir } from "os";
+import { faker } from "@faker-js/faker/locale/en_US";
+import { chromium } from "playwright-core";
+
 const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
 
 const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const clipboardBridgeScript = `
+  ;(() => {
+    if (window.__bvtRecorderClipboardBridgeInitialized) {
+      console.log('[ClipboardBridge] Already initialized, skipping');
+      return;
+    }
+    window.__bvtRecorderClipboardBridgeInitialized = true;
+    console.log('[ClipboardBridge] Initializing clipboard bridge');
+
+    const emitPayload = (payload, attempt = 0) => {
+      const reporter = window.__bvt_reportClipboard;
+      if (typeof reporter === "function") {
+        try {
+          console.log('[ClipboardBridge] Reporting clipboard payload:', payload);
+          reporter(payload);
+        } catch (error) {
+          console.warn("[ClipboardBridge] Failed to report payload", error);
+        }
+        return;
+      }
+      if (attempt < 5) {
+        console.log('[ClipboardBridge] Reporter not ready, retrying...', attempt);
+        setTimeout(() => emitPayload(payload, attempt + 1), 50 * (attempt + 1));
+      } else {
+        console.warn('[ClipboardBridge] Reporter never became available');
+      }
+    };
+
+    const fileToBase64 = (file) => {
+      return new Promise((resolve) => {
+        try {
+          const reader = new FileReader();
+          reader.onload = () => {
+            const { result } = reader;
+            if (typeof result === "string") {
+              const index = result.indexOf("base64,");
+              resolve(index !== -1 ? result.substring(index + 7) : result);
+              return;
+            }
+            if (result instanceof ArrayBuffer) {
+              const bytes = new Uint8Array(result);
+              let binary = "";
+              const chunk = 0x8000;
+              for (let i = 0; i < bytes.length; i += chunk) {
+                binary += String.fromCharCode(...bytes.subarray(i, i + chunk));
+              }
+              resolve(btoa(binary));
+              return;
+            }
+            resolve(null);
+          };
+          reader.onerror = () => resolve(null);
+          reader.readAsDataURL(file);
+        } catch (error) {
+          console.warn("[ClipboardBridge] Failed to serialize file", error);
+          resolve(null);
+        }
+      });
+    };
+
+    const handleClipboardEvent = async (event) => {
+      try {
+        console.log('[ClipboardBridge] Handling clipboard event:', event.type);
+        const payload = { trigger: event.type };
+        const clipboardData = event.clipboardData;
+
+        if (clipboardData) {
+          try {
+            const text = clipboardData.getData("text/plain");
+            if (text) {
+              payload.text = text;
+              console.log('[ClipboardBridge] Captured text:', text.substring(0, 50));
+            }
+          } catch (error) {
+            console.warn("[ClipboardBridge] Could not read text/plain", error);
+          }
+
+          try {
+            const html = clipboardData.getData("text/html");
+            if (html) {
+              payload.html = html;
+              console.log('[ClipboardBridge] Captured HTML:', html.substring(0, 50));
+            }
+          } catch (error) {
+            console.warn("[ClipboardBridge] Could not read text/html", error);
+          }
+
+          const files = clipboardData.files;
+          if (files && files.length > 0) {
+            console.log('[ClipboardBridge] Processing files:', files.length);
+            const serialized = [];
+            for (const file of files) {
+              const data = await fileToBase64(file);
+              if (data) {
+                serialized.push({
+                  name: file.name,
+                  type: file.type,
+                  lastModified: file.lastModified,
+                  data,
+                });
+              }
+            }
+            if (serialized.length > 0) {
+              payload.files = serialized;
+            }
+          }
+        }
+
+        if (!payload.text) {
+          try {
+            const selection = window.getSelection?.();
+            const selectionText = selection?.toString?.();
+            if (selectionText) {
+              payload.text = selectionText;
+              console.log('[ClipboardBridge] Using selection text:', selectionText.substring(0, 50));
+            }
+          } catch {
+            // Ignore selection access errors.
+          }
+        }
+
+        emitPayload(payload);
+      } catch (error) {
+        console.warn("[ClipboardBridge] Could not process event", error);
+      }
+    };
+
+    // NEW: Function to apply clipboard data to the page
+    window.__bvt_applyClipboardData = (payload) => {
+      console.log('[ClipboardBridge] Applying clipboard data:', payload);
+      
+      if (!payload) {
+        console.warn('[ClipboardBridge] No payload provided');
+        return false;
+      }
+      
+      try {
+        // Create DataTransfer object
+        let dataTransfer = null;
+        try {
+          dataTransfer = new DataTransfer();
+          console.log('[ClipboardBridge] DataTransfer created');
+        } catch (error) {
+          console.warn('[ClipboardBridge] Could not create DataTransfer', error);
+        }
+        
+        if (dataTransfer) {
+          if (payload.text) {
+            try {
+              dataTransfer.setData("text/plain", payload.text);
+              console.log('[ClipboardBridge] Set text/plain:', payload.text.substring(0, 50));
+            } catch (error) {
+              console.warn('[ClipboardBridge] Failed to set text/plain', error);
+            }
+          }
+          if (payload.html) {
+            try {
+              dataTransfer.setData("text/html", payload.html);
+              console.log('[ClipboardBridge] Set text/html:', payload.html.substring(0, 50));
+            } catch (error) {
+              console.warn('[ClipboardBridge] Failed to set text/html', error);
+            }
+          }
+        }
+        
+        // Get target element
+        let target = document.activeElement || document.body;
+        console.log('[ClipboardBridge] Target element:', {
+          tagName: target.tagName,
+          type: target.type,
+          isContentEditable: target.isContentEditable,
+          id: target.id,
+          className: target.className
+        });
+        
+        // Try synthetic paste event first
+        let pasteHandled = false;
+        if (dataTransfer && target && typeof target.dispatchEvent === "function") {
+          try {
+            const pasteEvent = new ClipboardEvent("paste", {
+              clipboardData: dataTransfer,
+              bubbles: true,
+              cancelable: true,
+            });
+            pasteHandled = target.dispatchEvent(pasteEvent);
+            console.log('[ClipboardBridge] Paste event dispatched, handled:', pasteHandled);
+          } catch (error) {
+            console.warn('[ClipboardBridge] Failed to dispatch paste event', error);
+          }
+        }
+        
+        
+        console.log('[ClipboardBridge] Paste event not handled, trying fallback methods');
+        
+        // Fallback: Try execCommand with HTML first (for contenteditable)
+        if (payload.html && target.isContentEditable) {
+          console.log('[ClipboardBridge] Trying execCommand insertHTML');
+          try {
+            const inserted = document.execCommand('insertHTML', false, payload.html);
+            if (inserted) {
+              console.log('[ClipboardBridge] Successfully inserted HTML via execCommand');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] execCommand insertHTML failed', error);
+          }
+          
+          // Try Range API for HTML
+          console.log('[ClipboardBridge] Trying Range API for HTML');
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              const fragment = range.createContextualFragment(payload.html);
+              range.insertNode(fragment);
+              range.collapse(false);
+              console.log('[ClipboardBridge] Successfully inserted HTML via Range API');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] Range API HTML insertion failed', error);
+          }
+        }
+        
+        // Fallback: Try execCommand with text
+        if (payload.text) {
+          console.log('[ClipboardBridge] Trying execCommand insertText');
+          try {
+            const inserted = document.execCommand('insertText', false, payload.text);
+            if (inserted) {
+              console.log('[ClipboardBridge] Successfully inserted text via execCommand');
+              return true;
+            }
+          } catch (error) {
+            console.warn('[ClipboardBridge] execCommand insertText failed', error);
+          }
+          
+          // Try Range API for text
+          if (target.isContentEditable) {
+            console.log('[ClipboardBridge] Trying Range API for text');
+            try {
+              const selection = window.getSelection?.();
+              if (selection && selection.rangeCount > 0) {
+                const range = selection.getRangeAt(0);
+                range.deleteContents();
+                range.insertNode(document.createTextNode(payload.text));
+                range.collapse(false);
+                console.log('[ClipboardBridge] Successfully inserted text via Range API');
+                return true;
+              }
+            } catch (error) {
+              console.warn('[ClipboardBridge] Range API text insertion failed', error);
+            }
+          }
+          
+          // Last resort: Direct value assignment for input/textarea
+          if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
+            console.log('[ClipboardBridge] Trying direct value assignment');
+            try {
+              const start = target.selectionStart ?? target.value.length ?? 0;
+              const end = target.selectionEnd ?? target.value.length ?? 0;
+              const value = target.value ?? "";
+              const text = payload.text;
+              target.value = value.slice(0, start) + text + value.slice(end);
+              const caret = start + text.length;
+              if (typeof target.setSelectionRange === 'function') {
+                target.setSelectionRange(caret, caret);
+              }
+              target.dispatchEvent(new Event('input', { bubbles: true }));
+              console.log('[ClipboardBridge] Successfully set value directly');
+              return true;
+            } catch (error) {
+              console.warn('[ClipboardBridge] Direct value assignment failed', error);
+            }
+          }
+        }
+        
+        console.warn('[ClipboardBridge] All paste methods failed');
+        return false;
+      } catch (error) {
+        console.error('[ClipboardBridge] Error applying clipboard data:', error);
+        return false;
+      }
+    };
+
+    // Set up event listeners for copy/cut
+    document.addEventListener(
+      "copy",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+    document.addEventListener(
+      "cut",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+    
+    console.log('[ClipboardBridge] Clipboard bridge initialized successfully');
+  })();
+`;
+
 export function getInitScript(config, options) {
   const preScript = `
   window.__bvt_Recorder_config = ${JSON.stringify(config ?? null)};
@@ -27,7 +337,7 @@ export function getInitScript(config, options) {
     path.join(__dirname, "..", "..", "assets", "bundled_scripts", "recorder.js"),
     "utf8"
   );
-  return preScript + recorderScript;
+  return preScript + recorderScript + clipboardBridgeScript;
 }
 
 async function evaluate(frame, script) {
@@ -154,6 +464,17 @@ const transformAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode,
     }
   }
 };
+const diffPaths = (currentPath, newPath) => {
+  const currentDomain = new URL(currentPath).hostname;
+  const newDomain = new URL(newPath).hostname;
+  if (currentDomain !== newDomain) {
+    return true;
+  } else {
+    const currentRoute = new URL(currentPath).pathname;
+    const newRoute = new URL(newPath).pathname;
+    return currentRoute !== newRoute;
+  }
+};
 /**
  * @typedef {Object} BVTRecorderInput
  * @property {string} envName
@@ -183,11 +504,19 @@ export class BVTRecorder {
       projectDir: this.projectDir,
       logger: this.logger,
     });
+    this.workspaceService = new PublishService(this.TOKEN);
     this.pageSet = new Set();
     this.lastKnownUrlPath = "";
     this.world = { attach: () => {} };
     this.shouldTakeScreenshot = true;
     this.watcher = null;
+    this.networkEventsFolder = path.join(tmpdir(), "blinq_network_events");
+    this.tempProjectFolder = `${tmpdir()}/bvt_temp_project_${Math.floor(Math.random() * 1000000)}`;
+    this.tempSnapshotsFolder = path.join(this.tempProjectFolder, "data/snapshots");
+
+    if (existsSync(this.networkEventsFolder)) {
+      rmSync(this.networkEventsFolder, { recursive: true, force: true });
+    }
   }
   events = {
     onFrameNavigate: "BVTRecorder.onFrameNavigate",
@@ -202,6 +531,12 @@ export class BVTRecorder {
     cmdExecutionSuccess: "BVTRecorder.cmdExecutionSuccess",
     cmdExecutionError: "BVTRecorder.cmdExecutionError",
     interceptResults: "BVTRecorder.interceptResults",
+    onDebugURLChange: "BVTRecorder.onDebugURLChange",
+    updateCommand: "BVTRecorder.updateCommand",
+    browserStateSync: "BrowserService.stateSync",
+    browserStateError: "BrowserService.stateError",
+    clipboardPush: "BrowserService.clipboardPush",
+    clipboardError: "BrowserService.clipboardError",
   };
   bindings = {
     __bvt_recordCommand: async ({ frame, page, context }, event) => {
@@ -231,6 +566,25 @@ export class BVTRecorder {
     __bvt_getObject: (_src, obj) => {
       this.processObject(obj);
     },
+    __bvt_reportClipboard: async ({ page }, payload) => {
+      try {
+        if (!payload) {
+          return;
+        }
+        const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+        if (activePage && activePage !== page) {
+          return;
+        }
+        const pageUrl = typeof page?.url === "function" ? page.url() : null;
+        this.sendEvent(this.events.clipboardPush, {
+          data: payload,
+          trigger: payload?.trigger ?? "copy",
+          pageUrl,
+        });
+      } catch (error) {
+        this.logger.error("Error forwarding clipboard payload from page", error);
+      }
+    },
   };
 
   getSnapshot = async (attr) => {
@@ -288,8 +642,12 @@ export class BVTRecorder {
   }
 
   async _initBrowser({ url }) {
-    this.#remoteDebuggerPort = await findAvailablePort();
-    process.env.CDP_LISTEN_PORT = this.#remoteDebuggerPort;
+    if (process.env.CDP_LISTEN_PORT === undefined) {
+      this.#remoteDebuggerPort = await findAvailablePort();
+      process.env.CDP_LISTEN_PORT = this.#remoteDebuggerPort;
+    } else {
+      this.#remoteDebuggerPort = process.env.CDP_LISTEN_PORT;
+    }
 
     // this.stepRunner.setRemoteDebugPort(this.#remoteDebuggerPort);
     this.world = { attach: () => {} };
@@ -312,7 +670,8 @@ export class BVTRecorder {
       ],
     };
 
-    const bvtContext = await initContext(url, false, false, this.world, 450, initScripts, this.envName);
+    const scenario = { pickle: this.scenarioDoc };
+    const bvtContext = await initContext(url, false, false, this.world, 450, initScripts, this.envName, scenario);
     this.bvtContext = bvtContext;
     this.stepRunner = new BVTStepRunner({
       projectDir: this.projectDir,
@@ -338,12 +697,22 @@ export class BVTRecorder {
       },
       bvtContext: this.bvtContext,
     });
-    const context = bvtContext.playContext;
-    this.context = context;
+    this.context = bvtContext.playContext;
     this.web = bvtContext.stable || bvtContext.web;
     this.web.tryAllStrategies = true;
     this.page = bvtContext.page;
     this.pageSet.add(this.page);
+    if (process.env.REMOTE_RECORDER === "true") {
+      this.browserEmitter = new RemoteBrowserService({
+        CDP_CONNECT_URL: `http://localhost:${this.#remoteDebuggerPort}`,
+        context: this.context,
+      });
+      this.browserEmitter.on(this.events.browserStateSync, (state) => {
+        this.page = this.browserEmitter.getSelectedPage();
+        this.sendEvent(this.events.browserStateSync, state);
+      });
+    }
+
     this.lastKnownUrlPath = this._updateUrlPath();
     const browser = await this.context.browser();
     this.browser = browser;
@@ -356,6 +725,14 @@ export class BVTRecorder {
     this.web.onRestoreSaveState = (url) => {
       this._initBrowser({ url });
     };
+
+    // create a second browser for locator generation
+    this.backgroundBrowser = await chromium.launch({
+      headless: true,
+    });
+    this.backgroundContext = await this.backgroundBrowser.newContext({});
+    await this.backgroundContext.addInitScript({ content: this.getInitScripts(this.config) });
+    await this.backgroundContext.newPage();
   }
   async onClosePopup() {
     // console.log("close popups");
@@ -397,13 +774,14 @@ export class BVTRecorder {
 
     await this.page.goto(url, {
       waitUntil: "domcontentloaded",
+      timeout: this.config.page_timeout ?? 60_000,
     });
     // add listener for frame navigation on current tab
     this._addFrameNavigateListener(this.page);
 
     // eval init script on current tab
     // await this._initPage(this.page);
-    this.#currentURL = new URL(url).pathname;
+    this.#currentURL = url;
 
     await this.page.dispatchEvent("html", "scroll");
     await delay(1000);
@@ -445,14 +823,15 @@ export class BVTRecorder {
           element: { inputID: "frame" },
         });
 
-        const newPath = new URL(frame.url()).pathname;
+        const newUrl = frame.url();
+        const newPath = new URL(newUrl).pathname;
         const newTitle = await frame.title();
-        if (newPath !== this.#currentURL) {
+        const changed = diffPaths(this.#currentURL, newUrl);
+
+        if (changed) {
           this.sendEvent(this.events.onFrameNavigate, { url: newPath, title: newTitle });
-          this.#currentURL = newPath;
+          this.#currentURL = newUrl;
         }
-        // await this._setRecordingMode(frame);
-        // await this._initPage(page);
       } catch (error) {
         this.logger.error("Error in frame navigate event");
         this.logger.error(error);
@@ -617,7 +996,6 @@ export class BVTRecorder {
       try {
         if (page.isClosed()) return;
         this.pageSet.add(page);
-
         await page.waitForLoadState("domcontentloaded");
 
         // add listener for frame navigation on new tab
@@ -682,6 +1060,52 @@ export class BVTRecorder {
       console.error("Error in saving screenshot: ", error);
     }
   }
+  async generateLocators(event) {
+    const snapshotDetails = event.snapshotDetails;
+    if (!snapshotDetails) {
+      throw new Error("No snapshot details found");
+    }
+    const mode = event.mode;
+    const inputID = event.element.inputID;
+
+    const { id, contextId, doc } = snapshotDetails;
+    // const selector = `[data-blinq-id="${id}"]`;
+    const newPage = await this.backgroundContext.newPage();
+    await newPage.setContent(doc, { waitUntil: "domcontentloaded" });
+    const locatorsObj = await newPage.evaluate(
+      ([id, contextId, mode]) => {
+        const recorder = window.__bvt_Recorder;
+        const contextElement = document.querySelector(`[data-blinq-context-id="${contextId}"]`);
+        const el = document.querySelector(`[data-blinq-id="${id}"]`);
+        if (contextElement) {
+          const result = recorder.locatorGenerator.toContextLocators(el, contextElement);
+          return result;
+        }
+        const isRecordingText = mode === "recordingText";
+        return recorder.locatorGenerator.getElementLocators(el, {
+          excludeText: isRecordingText,
+        });
+      },
+      [id, contextId, mode]
+    );
+
+    // console.log(`Generated locators: for ${inputID}: `, JSON.stringify(locatorsObj));
+    await newPage.close();
+    if (event.nestFrmLoc?.children) {
+      locatorsObj.nestFrmLoc = event.nestFrmLoc.children;
+    }
+
+    this.sendEvent(this.events.updateCommand, {
+      locators: {
+        locators: locatorsObj.locators,
+        nestFrmLoc: locatorsObj.nestFrmLoc,
+        iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+      },
+      allStrategyLocators: locatorsObj.allStrategyLocators,
+      inputID,
+    });
+    // const
+  }
   async onAction(event) {
     this._updateUrlPath();
     // const locators = this.overlayLocators(event);
@@ -695,25 +1119,26 @@ export class BVTRecorder {
         event.mode === "recordingHover",
         event.mode === "multiInspecting"
       ),
-      locators: {
-        locators: event.locators,
-        iframe_src: !event.frame.isTop ? event.frame.url : undefined,
-      },
-      allStrategyLocators: event.allStrategyLocators,
+      // locators: {
+      //   locators: event.locators,
+      //   iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+      // },
+      // allStrategyLocators: event.allStrategyLocators,
       url: event.frame.url,
       title: event.frame.title,
       extract: {},
       lastKnownUrlPath: this.lastKnownUrlPath,
     };
-    if (event.nestFrmLoc?.children) {
-      cmdEvent.locators.nestFrmLoc = event.nestFrmLoc.children;
-    }
+    // if (event.nestFrmLoc?.children) {
+    //   cmdEvent.locators.nestFrmLoc = event.nestFrmLoc.children;
+    // }
     // this.logger.info({ event });
     if (this.shouldTakeScreenshot) {
       await this.storeScreenshot(event);
     }
     this.sendEvent(this.events.onNewCommand, cmdEvent);
     this._updateUrlPath();
+    await this.generateLocators(event);
   }
   _updateUrlPath() {
     try {
@@ -735,7 +1160,6 @@ export class BVTRecorder {
     this.previousHistoryLength = null;
     this.previousUrl = null;
     this.previousEntries = null;
-
     await closeContext();
     this.pageSet.clear();
   }
@@ -758,25 +1182,26 @@ export class BVTRecorder {
     for (let i = 0; i < 3; i++) {
       result = 0;
       try {
-        for (const page of this.context.pages()) {
-          for (const frame of page.frames()) {
-            try {
-              //scope, text1, tag1, regex1 = false, partial1, ignoreCase = true, _params: Params)
-              const frameResult = await this.web._locateElementByText(
-                frame,
-                searchString,
-                tag,
-                regex,
-                partial,
-                ignoreCase,
-                {}
-              );
-              result += frameResult.elementCount;
-            } catch (e) {
-              console.log(e);
-            }
+        // for (const page of this.context.pages()) {
+        const page = this.web.page;
+        for (const frame of page.frames()) {
+          try {
+            //scope, text1, tag1, regex1 = false, partial1, ignoreCase = true, _params: Params)
+            const frameResult = await this.web._locateElementByText(
+              frame,
+              searchString,
+              tag,
+              regex,
+              partial,
+              ignoreCase,
+              {}
+            );
+            result += frameResult.elementCount;
+          } catch (e) {
+            console.log(e);
           }
         }
+        // }
 
         return result;
       } catch (e) {
@@ -829,17 +1254,27 @@ export class BVTRecorder {
   }
   async runStep({ step, parametersMap, tags, isFirstStep, listenNetwork }, options) {
     const { skipAfter = true, skipBefore = !isFirstStep } = options || {};
+
+    const env = path.basename(this.envName, ".json");
     const _env = {
       TOKEN: this.TOKEN,
       TEMP_RUN: true,
       REPORT_FOLDER: this.bvtContext.reportFolder,
       BLINQ_ENV: this.envName,
-      STORE_DETAILED_NETWORK_DATA: listenNetwork ? "true" : "false",
       DEBUG: "blinq:route",
+      // BVT_TEMP_SNAPSHOTS_FOLDER: step.isImplemented ? path.join(this.tempSnapshotsFolder, env) : undefined,
     };
+    if (!step.isImplemented) {
+      _env.BVT_TEMP_SNAPSHOTS_FOLDER = path.join(this.tempSnapshotsFolder, env);
+    }
 
     this.bvtContext.navigate = true;
     this.bvtContext.loadedRoutes = null;
+    if (listenNetwork) {
+      this.bvtContext.STORE_DETAILED_NETWORK_DATA = true;
+    } else {
+      this.bvtContext.STORE_DETAILED_NETWORK_DATA = false;
+    }
     for (const [key, value] of Object.entries(_env)) {
       process.env[key] = value;
     }
@@ -851,6 +1286,7 @@ export class BVTRecorder {
     await this.setMode("running");
 
     try {
+      step.text = step.text.trim();
       const { result, info } = await this.stepRunner.runStep(
         {
           step,
@@ -877,10 +1313,24 @@ export class BVTRecorder {
       this.bvtContext.navigate = false;
     }
   }
-  async saveScenario({ scenario, featureName, override, isSingleStep }) {
-    await updateStepDefinitions({ scenario, featureName, projectDir: this.projectDir }); // updates mjs files
-    if (!isSingleStep) await updateFeatureFile({ featureName, scenario, override, projectDir: this.projectDir }); // updates gherkin files
-    await this.cleanup({ tags: scenario.tags });
+  async saveScenario({ scenario, featureName, override, isSingleStep, branch, isEditing, env }) {
+    // await updateStepDefinitions({ scenario, featureName, projectDir: this.projectDir }); // updates mjs files
+    // if (!isSingleStep) await updateFeatureFile({ featureName, scenario, override, projectDir: this.projectDir }); // updates gherkin files
+    const res = await this.workspaceService.saveScenario({
+      scenario,
+      featureName,
+      override,
+      isSingleStep,
+      branch,
+      isEditing,
+      projectId: path.basename(this.projectDir),
+      env: env ?? this.envName,
+    });
+    if (res.success) {
+      await this.cleanup({ tags: scenario.tags });
+    } else {
+      throw new Error(res.message || "Error saving scenario");
+    }
   }
   async getImplementedSteps() {
     const stepsAndScenarios = await getImplementedSteps(this.projectDir);
@@ -1045,6 +1495,7 @@ export class BVTRecorder {
     const featureFilePath = path.join(this.projectDir, "features", featureName);
     const gherkinDoc = this.parseFeatureFile(featureFilePath);
     const scenario = gherkinDoc.feature.children.find((child) => child.scenario.name === scenarioName)?.scenario;
+    this.scenarioDoc = scenario;
 
     const steps = [];
     const parameters = [];
@@ -1219,4 +1670,515 @@ export class BVTRecorder {
     }
     return {};
   }
+
+  stopRecordingNetwork(input) {
+    if (this.bvtContext) {
+      this.bvtContext.STORE_DETAILED_NETWORK_DATA = false;
+    }
+  }
+
+  async fakeParams(params) {
+    const newFakeParams = {};
+    Object.keys(params).forEach((key) => {
+      if (!params[key].startsWith("{{") || !params[key].endsWith("}}")) {
+        newFakeParams[key] = params[key];
+        return;
+      }
+
+      try {
+        const value = params[key].substring(2, params[key].length - 2).trim();
+        const faking = value.split("(")[0].split(".");
+        let argument = value.substring(value.indexOf("(") + 1, value.lastIndexOf(")"));
+        argument = isNaN(Number(argument)) || argument === "" ? argument : Number(argument);
+        let fakeFunc = faker;
+        faking.forEach((f) => {
+          fakeFunc = fakeFunc[f];
+        });
+        const newValue = fakeFunc(argument);
+        newFakeParams[key] = newValue;
+      } catch (error) {
+        newFakeParams[key] = params[key];
+      }
+    });
+
+    return newFakeParams;
+  }
+
+  async getBrowserState() {
+    try {
+      const state = await this.browserEmitter?.getState();
+      this.sendEvent(this.events.browserStateSync, state);
+    } catch (error) {
+      this.logger.error("Error getting browser state:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error getting browser state",
+        code: "GET_STATE_ERROR",
+      });
+    }
+  }
+
+  async applyClipboardPayload(message) {
+    const payload = message?.data ?? message;
+
+    this.logger.info("[BVTRecorder] applyClipboardPayload called", {
+      hasPayload: !!payload,
+      hasText: !!payload?.text,
+      hasHtml: !!payload?.html,
+      trigger: message?.trigger,
+    });
+
+    if (!payload) {
+      this.logger.warn("[BVTRecorder] No payload provided");
+      return;
+    }
+
+    try {
+      if (this.browserEmitter && typeof this.browserEmitter.applyClipboardPayload === "function") {
+        this.logger.info("[BVTRecorder] Using RemoteBrowserService to apply clipboard");
+        await this.browserEmitter.applyClipboardPayload(payload);
+        return;
+      }
+
+      const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+      if (!activePage) {
+        this.logger.warn("[BVTRecorder] No active page available");
+        return;
+      }
+
+      this.logger.info("[BVTRecorder] Applying clipboard to page", {
+        url: activePage.url(),
+        isClosed: activePage.isClosed(),
+      });
+
+      const result = await activePage.evaluate((clipboardData) => {
+        console.log("[Page] Executing clipboard application", clipboardData);
+        if (typeof window.__bvt_applyClipboardData === "function") {
+          return window.__bvt_applyClipboardData(clipboardData);
+        }
+        console.error("[Page] __bvt_applyClipboardData function not found!");
+        return false;
+      }, payload);
+
+      this.logger.info("[BVTRecorder] Clipboard application result:", result);
+
+      if (!result) {
+        this.logger.warn("[BVTRecorder] Clipboard data not applied successfully");
+      } else {
+        this.logger.info("[BVTRecorder] Clipboard data applied successfully");
+      }
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error applying clipboard payload", error);
+      this.sendEvent(this.events.clipboardError, {
+        message: "Failed to apply clipboard contents to the remote session",
+        trigger: message?.trigger ?? "paste",
+      });
+    }
+  }
+
+  hasClipboardPayload(payload) {
+    return Boolean(
+      payload && (payload.text || payload.html || (Array.isArray(payload.files) && payload.files.length > 0))
+    );
+  }
+
+  async collectClipboardFromPage(page) {
+    if (!page) {
+      this.logger.warn("[BVTRecorder] No page available to collect clipboard data");
+      return null;
+    }
+    try {
+      await page
+        .context()
+        .grantPermissions(["clipboard-read", "clipboard-write"])
+        .catch((error) => {
+          this.logger.warn("[BVTRecorder] Failed to grant clipboard permissions before read", error);
+        });
+
+      const payload = await page.evaluate(async () => {
+        const result = {};
+        if (typeof navigator === "undefined" || !navigator.clipboard) {
+          return result;
+        }
+
+        const arrayBufferToBase64 = (buffer) => {
+          let binary = "";
+          const bytes = new Uint8Array(buffer);
+          const chunkSize = 0x8000;
+          for (let index = 0; index < bytes.length; index += chunkSize) {
+            const chunk = bytes.subarray(index, index + chunkSize);
+            binary += String.fromCharCode(...chunk);
+          }
+          return btoa(binary);
+        };
+
+        const files = [];
+
+        if (typeof navigator.clipboard.read === "function") {
+          try {
+            const items = await navigator.clipboard.read();
+            for (const item of items) {
+              if (item.types.includes("text/html") && !result.html) {
+                const blob = await item.getType("text/html");
+                result.html = await blob.text();
+              }
+              if (item.types.includes("text/plain") && !result.text) {
+                const blob = await item.getType("text/plain");
+                result.text = await blob.text();
+              }
+              for (const type of item.types) {
+                if (type.startsWith("text/")) {
+                  continue;
+                }
+                try {
+                  const blob = await item.getType(type);
+                  const buffer = await blob.arrayBuffer();
+                  files.push({
+                    name: `clipboard-file-${files.length + 1}`,
+                    type,
+                    lastModified: Date.now(),
+                    data: arrayBufferToBase64(buffer),
+                  });
+                } catch (error) {
+                  console.warn("[BVTRecorder] Failed to serialize clipboard blob", { type, error });
+                }
+              }
+            }
+          } catch (error) {
+            console.warn("[BVTRecorder] navigator.clipboard.read failed", error);
+          }
+        }
+
+        if (!result.text && typeof navigator.clipboard.readText === "function") {
+          try {
+            const text = await navigator.clipboard.readText();
+            if (text) {
+              result.text = text;
+            }
+          } catch (error) {
+            console.warn("[BVTRecorder] navigator.clipboard.readText failed", error);
+          }
+        }
+
+        if (!result.text) {
+          const selection = window.getSelection?.()?.toString?.();
+          if (selection) {
+            result.text = selection;
+          }
+        }
+
+        if (files.length > 0) {
+          result.files = files;
+        }
+
+        return result;
+      });
+
+      return payload;
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error collecting clipboard payload", error);
+      return null;
+    }
+  }
+
+  async readClipboardPayload(message) {
+    try {
+      let payload = null;
+      if (this.browserEmitter && typeof this.browserEmitter.readClipboardPayload === "function") {
+        payload = await this.browserEmitter.readClipboardPayload();
+      } else {
+        const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+        payload = await this.collectClipboardFromPage(activePage);
+      }
+
+      if (this.hasClipboardPayload(payload)) {
+        this.logger.info("[BVTRecorder] Remote clipboard payload ready", {
+          hasText: !!payload.text,
+          hasHtml: !!payload.html,
+          files: payload.files?.length ?? 0,
+        });
+        this.sendEvent(this.events.clipboardPush, {
+          data: payload,
+          trigger: message?.trigger ?? "copy",
+          origin: message?.source ?? "browserUI",
+        });
+        return payload;
+      }
+
+      this.logger.warn("[BVTRecorder] Remote clipboard payload empty or unavailable");
+      this.sendEvent(this.events.clipboardError, {
+        message: "Remote clipboard is empty",
+        trigger: message?.trigger ?? "copy",
+      });
+      return null;
+    } catch (error) {
+      this.logger.error("[BVTRecorder] Error reading clipboard payload", error);
+      this.sendEvent(this.events.clipboardError, {
+        message: "Failed to read clipboard contents from the remote session",
+        trigger: message?.trigger ?? "copy",
+        details: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
+  }
+
+  async injectClipboardIntoPage(page, payload) {
+    if (!page) {
+      return;
+    }
+
+    try {
+      await page
+        .context()
+        .grantPermissions(["clipboard-read", "clipboard-write"])
+        .catch(() => {});
+      await page.evaluate(async (clipboardPayload) => {
+        const toArrayBuffer = (base64) => {
+          if (!base64) {
+            return null;
+          }
+          const binaryString = atob(base64);
+          const len = binaryString.length;
+          const bytes = new Uint8Array(len);
+          for (let i = 0; i < len; i += 1) {
+            bytes[i] = binaryString.charCodeAt(i);
+          }
+          return bytes.buffer.slice(bytes.byteOffset, bytes.byteOffset + bytes.byteLength);
+        };
+
+        const createFileFromPayload = (filePayload) => {
+          const buffer = toArrayBuffer(filePayload?.data);
+          if (!buffer) {
+            return null;
+          }
+          const name = filePayload?.name || "clipboard-file";
+          const type = filePayload?.type || "application/octet-stream";
+          const lastModified = filePayload?.lastModified ?? Date.now();
+          try {
+            return new File([buffer], name, { type, lastModified });
+          } catch (error) {
+            console.warn("Clipboard bridge could not recreate File object", error);
+            return null;
+          }
+        };
+
+        let dataTransfer = null;
+        try {
+          dataTransfer = new DataTransfer();
+        } catch (error) {
+          console.warn("Clipboard bridge could not create DataTransfer", error);
+        }
+
+        if (dataTransfer) {
+          if (clipboardPayload?.text) {
+            try {
+              dataTransfer.setData("text/plain", clipboardPayload.text);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to set text/plain", error);
+            }
+          }
+          if (clipboardPayload?.html) {
+            try {
+              dataTransfer.setData("text/html", clipboardPayload.html);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to set text/html", error);
+            }
+          }
+          if (Array.isArray(clipboardPayload?.files)) {
+            for (const filePayload of clipboardPayload.files) {
+              const file = createFileFromPayload(filePayload);
+              if (file) {
+                try {
+                  dataTransfer.items.add(file);
+                } catch (error) {
+                  console.warn("Clipboard bridge failed to append file", error);
+                }
+              }
+            }
+          }
+        }
+
+        let target = document.activeElement || document.body;
+        if (!target) {
+          target = document.body || null;
+        }
+
+        let pasteHandled = false;
+        if (dataTransfer && target && typeof target.dispatchEvent === "function") {
+          try {
+            const clipboardEvent = new ClipboardEvent("paste", {
+              clipboardData: dataTransfer,
+              bubbles: true,
+              cancelable: true,
+            });
+            pasteHandled = target.dispatchEvent(clipboardEvent);
+          } catch (error) {
+            console.warn("Clipboard bridge failed to dispatch synthetic paste event", error);
+          }
+        }
+
+        if (pasteHandled) {
+          return;
+        }
+
+        const callLegacyExecCommand = (command, value) => {
+          const execCommand = document && document["execCommand"];
+          if (typeof execCommand === "function") {
+            try {
+              return execCommand.call(document, command, false, value);
+            } catch (error) {
+              console.warn("Clipboard bridge failed to execute legacy command", error);
+            }
+          }
+          return false;
+        };
+
+        if (clipboardPayload?.html) {
+          const inserted = callLegacyExecCommand("insertHTML", clipboardPayload.html);
+          if (inserted) {
+            return;
+          }
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              const fragment = range.createContextualFragment(clipboardPayload.html);
+              range.insertNode(fragment);
+              range.collapse(false);
+              return;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not insert HTML via Range APIs", error);
+          }
+        }
+
+        if (clipboardPayload?.text) {
+          const inserted = callLegacyExecCommand("insertText", clipboardPayload.text);
+          if (inserted) {
+            return;
+          }
+          try {
+            const selection = window.getSelection?.();
+            if (selection && selection.rangeCount > 0) {
+              const range = selection.getRangeAt(0);
+              range.deleteContents();
+              range.insertNode(document.createTextNode(clipboardPayload.text));
+              range.collapse(false);
+              return;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not insert text via Range APIs", error);
+          }
+        }
+
+        if (clipboardPayload?.text && target && "value" in target) {
+          try {
+            const input = target;
+            const start = input.selectionStart ?? input.value.length ?? 0;
+            const end = input.selectionEnd ?? input.value.length ?? 0;
+            const value = input.value ?? "";
+            const text = clipboardPayload.text;
+            input.value = `${value.slice(0, start)}${text}${value.slice(end)}`;
+            const caret = start + text.length;
+            if (typeof input.setSelectionRange === "function") {
+              input.setSelectionRange(caret, caret);
+            }
+            input.dispatchEvent(new Event("input", { bubbles: true }));
+          } catch (error) {
+            console.warn("Clipboard bridge failed to mutate input element", error);
+          }
+        }
+      }, payload);
+    } catch (error) {
+      throw error;
+    }
+  }
+
+  async createTab(url) {
+    try {
+      await this.browserEmitter?.createTab(url);
+    } catch (error) {
+      this.logger.error("Error creating tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error creating tab",
+        code: "CREATE_TAB_ERROR",
+      });
+    }
+  }
+
+  async closeTab(pageId) {
+    try {
+      await this.browserEmitter?.closeTab(pageId);
+    } catch (error) {
+      this.logger.error("Error closing tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error closing tab",
+        code: "CLOSE_TAB_ERROR",
+      });
+    }
+  }
+
+  async selectTab(pageId) {
+    try {
+      await this.browserEmitter?.selectTab(pageId);
+    } catch (error) {
+      this.logger.error("Error selecting tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error selecting tab",
+        code: "SELECT_TAB_ERROR",
+      });
+    }
+  }
+
+  async navigateTab({ pageId, url }) {
+    try {
+      if (!pageId || !url) {
+        this.logger.error("navigateTab called without pageId or url", { pageId, url });
+        return;
+      }
+      await this.browserEmitter?.navigateTab(pageId, url);
+    } catch (error) {
+      this.logger.error("Error navigating tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating tab",
+        code: "NAVIGATE_TAB_ERROR",
+      });
+    }
+  }
+
+  async reloadTab(pageId) {
+    try {
+      await this.browserEmitter?.reloadTab(pageId);
+    } catch (error) {
+      this.logger.error("Error reloading tab:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error reloading tab",
+        code: "RELOAD_TAB_ERROR",
+      });
+    }
+  }
+
+  async goBack(pageId) {
+    try {
+      await this.browserEmitter?.goBack(pageId);
+    } catch (error) {
+      this.logger.error("Error navigating back:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating back",
+        code: "GO_BACK_ERROR",
+      });
+    }
+  }
+
+  async goForward(pageId) {
+    try {
+      await this.browserEmitter?.goForward(pageId);
+    } catch (error) {
+      this.logger.error("Error navigating forward:", error);
+      this.sendEvent(this.events.browserStateError, {
+        message: "Error navigating forward",
+        code: "GO_FORWARD_ERROR",
+      });
+    }
+  }
 }