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

package/bin/client/recorderv3/bvt_recorder.js

@@ -4,7 +4,7 @@ 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, PublishService, RemoteBrowserService } from "./services.js";
 import { BVTStepRunner } from "./step_runner.js";
 import { readFile, writeFile } from "fs/promises";
 import { updateStepDefinitions, loadStepDefinitions, getCommandsForImplementedStep } from "./step_utils.js";
@@ -12,11 +12,12 @@ import { updateFeatureFile } from "./update_feature.js";
 import { parseStepTextParameters } from "../cucumber/utils.js";
 import { AstBuilder, GherkinClassicTokenMatcher, Parser } from "@cucumber/gherkin";
 import chokidar from "chokidar";
-import logger from "../../logger.js";
 import { unEscapeNonPrintables } from "../cucumber/utils.js";
 import { findAvailablePort } from "../utils/index.js";
-import { Step } from "../cucumber/feature.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));
@@ -29,7 +30,139 @@ export function getInitScript(config, options) {
     path.join(__dirname, "..", "..", "assets", "bundled_scripts", "recorder.js"),
     "utf8"
   );
-  return preScript + recorderScript;
+  const clipboardBridgeScript = `
+  ;(() => {
+    if (window.__bvtRecorderClipboardBridgeInitialized) {
+      return;
+    }
+    window.__bvtRecorderClipboardBridgeInitialized = true;
+
+    const emitPayload = (payload, attempt = 0) => {
+      const reporter = window.__bvt_reportClipboard;
+      if (typeof reporter === "function") {
+        try {
+          reporter(payload);
+        } catch (error) {
+          console.warn("Clipboard bridge failed to report payload", error);
+        }
+        return;
+      }
+      if (attempt < 5) {
+        setTimeout(() => emitPayload(payload, attempt + 1), 50 * (attempt + 1));
+      }
+    };
+
+    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("Clipboard bridge failed to serialize file", error);
+          resolve(null);
+        }
+      });
+    };
+
+    const handleClipboardEvent = async (event) => {
+      try {
+        const payload = { trigger: event.type };
+        const clipboardData = event.clipboardData;
+
+        if (clipboardData) {
+          try {
+            const text = clipboardData.getData("text/plain");
+            if (text) {
+              payload.text = text;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not read text/plain", error);
+          }
+
+          try {
+            const html = clipboardData.getData("text/html");
+            if (html) {
+              payload.html = html;
+            }
+          } catch (error) {
+            console.warn("Clipboard bridge could not read text/html", error);
+          }
+
+          const files = clipboardData.files;
+          if (files && files.length > 0) {
+            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;
+            }
+          } catch {
+            // Ignore selection access errors.
+          }
+        }
+
+        emitPayload(payload);
+      } catch (error) {
+        console.warn("Clipboard bridge could not process event", error);
+      }
+    };
+
+    document.addEventListener(
+      "copy",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+    document.addEventListener(
+      "cut",
+      (event) => {
+        void handleClipboardEvent(event);
+      },
+      true
+    );
+  })();
+  `;
+  return preScript + recorderScript + clipboardBridgeScript;
 }
 
 async function evaluate(frame, script) {
@@ -45,7 +178,6 @@ async function evaluate(frame, script) {
 async function findNestedFrameSelector(frame, obj) {
   try {
     const parent = frame.parentFrame();
-    if (parent) console.log(`Parent frame: ${JSON.stringify(parent)}`);
     if (!parent) return { children: obj };
     const frameElement = await frame.frameElement();
     if (!frameElement) return;
@@ -54,6 +186,7 @@ async function findNestedFrameSelector(frame, obj) {
     }, frameElement);
     return findNestedFrameSelector(parent, { children: obj, selectors });
   } catch (e) {
+    socketLogger.error(`Error in findNestedFrameSelector: ${e}`);
     console.error(e);
   }
 }
@@ -150,17 +283,30 @@ const transformAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode,
       };
     }
     default: {
+      socketLogger.error(`Action not supported: ${action.name}`);
       console.log("action not supported", action);
       throw new Error("action not supported");
     }
   }
 };
+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
  * @property {string} projectDir
  * @property {string} TOKEN
  * @property {(name:string, data:any)=> void} sendEvent
+ * @property {Object} logger
  */
 export class BVTRecorder {
   #currentURL = "";
@@ -174,7 +320,6 @@ export class BVTRecorder {
    */
   constructor(initialState) {
     Object.assign(this, initialState);
-    this.logger = logger;
     this.screenshotMap = new Map();
     this.snapshotMap = new Map();
     this.scenariosStepsMap = new Map();
@@ -184,40 +329,20 @@ export class BVTRecorder {
       projectDir: this.projectDir,
       logger: this.logger,
     });
-    this.stepRunner = new BVTStepRunner({
-      projectDir: this.projectDir,
-      sendExecutionStatus: (data) => {
-        if (data && data.type) {
-          switch (data.type) {
-            case "cmdExecutionStart":
-              console.log("Sending cmdExecutionStart event for cmdId:", data);
-              this.sendEvent(this.events.cmdExecutionStart, data);
-              break;
-            case "cmdExecutionSuccess":
-              console.log("Sending cmdExecutionSuccess event for cmdId:", data);
-              this.sendEvent(this.events.cmdExecutionSuccess, data);
-              break;
-            case "cmdExecutionError":
-              console.log("Sending cmdExecutionError event for cmdId:", data);
-              this.sendEvent(this.events.cmdExecutionError, data);
-              break;
-            case "interceptResults":
-              console.log("Sending interceptResults event");
-              this.sendEvent(this.events.interceptResults, data);
-              break;
-            default:
-              console.warn("Unknown command execution status type:", data.type);
-              break;
-          }
-        }
-      },
-    });
+    this.workspaceService = new PublishService(this.TOKEN);
     this.pageSet = new Set();
+    this.pageMetaDataSet = new Set();
     this.lastKnownUrlPath = "";
-    // TODO: what is world?
     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",
@@ -232,12 +357,18 @@ 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) => {
       this.#activeFrame = frame;
       const nestFrmLoc = await findNestedFrameSelector(frame);
-      console.log(`Time taken for action: ${event.statistics.time}`);
+      this.logger.info(`Time taken for action: ${event.statistics.time}`);
       await this.onAction({ ...event, nestFrmLoc });
     },
     __bvt_getMode: async () => {
@@ -256,12 +387,30 @@ export class BVTRecorder {
       await this.onClosePopup();
     },
     __bvt_log: async (src, message) => {
-      // this.logger.info(message);
-      console.log(`Inside Browser: ${message}`);
+      this.logger.info(`Inside Browser: ${message}`);
     },
     __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) => {
@@ -319,10 +468,11 @@ export class BVTRecorder {
   }
 
   async _initBrowser({ url }) {
+    socketLogger.info("Only present in 1.0.1293-stage");
     this.#remoteDebuggerPort = await findAvailablePort();
     process.env.CDP_LISTEN_PORT = this.#remoteDebuggerPort;
 
-    this.stepRunner.setRemoteDebugPort(this.#remoteDebuggerPort);
+    // this.stepRunner.setRemoteDebugPort(this.#remoteDebuggerPort);
     this.world = { attach: () => {} };
 
     const ai_config_file = path.join(this.projectDir, "ai_config.json");
@@ -331,7 +481,7 @@ export class BVTRecorder {
       try {
         ai_config = JSON.parse(readFileSync(ai_config_file, "utf8"));
       } catch (error) {
-        console.error("Error reading ai_config.json", error);
+        this.logger.error("Error reading ai_config.json", error);
       }
     }
     this.config = ai_config;
@@ -343,18 +493,47 @@ export class BVTRecorder {
       ],
     };
 
-    let startTime = Date.now();
     const bvtContext = await initContext(url, false, false, this.world, 450, initScripts, this.envName);
-    let stopTime = Date.now();
-    this.logger.info(`Browser launched in ${(stopTime - startTime) / 1000} s`);
     this.bvtContext = bvtContext;
-    const context = bvtContext.playContext;
-    this.context = context;
+    this.stepRunner = new BVTStepRunner({
+      projectDir: this.projectDir,
+      sendExecutionStatus: (data) => {
+        if (data && data.type) {
+          switch (data.type) {
+            case "cmdExecutionStart":
+              this.sendEvent(this.events.cmdExecutionStart, data);
+              break;
+            case "cmdExecutionSuccess":
+              this.sendEvent(this.events.cmdExecutionSuccess, data);
+              break;
+            case "cmdExecutionError":
+              this.sendEvent(this.events.cmdExecutionError, data);
+              break;
+            case "interceptResults":
+              this.sendEvent(this.events.interceptResults, data);
+              break;
+            default:
+              break;
+          }
+        }
+      },
+      bvtContext: this.bvtContext,
+    });
+    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;
@@ -367,6 +546,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");
@@ -381,13 +568,15 @@ export class BVTRecorder {
         }
         return;
       } catch (error) {
-        console.error("Error evaluting in context:", error);
+        // console.error("Error evaluting in context:", error);
+        this.logger.error("Error evaluating in context:", error);
       }
     }
   }
 
   getMode() {
-    console.log("getMode", this.#mode);
+    // console.log("getMode", this.#mode);
+    this.logger.info("Current mode:", this.#mode);
     return this.#mode;
   }
 
@@ -412,7 +601,7 @@ export class BVTRecorder {
 
     // 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);
@@ -429,6 +618,8 @@ export class BVTRecorder {
           this.sendEvent(this.events.onBrowserClose);
         }
       } catch (error) {
+        this.logger.error("Error in page close event");
+        this.logger.error(error);
         console.error("Error in page close event");
         console.error(error);
       }
@@ -439,8 +630,10 @@ export class BVTRecorder {
         if (frame !== page.mainFrame()) return;
         this.handlePageTransition();
       } catch (error) {
+        this.logger.error("Error in handlePageTransition event");
+        this.logger.error(error);
         console.error("Error in handlePageTransition event");
-        // console.error(error);
+        console.error(error);
       }
       try {
         if (frame !== this.#activeFrame) return;
@@ -450,15 +643,18 @@ 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);
         console.error("Error in frame navigate event");
         // console.error(error);
       }
@@ -541,13 +737,9 @@ export class BVTRecorder {
 
     try {
       const result = await client.send("Page.getNavigationHistory");
-      // console.log("Navigation History:", result);
       const entries = result.entries;
       const currentIndex = result.currentIndex;
 
-      // ignore if currentIndex is not the last entry
-      // if (currentIndex !== entries.length - 1) return;
-
       const currentEntry = entries[currentIndex];
       const transitionInfo = this.analyzeTransitionType(entries, currentIndex, currentEntry);
       this.previousIndex = currentIndex;
@@ -560,6 +752,8 @@ export class BVTRecorder {
         navigationAction: transitionInfo.action,
       };
     } catch (error) {
+      this.logger.error("Error in getCurrentTransition event");
+      this.logger.error(error);
       console.error("Error in getTransistionType event", error);
     } finally {
       await client.detach();
@@ -628,6 +822,8 @@ export class BVTRecorder {
         // add listener for frame navigation on new tab
         this._addFrameNavigateListener(page);
       } catch (error) {
+        this.logger.error("Error in page event");
+        this.logger.error(error);
         console.error("Error in page event");
         console.error(error);
       }
@@ -669,6 +865,7 @@ export class BVTRecorder {
       const { data } = await client.send("Page.captureScreenshot", { format: "png" });
       return data;
     } catch (error) {
+      this.logger.error("Error in taking browser screenshot");
       console.error("Error in taking browser screenshot", error);
     } finally {
       await client.detach();
@@ -684,6 +881,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);
@@ -697,25 +940,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 {
@@ -737,7 +981,6 @@ export class BVTRecorder {
     this.previousHistoryLength = null;
     this.previousUrl = null;
     this.previousEntries = null;
-
     await closeContext();
     this.pageSet.clear();
   }
@@ -789,7 +1032,6 @@ export class BVTRecorder {
   }
 
   async startRecordingInput() {
-    console.log("startRecordingInput");
     await this.setMode("recordingInput");
   }
   async stopRecordingInput() {
@@ -813,9 +1055,17 @@ export class BVTRecorder {
   }
 
   async abortExecution() {
-    this.bvtContext.web.abortedExecution = true;
     await this.stepRunner.abortExecution();
   }
+
+  async pauseExecution({ cmdId }) {
+    await this.stepRunner.pauseExecution(cmdId);
+  }
+
+  async resumeExecution({ cmdId }) {
+    await this.stepRunner.resumeExecution(cmdId);
+  }
+
   async dealyedRevertMode() {
     const timerId = setTimeout(async () => {
       await this.revertMode();
@@ -824,18 +1074,24 @@ 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",
-      CURRENT_STEP_ID: step.id,
+      DEBUG: "blinq:route",
+      BVT_TEMP_SNAPSHOTS_FOLDER: step.isImplemented ? path.join(this.tempSnapshotsFolder, env) : undefined,
     };
 
     this.bvtContext.navigate = true;
     this.bvtContext.loadedRoutes = null;
-    this.bvtContext.web.abortedExecution = false;
+    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;
     }
@@ -871,13 +1127,26 @@ export class BVTRecorder {
         delete process.env[key];
       }
       this.bvtContext.navigate = false;
-      this.bvtContext.web.abortedExecution = 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);
@@ -961,10 +1230,11 @@ export class BVTRecorder {
     if (existsSync(_getDataFile(this.world, this.bvtContext, this.web))) {
       try {
         const testData = JSON.parse(readFileSync(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
-        this.logger.info("Test data", testData);
+        // this.logger.info("Test data", testData);
         this.sendEvent(this.events.getTestData, testData);
       } catch (e) {
-        this.logger.error("Error reading test data file", e);
+        // this.logger.error("Error reading test data file", e);
+        console.log("Error reading test data file", e);
       }
     }
 
@@ -973,10 +1243,12 @@ export class BVTRecorder {
     this.watcher.on("all", async (event, path) => {
       try {
         const testData = JSON.parse(await readFile(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
-        this.logger.info("Test data", testData);
+        // this.logger.info("Test data", testData);
+        console.log("Test data changed", testData);
         this.sendEvent(this.events.getTestData, testData);
       } catch (e) {
-        this.logger.error("Error reading test data file", e);
+        // this.logger.error("Error reading test data file", e);
+        console.log("Error reading test data file", e);
       }
     });
   }
@@ -1009,7 +1281,7 @@ export class BVTRecorder {
       .filter((file) => file.endsWith(".feature"))
       .map((file) => path.join(this.projectDir, "features", file));
     try {
-      const parsedFiles = featureFiles.map((file) => parseFeatureFile(file));
+      const parsedFiles = featureFiles.map((file) => this.parseFeatureFile(file));
       const output = {};
       parsedFiles.forEach((file) => {
         if (!file.feature) return;
@@ -1037,7 +1309,7 @@ export class BVTRecorder {
   loadExistingScenario({ featureName, scenarioName }) {
     const step_definitions = loadStepDefinitions(this.projectDir);
     const featureFilePath = path.join(this.projectDir, "features", featureName);
-    const gherkinDoc = parseFeatureFile(featureFilePath);
+    const gherkinDoc = this.parseFeatureFile(featureFilePath);
     const scenario = gherkinDoc.feature.children.find((child) => child.scenario.name === scenarioName)?.scenario;
 
     const steps = [];
@@ -1196,20 +1468,356 @@ export class BVTRecorder {
     await this.cleanupExecution({ tags });
     await this.initExecution({ tags });
   }
-}
 
-const parseFeatureFile = (featureFilePath) => {
-  try {
-    let id = 0;
-    const uuidFn = () => (++id).toString(16);
-    const builder = new AstBuilder(uuidFn);
-    const matcher = new GherkinClassicTokenMatcher();
-    const parser = new Parser(builder, matcher);
-    const source = readFileSync(featureFilePath, "utf8");
-    const gherkinDocument = parser.parse(source);
-    return gherkinDocument;
-  } catch (e) {
-    console.log(e);
+  parseFeatureFile(featureFilePath) {
+    try {
+      let id = 0;
+      const uuidFn = () => (++id).toString(16);
+      const builder = new AstBuilder(uuidFn);
+      const matcher = new GherkinClassicTokenMatcher();
+      const parser = new Parser(builder, matcher);
+      const source = readFileSync(featureFilePath, "utf8");
+      const gherkinDocument = parser.parse(source);
+      return gherkinDocument;
+    } catch (e) {
+      this.logger.error(`Error parsing feature file: ${featureFilePath}`);
+      console.log(e);
+    }
+    return {};
   }
-  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;
+    if (!payload) {
+      return;
+    }
+
+    try {
+      if (this.browserEmitter && typeof this.browserEmitter.applyClipboardPayload === "function") {
+        await this.browserEmitter.applyClipboardPayload(payload);
+        return;
+      }
+
+      const activePage = this.browserEmitter?.getSelectedPage() ?? this.page;
+      if (!activePage) {
+        this.logger.warn("No active page available to apply clipboard payload");
+        return;
+      }
+
+      await this.injectClipboardIntoPage(activePage, payload);
+    } catch (error) {
+      this.logger.error("Error applying clipboard payload to page", error);
+      this.sendEvent(this.events.clipboardError, {
+        message: "Failed to apply clipboard contents to the remote session",
+        trigger: message?.trigger ?? "paste",
+      });
+    }
+  }
+
+  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",
+      });
+    }
+  }
+}