@dev-blinq/cucumber_client 1.0.1710-dev → 1.0.1712-dev

package/bin/client/recorderv3/bvt_recorder.js

@@ -5,17 +5,10 @@ import { rm } from "fs/promises";
 import path from "path";
 import url from "url";
 import { getImplementedSteps, parseRouteFiles } from "./implemented_steps.js";
-import { NamesService, RemoteBrowserService, PublishService } from "./services.js";
+import { NamesService, PublishService } from "./services.js";
 import { BVTStepRunner } from "./step_runner.js";
 import { readFile, writeFile } from "fs/promises";
-import {
-  loadStepDefinitions,
-  getCommandsForImplementedStep,
-  getCodePage,
-  getCucumberStep,
-  _toRecordingStep,
-  toMethodName,
-} from "./step_utils.js";
+import { loadStepDefinitions, getCommandsForImplementedStep, getCodePage, getCucumberStep, _toRecordingStep, toMethodName, } from "./step_utils.js";
 import { parseStepTextParameters } from "../cucumber/utils.js";
 import { AstBuilder, GherkinClassicTokenMatcher, Parser } from "@cucumber/gherkin";
 import chokidar from "chokidar";
@@ -28,462 +21,154 @@ import { chromium } from "playwright-core";
 import { axiosClient } from "../utils/axiosClient.js";
 import { _generateCodeFromCommand } from "../code_gen/playwright_codeget.js";
 import { Recording } from "../recording.js";
-
 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 = `
+    const preScript = `
   window.__bvt_Recorder_config = ${JSON.stringify(config ?? null)};
   window.__PW_options = ${JSON.stringify(options ?? null)};
   `;
-  const recorderScript = readFileSync(
-    path.join(__dirname, "..", "..", "assets", "bundled_scripts", "recorder.js"),
-    "utf8"
-  );
-  return preScript + recorderScript + clipboardBridgeScript;
+    const recorderScript = readFileSync(path.join(__dirname, "..", "..", "assets", "bundled_scripts", "recorder.js"), "utf8");
+    return preScript + recorderScript;
 }
-
 async function evaluate(frame, script) {
-  if (frame.isDetached()) return;
-  const url = frame.url();
-  if (url === "" || url === "about:blank") return;
-  await frame.evaluate(script);
-  for (const childFrame of frame.childFrames()) {
-    await evaluate(childFrame, script);
-  }
+    if (frame.isDetached())
+        return;
+    const url = frame.url();
+    if (url === "" || url === "about:blank")
+        return;
+    await frame.evaluate(script);
+    for (const childFrame of frame.childFrames()) {
+        await evaluate(childFrame, script);
+    }
 }
-
-async function findNestedFrameSelector(frame, obj) {
-  try {
-    const parent = frame.parentFrame();
-    if (!parent) return { children: obj };
-    const frameElement = await frame.frameElement();
-    if (!frameElement) return;
-    const selectors = await parent.evaluate((element) => {
-      return window.__bvt_Recorder.locatorGenerator.getElementLocators(element, { excludeText: true }).locators;
-    }, frameElement);
-    return findNestedFrameSelector(parent, { children: obj, selectors });
-  } catch (e) {
-    socketLogger.error(`Error in script evaluation: ${getErrorMessage(e)}`, undefined, "findNestedFrameSelector");
-  }
+async function findNestedFrameSelector(frame, obj = {}) {
+    try {
+        const parent = frame.parentFrame();
+        if (!parent)
+            return { children: obj };
+        const frameElement = await frame.frameElement();
+        if (!frameElement)
+            return;
+        const selectors = await frameElement.evaluate((element) => {
+            const recorder = window.__bvt_Recorder;
+            return recorder.locatorGenerator.getElementLocators(element, { excludeText: true }).locators;
+        });
+        return findNestedFrameSelector(parent, { children: obj, selectors });
+    }
+    catch (e) {
+        socketLogger.error(`Error in script evaluation: ${getErrorMessage(e)}`, undefined, "findNestedFrameSelector");
+    }
 }
 const transformFillAction = (action, el) => {
-  if (el.tagName.toLowerCase() === "input") {
-    switch (el.type) {
-      case "date":
-      case "datetime-local":
-      case "month":
-      case "time":
-      case "week":
-      case "range":
-      case "color":
-        return {
-          type: "set_input",
-          value: action.text,
-        };
+    if (el.tagName.toLowerCase() === "input") {
+        switch (el.type) {
+            case "date":
+            case "datetime-local":
+            case "month":
+            case "time":
+            case "week":
+            case "range":
+            case "color":
+                return {
+                    type: "set_input",
+                    value: action.text,
+                };
+        }
     }
-  }
-  return {
-    type: "fill_element",
-    value: action.text,
-  };
-};
-const transformClickAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode, isSnapshot) => {
-  if (isInHoverMode) {
-    return {
-      type: "hover_element",
-    };
-  }
-  if (isVerify) {
-    return {
-      type: "verify_page_contains_text",
-      value: el.value ?? el.text,
-    };
-  }
-  if (isPopupCloseClick) {
     return {
-      type: "popup_close",
+        type: "fill_element",
+        value: action.text,
     };
-  }
-  if (isSnapshot) {
+};
+const transformClickAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode, isSnapshot) => {
+    if (isInHoverMode) {
+        return {
+            type: "hover_element",
+        };
+    }
+    if (isVerify) {
+        return {
+            type: "verify_page_contains_text",
+            value: el.value ?? el.text,
+        };
+    }
+    if (isPopupCloseClick) {
+        return {
+            type: "popup_close",
+        };
+    }
+    if (isSnapshot) {
+        return {
+            type: "snapshot_element",
+            value: action.value,
+        };
+    }
     return {
-      type: "snapshot_element",
-      value: action.value,
+        type: "click_element",
     };
-  }
-  return {
-    type: "click_element",
-  };
 };
 const transformAction = (action, el, isVerify, isPopupCloseClick, isInHoverMode, isSnapshot) => {
-  switch (action.name) {
-    case "click":
-      return transformClickAction(action, el, isVerify, isPopupCloseClick, isInHoverMode, isSnapshot);
-    case "fill": {
-      return transformFillAction(action, el);
-    }
-    case "select": {
-      return {
-        type: "select_combobox",
-        value: action.options[0],
-      };
-    }
-
-    case "check": {
-      return {
-        type: "check_element",
-        check: true,
-      };
-    }
-    case "uncheck": {
-      return {
-        type: "check_element",
-        check: false,
-      };
-    }
-    case "assertText": {
-      return {
-        type: "verify_page_contains_text",
-        value: action.text,
-      };
-    }
-    case "press": {
-      return {
-        type: "press_key",
-        value: action.key,
-      };
-    }
-    case "setInputFiles": {
-      return {
-        type: "set_input_files",
-        files: action.files,
-      };
-    }
-    default: {
-      socketLogger.error(`Action not supported: ${action.name}`);
-      console.log("action not supported", action);
-      throw new Error("action not supported");
-    }
-  }
+    switch (action.name) {
+        case "click":
+            return transformClickAction(action, el, isVerify, isPopupCloseClick, isInHoverMode, isSnapshot);
+        case "fill": {
+            return transformFillAction(action, el);
+        }
+        case "select": {
+            return {
+                type: "select_combobox",
+                value: action.options?.[0] ?? "",
+            };
+        }
+        case "check": {
+            return {
+                type: "check_element",
+                check: true,
+            };
+        }
+        case "uncheck": {
+            return {
+                type: "check_element",
+                check: false,
+            };
+        }
+        case "assertText": {
+            return {
+                type: "verify_page_contains_text",
+                value: action.text,
+            };
+        }
+        case "press": {
+            return {
+                type: "press_key",
+                value: action.key,
+            };
+        }
+        case "setInputFiles": {
+            return {
+                type: "set_input_files",
+                files: action.files,
+            };
+        }
+        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;
-  }
+    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
@@ -494,1994 +179,1413 @@ const diffPaths = (currentPath, newPath) => {
  * @property {Object} logger
  */
 export class BVTRecorder {
-  #currentURL = "";
-  #activeFrame = null;
-  #mode = "noop";
-  #previousMode = "noop";
-  #remoteDebuggerPort = null;
-  /**
-   *
-   * @param {BVTRecorderInput} initialState
-   */
-  constructor(initialState) {
-    Object.assign(this, initialState);
-    this.screenshotMap = new Map();
-    this.snapshotMap = new Map();
-    this.scenariosStepsMap = new Map();
-    this.namesService = new NamesService({
-      screenshotMap: this.screenshotMap,
-      TOKEN: this.TOKEN,
-      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",
-    onPageClose: "BVTRecorder.onPageClose",
-    onBrowserClose: "BVTRecorder.onBrowserClose",
-    onNewCommand: "BVTRecorder.command.new",
-    onCommandDetails: "BVTRecorder.onCommandDetails",
-    onStepDetails: "BVTRecorder.onStepDetails",
-    getTestData: "BVTRecorder.getTestData",
-    onGoto: "BVTRecorder.onGoto",
-    cmdExecutionStart: "BVTRecorder.cmdExecutionStart",
-    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);
-      this.logger.info(`Time taken for action: ${event.statistics.time}`);
-      await this.onAction({ ...event, nestFrmLoc });
-    },
-    __bvt_getMode: async () => {
-      return this.#mode;
-    },
-    __bvt_setMode: async (src, mode) => {
-      await this.setMode(mode);
-    },
-    __bvt_revertMode: async () => {
-      await this.revertMode();
-    },
-    __bvt_recordPageClose: async ({ page }) => {
-      this.pageSet.delete(page);
-    },
-    __bvt_closePopups: async () => {
-      await this.onClosePopup();
-    },
-    __bvt_log: async (src, 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) => {
-    const selector = `[__bvt_snapshot="${attr}"]`;
-    const locator = await this.web.page.locator(selector);
-    const snapshot = await locator.ariaSnapshot();
-    return snapshot;
-  };
-
-  processObject = async ({ type, action, value }) => {
-    switch (type) {
-      case "snapshot-element": {
-        if (action === "get-template") {
-          return true;
-        }
-        break;
-      }
-      default: {
-        console.log("Unknown object type", type);
-        break;
-      }
-    }
-  };
-
-  getPWScript() {
-    const pwFolder = path.join(__dirname, "..", "..", "assets", "preload", "pw_utils");
-    const result = [];
-    for (const script of readdirSync(pwFolder)) {
-      const path = path.join(pwFolder, script);
-      const content = readFileSync(path, "utf8");
-      result.push(content);
-    }
-    return result;
-  }
-  getRecorderScripts() {
-    const recorderFolder = path.join(__dirname, "..", "..", "assets", "preload", "recorder");
-    const result = [];
-    for (const script of readdirSync(recorderFolder)) {
-      const path = path.join(recorderFolder, script);
-      const content = readFileSync(path, "utf8");
-      result.push(content);
-    }
-    return result;
-  }
-  getInitScripts(config) {
-    return getInitScript(config, {
-      sdkLanguage: "javascript",
-      testIdAttributeName: "blinq-test-id",
-      stableRafCount: 0,
-      browserName: this.browser?.browserType().name(),
-      inputFileRoleTextbox: false,
-      customEngines: [],
-      isUnderTest: true,
-    });
-  }
-
-  async _initBrowser({ url }) {
-    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: () => { } };
-
-    const ai_config_file = path.join(this.projectDir, "ai_config.json");
-    let ai_config = {};
-    if (existsSync(ai_config_file)) {
-      try {
-        ai_config = JSON.parse(readFileSync(ai_config_file, "utf8"));
-      } catch (error) {
-        this.logger.error("Error reading ai_config.json", error);
-      }
-    }
-    this.config = ai_config;
-    const initScripts = {
-      // recorderCjs: injectedScriptSource,
-      scripts: [
-        this.getInitScripts(ai_config),
-        `\ndelete Object.getPrototypeOf(navigator).webdriver;${process.env.WINDOW_DEBUGGER ? "window.debug=true;\n" : ""}`,
-      ],
-    };
-
-    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,
-      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);
-    this.lastKnownUrlPath = this._updateUrlPath();
-    const browser = await this.context.browser();
-    this.browser = browser;
-
-    // add bindings
-    for (const [name, handler] of Object.entries(this.bindings)) {
-      await this.context.exposeBinding(name, handler);
-    }
-    this._watchTestData();
-    this.web.onRestoreSaveState = async (url) => {
-      await this._initBrowser({ url });
-      this._addPagelisteners(this.context);
-      this._addFrameNavigateListener(this.page);
-    };
-
-    // 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");
-    await this.bvtContext.web.closeUnexpectedPopups();
-  }
-  async evaluateInAllFrames(context, script) {
-    // retry 3 times
-    for (let i = 0; i < 3; i++) {
-      try {
-        for (const page of context.pages()) {
-          await evaluate(page.mainFrame(), script);
-        }
-        return;
-      } catch (error) {
-        // console.error("Error evaluting in context:", error);
-        this.logger.error("Error evaluating in context:", error);
-      }
-    }
-  }
-
-  getMode() {
-    // console.log("getMode", this.#mode);
-    this.logger.info("Current mode:", this.#mode);
-    return this.#mode;
-  }
-
-  async setMode(mode) {
-    await this.evaluateInAllFrames(this.context, `window.__bvt_Recorder.mode = "${mode}";`);
-    this.#previousMode = this.#mode;
-    this.#mode = mode;
-  }
-  async revertMode() {
-    await this.setMode(this.#previousMode);
-  }
-
-  async _openTab({ url }) {
-    // add listeners for new pages
-    this._addPagelisteners(this.context);
-
-    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 = url;
-
-    await this.page.dispatchEvent("html", "scroll");
-    await delay(1000);
-  }
-  _addFrameNavigateListener(page) {
-    page.on("close", () => {
-      try {
-        if (!this.pageSet.has(page)) return;
-        // console.log(this.context.pages().length);
-        if (this.context.pages().length > 0) {
-          this.sendEvent(this.events.onPageClose);
-        } else {
-          // closed all tabs
-          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);
-      }
-    });
-
-    page.on("framenavigated", async (frame) => {
-      try {
-        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);
-      }
-      try {
-        if (frame !== this.#activeFrame) return;
-
-        // hack to sync the action event with the frame navigation
-        await this.storeScreenshot({
-          element: { inputID: "frame" },
+    #currentURL = "";
+    #activeFrame = null;
+    #mode = "noop";
+    #previousMode = "noop";
+    #remoteDebuggerPort = null;
+    envName;
+    projectDir;
+    TOKEN;
+    sendEvent;
+    logger;
+    screenshotMap = new Map();
+    snapshotMap = new Map();
+    scenariosStepsMap = new Map();
+    namesService;
+    workspaceService;
+    pageSet = new Set();
+    lastKnownUrlPath = "";
+    world = { attach: () => { } };
+    shouldTakeScreenshot = true;
+    watcher = null;
+    networkEventsFolder;
+    tempProjectFolder;
+    tempSnapshotsFolder;
+    config = {};
+    bvtContext;
+    stepRunner;
+    context;
+    web;
+    page;
+    browser = null;
+    backgroundBrowser;
+    backgroundContext;
+    timerId = null;
+    previousIndex = null;
+    previousHistoryLength = null;
+    previousEntries = null;
+    previousUrl = null;
+    scenarioDoc;
+    isVerify = false;
+    /**
+     * @param initialState Initial recorder state and dependencies
+     */
+    constructor(initialState) {
+        this.envName = initialState.envName;
+        this.projectDir = initialState.projectDir;
+        this.TOKEN = initialState.TOKEN;
+        this.sendEvent = initialState.sendEvent;
+        this.logger = initialState.logger;
+        this.namesService = new NamesService({
+            screenshotMap: this.screenshotMap,
+            TOKEN: this.TOKEN,
+            projectDir: this.projectDir,
+            logger: this.logger,
         });
-
-        const newUrl = frame.url();
-        const newPath = new URL(newUrl).pathname;
-        const newTitle = await frame.title();
-        const changed = diffPaths(this.#currentURL, newUrl);
-
-        if (changed) {
-          this.sendEvent(this.events.onFrameNavigate, { url: newPath, title: newTitle });
-          this.#currentURL = newUrl;
-        }
-      } catch (error) {
-        this.logger.error("Error in frame navigate event");
-        this.logger.error(error);
-        console.error("Error in frame navigate event");
-        // console.error(error);
-      }
-    });
-  }
-
-  hasHistoryReplacementAtIndex(previousEntries, currentEntries, index) {
-    if (!previousEntries || !currentEntries) return false;
-    if (index >= previousEntries.length || index >= currentEntries.length) return false;
-
-    const prevEntry = previousEntries[index];
-    // console.log("prevEntry", prevEntry);
-    const currEntry = currentEntries[index];
-    // console.log("currEntry", currEntry);
-
-    // Check if the entry at this index has been replaced
-    return prevEntry.id !== currEntry.id;
-  }
-
-  // Even simpler approach for your specific case
-  analyzeTransitionType(entries, currentIndex, currentEntry) {
-    // console.log("Analyzing transition type");
-    // console.log("===========================");
-    // console.log("Current Index:", currentIndex);
-    // console.log("Current Entry:", currentEntry);
-    // console.log("Current Entries:", entries);
-    // console.log("Current entries length:", entries.length);
-    // console.log("===========================");
-    // console.log("Previous Index:", this.previousIndex);
-    // // console.log("Previous Entry:", this.previousEntries[this.previousIndex]);
-    // console.log("Previous Entries:", this.previousEntries);
-    // console.log("Previous entries length:", this.previousHistoryLength);
-
-    if (this.previousIndex === null || this.previousHistoryLength === null || !this.previousEntries) {
-      return {
-        action: "initial",
-      };
-    }
-
-    const indexDiff = currentIndex - this.previousIndex;
-    const lengthDiff = entries.length - this.previousHistoryLength;
-
-    // Backward navigation
-    if (indexDiff < 0) {
-      return { action: "back" };
-    }
-
-    // Forward navigation
-    if (indexDiff > 0 && lengthDiff === 0) {
-      // Check if the entry at current index is the same as before
-      const entryReplaced = this.hasHistoryReplacementAtIndex(this.previousEntries, entries, currentIndex);
-
-      if (entryReplaced) {
-        return { action: "navigate" }; // New navigation that replaced forward history
-      } else {
-        return { action: "forward" }; // True forward navigation
-      }
-    }
-
-    // New navigation (history grew)
-    if (lengthDiff > 0) {
-      return { action: "navigate" };
-    }
-
-    // Same position, same length
-    if (lengthDiff <= 0) {
-      const entryReplaced = this.hasHistoryReplacementAtIndex(this.previousEntries, entries, currentIndex);
-
-      return entryReplaced ? { action: "navigate" } : { action: "reload" };
-    }
-
-    return { action: "unknown" };
-  }
-
-  async getCurrentTransition() {
-    if (this?.web?.browser?._name !== "chromium") {
-      return;
-    }
-    const client = await this.context.newCDPSession(this.web.page);
-
-    try {
-      const result = await client.send("Page.getNavigationHistory");
-      const entries = result.entries;
-      const currentIndex = result.currentIndex;
-
-      const currentEntry = entries[currentIndex];
-      const transitionInfo = this.analyzeTransitionType(entries, currentIndex, currentEntry);
-      this.previousIndex = currentIndex;
-      this.previousHistoryLength = entries.length;
-      this.previousUrl = currentEntry.url;
-      this.previousEntries = [...entries]; // Store a copy of current entries
-
-      return {
-        currentEntry,
-        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();
-    }
-  }
-  userInitiatedTransitionTypes = ["typed", "address_bar"];
-  async handlePageTransition() {
-    const transition = await this.getCurrentTransition();
-    if (!transition) return;
-
-    const { currentEntry, navigationAction } = transition;
-
-    switch (navigationAction) {
-      case "initial":
-        // console.log("Initial navigation, no action taken");
-        return;
-      case "navigate":
-        // console.log("transitionType", transition.transitionType);
-        // console.log("sending onGoto event", { url: currentEntry.url,
-        // type: "navigate", });
-        if (this.userInitiatedTransitionTypes.includes(currentEntry.transitionType)) {
-          const env = JSON.parse(readFileSync(this.envName), "utf8");
-          const baseUrl = env.baseUrl;
-          let url = currentEntry.userTypedURL;
-          if (baseUrl && url.startsWith(baseUrl)) {
-            url = url.replace(baseUrl, "{{env.baseUrl}}");
-          }
-          // console.log("User initiated transition");
-          this.sendEvent(this.events.onGoto, { url, type: "navigate" });
+        this.workspaceService = new PublishService(this.TOKEN);
+        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 });
         }
-        return;
-      case "back":
-        // console.log("User navigated back");
-        // console.log("sending onGoto event", {
-        //   type: "back",
-        // });
-        this.sendEvent(this.events.onGoto, { type: "back" });
-        return;
-      case "forward":
-        // console.log("User navigated forward"); console.log("sending onGoto event", { type: "forward", });
-        this.sendEvent(this.events.onGoto, { type: "forward" });
-        return;
-      default:
-        this.sendEvent(this.events.onGoto, { type: "unknown" });
-        return;
     }
-  }
-
-  async getCurrentPageTitle() {
-    const title = await this.page.title();
-    return title;
-  }
-  async getCurrentPageUrl() {
-    const url = await this.page.url();
-    return url;
-  }
-
-  _addPagelisteners(context) {
-    context.on("page", async (page) => {
-      try {
-        if (page.isClosed()) return;
-        this.pageSet.add(page);
-        await page.waitForLoadState("domcontentloaded");
-
-        // 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);
-      }
-    });
-  }
-  async openBrowser() {
-    const env = JSON.parse(readFileSync(this.envName), "utf8");
-    const url = env.baseUrl;
-    await this._initBrowser({ url });
-    await this._openTab({ url });
-    process.env.TEMP_RUN = true;
-  }
-  overlayLocators(event) {
-    let locatorsResults = [...event.locators];
-    const cssLocators = event.cssLocators;
-    for (const cssLocator of cssLocators) {
-      locatorsResults.push({ mode: "NO_TEXT", css: cssLocator });
-    }
-    if (event.digitLocators) {
-      for (const digitLocator of event.digitLocators) {
-        digitLocator.mode = "IGNORE_DIGIT";
-        locatorsResults.push(digitLocator);
-      }
-    }
-    if (event.contextLocator) {
-      locatorsResults.push({
-        mode: "CONTEXT",
-        text: event.contextLocator.texts[0],
-        css: event.contextLocator.css,
-        climb: event.contextLocator.climbCount,
-      });
-    }
-    return locatorsResults;
-  }
-  async getScreenShot() {
-    const client = await this.context.newCDPSession(this.web.page);
-    try {
-      // Using CDP to capture the screenshot
-      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();
-    }
-  }
-  async storeScreenshot(event) {
-    try {
-      // const spath = path.join(__dirname, "media", `${event.inputID}.png`);
-      const screenshotURL = await this.getScreenShot();
-      this.screenshotMap.set(event.element.inputID, screenshotURL);
-      // writeFileSync(spath, screenshotURL, "base64");
-    } catch (error) {
-      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);
-    const cmdEvent = {
-      ...event.element,
-      ...transformAction(
-        event.action,
-        event.element,
-        event.mode === "recordingText" || event.mode === "recordingContext",
-        event.isPopupCloseClick,
-        event.mode === "recordingHover",
-        event.mode === "multiInspecting"
-      ),
-      // 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,
+    events = {
+        onFrameNavigate: "BVTRecorder.onFrameNavigate",
+        onPageClose: "BVTRecorder.onPageClose",
+        onBrowserClose: "BVTRecorder.onBrowserClose",
+        onNewCommand: "BVTRecorder.command.new",
+        onCommandDetails: "BVTRecorder.onCommandDetails",
+        onStepDetails: "BVTRecorder.onStepDetails",
+        getTestData: "BVTRecorder.getTestData",
+        onGoto: "BVTRecorder.onGoto",
+        cmdExecutionStart: "BVTRecorder.cmdExecutionStart",
+        cmdExecutionSuccess: "BVTRecorder.cmdExecutionSuccess",
+        cmdExecutionError: "BVTRecorder.cmdExecutionError",
+        interceptResults: "BVTRecorder.interceptResults",
+        onDebugURLChange: "BVTRecorder.onDebugURLChange",
+        updateCommand: "BVTRecorder.updateCommand",
     };
-    // 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();
-    if (event.locators) {
-      Object.assign(cmdEvent, {
-        locators: {
-          locators: event.locators,
-          iframe_src: !event.frame.isTop ? event.frame.url : undefined,
-          nestFrmLoc: event.nestFrmLoc?.children,
+    bindings = {
+        __bvt_recordCommand: async ({ frame, page, context }, event) => {
+            this.#activeFrame = frame;
+            const nestFrmLoc = await findNestedFrameSelector(frame);
+            if (event.statistics?.time !== undefined) {
+                this.logger.info(`Time taken for action: ${event.statistics.time}`);
+            }
+            await this.onAction({ ...event, nestFrmLoc });
         },
-        allStrategyLocators: event.allStrategyLocators,
-      })
-      this.sendEvent(this.events.onNewCommand, cmdEvent);
-      this._updateUrlPath();
-    } else {
-      this.sendEvent(this.events.onNewCommand, cmdEvent);
-      this._updateUrlPath();
-      await this.generateLocators(event);
-    }
-  }
-  _updateUrlPath() {
-    try {
-      let url = this.bvtContext.web.page.url();
-      if (url === "about:blank") {
-        return;
-      } else {
-        this.lastKnownUrlPath = new URL(url).pathname;
-      }
-    } catch (error) {
-      console.error("Error in getting last known url path", error);
-    }
-  }
-  async closeBrowser() {
-    delete process.env.TEMP_RUN;
-    await this.watcher.close().then(() => { });
-    this.watcher = null;
-    this.previousIndex = null;
-    this.previousHistoryLength = null;
-    this.previousUrl = null;
-    this.previousEntries = null;
-    await closeContext();
-    this.pageSet.clear();
-  }
-  async reOpenBrowser(input) {
-    if (input && input.envName) {
-      this.envName = path.join(this.projectDir, "environments", input.envName + ".json");
-      process.env.BLINQ_ENV = this.envName;
-    }
-    await this.closeBrowser();
-    //   logger.log("closed");
-    await delay(1000);
-    await this.openBrowser();
-    //   logger.log("opened");
-  }
-  async getNumberOfOccurrences({ searchString, regex = false, partial = true, ignoreCase = false, tag = "*" }) {
-    this.isVerify = false;
-    //const script = `window.countStringOccurrences(${JSON.stringify(searchString)});`;
-    if (searchString.length === 0) return -1;
-    let result = 0;
-    for (let i = 0; i < 3; i++) {
-      result = 0;
-      try {
-        // 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) {
-        console.log(e);
-        result = 0;
-      }
-    }
-  }
-
-  async startRecordingInput() {
-    await this.setMode("recordingInput");
-  }
-  async stopRecordingInput() {
-    await this.setMode("idle");
-  }
-  async startRecordingText(isInspectMode) {
-    if (isInspectMode) {
-      await this.setMode("inspecting");
-    } else {
-      await this.setMode("recordingText");
-    }
-  }
-  async stopRecordingText() {
-    await this.setMode("idle");
-  }
-  async startRecordingContext() {
-    await this.setMode("recordingContext");
-  }
-  async stopRecordingContext() {
-    await this.setMode("idle");
-  }
-
-  async abortExecution() {
-    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();
-    }, 100);
-    this.timerId = timerId;
-  }
-  async runStep({ step, parametersMap, tags, isFirstStep, listenNetwork, AICode }, 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,
-      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;
-    }
-
-    if (this.timerId) {
-      clearTimeout(this.timerId);
-      this.timerId = null;
-    }
-    await this.setMode("running");
-
-    try {
-      step.text = step.text.trim();
-      const { result, info } = await this.stepRunner.runStep(
-        {
-          step,
-          parametersMap,
-          envPath: this.envName,
-          tags,
-          config: this.config,
-          AICode,
+        __bvt_getMode: async () => {
+            return this.#mode;
         },
-        this.bvtContext,
-        {
-          skipAfter,
-          skipBefore,
-        }
-      );
-      await this.revertMode();
-      return { info };
-    } catch (error) {
-      await this.revertMode();
-      throw error;
-    } finally {
-      for (const key of Object.keys(_env)) {
-        delete process.env[key];
-      }
-      this.bvtContext.navigate = false;
-    }
-  }
-  async saveScenario({ scenario, featureName, override, isSingleStep, branch, isEditing, env, AICode }) {
-    const res = await this.workspaceService.saveScenario({
-      scenario,
-      featureName,
-      override,
-      isSingleStep,
-      branch,
-      isEditing,
-      projectId: path.basename(this.projectDir),
-      env: env ?? this.envName,
-      AICode,
-    });
-    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);
-    const implementedSteps = stepsAndScenarios.implementedSteps;
-    const scenarios = stepsAndScenarios.scenarios;
-    for (const scenario of scenarios) {
-      this.scenariosStepsMap.set(scenario.name, scenario.steps);
-      delete scenario.steps;
-    }
-    return {
-      implementedSteps,
-      scenarios,
-    };
-  }
-  async getStepsAndCommandsForScenario({ name, featureName }) {
-    const steps = this.scenariosStepsMap.get(name) || [];
-    for (const step of steps) {
-      if (step.isImplemented) {
-        step.commands = this.getCommandsForImplementedStep({ stepName: step.text });
-      } else {
-        step.commands = [];
-      }
-    }
-    return steps;
-    // return getStepsAndCommandsForScenario({
-    //   name,
-    //   featureName,
-    //   projectDir: this.projectDir,
-    //   map: this.scenariosStepsMap,
-    // });
-  }
-
-  async generateStepName({ commands, stepsNames, parameters, map }) {
-    return await this.namesService.generateStepName({ commands, stepsNames, parameters, map });
-  }
-  async generateScenarioAndFeatureNames(scenarioAsText) {
-    return await this.namesService.generateScenarioAndFeatureNames(scenarioAsText);
-  }
-  async generateCommandName({ command }) {
-    return await this.namesService.generateCommandName({ command });
-  }
-
-  async getCurrentChromiumPath() {
-    const currentURL = await this.bvtContext.web.page.url();
-    const env = JSON.parse(readFileSync(this.envName), "utf8");
-    const baseURL = env.baseUrl;
-    const relativeURL = currentURL.startsWith(baseURL) ? currentURL.replace(baseURL, "/") : undefined;
-    return {
-      relativeURL,
-      baseURL,
-      currentURL,
-    };
-  }
-
-  getReportFolder() {
-    if (this.bvtContext.reportFolder) {
-      return this.bvtContext.reportFolder;
-    } else return "";
-  }
-
-  getSnapshotFolder() {
-    if (this.bvtContext.snapshotFolder) {
-      return path.join(process.cwd(), this.bvtContext.snapshotFolder);
-    } else return "";
-  }
-
-  async overwriteTestData(data) {
-    this.bvtContext.stable.overwriteTestData(data.value, this.world);
-  }
-
-  _watchTestData() {
-    this.watcher = chokidar.watch(_getDataFile(this.world, this.bvtContext, this.web), {
-      persistent: true,
-      ignoreInitial: true,
-      awaitWriteFinish: {
-        stabilityThreshold: 2000,
-        pollInterval: 100,
-      },
-    });
-
-    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.sendEvent(this.events.getTestData, testData);
-      } catch (e) {
-        // this.logger.error("Error reading test data file", e);
-        console.log("Error reading test data file", e);
-      }
-    }
-
-    this.logger.info("Watching for test data changes");
-
-    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);
-        console.log("Test data changed", testData);
-        this.sendEvent(this.events.getTestData, testData);
-      } catch (e) {
-        // this.logger.error("Error reading test data file", e);
-        console.log("Error reading test data file", e);
-      }
-    });
-  }
-  async loadTestData({ data, type }) {
-    if (type === "user") {
-      const username = data.username;
-      await this.web.loadTestDataAsync("users", username, this.world);
-    } else {
-      const csv = data.csv;
-      const row = data.row;
-      // code = `await context.web.loadTestDataAsync("csv","${csv}:${row}", this)`;
-      await this.web.loadTestDataAsync("csv", `${csv}:${row}`, this.world);
-    }
-  }
-
-  async discardTestData({ tags }) {
-    resetTestData(this.envName, this.world);
-    await this.cleanup({ tags });
-  }
-  async addToTestData(obj) {
-    if (!existsSync(_getDataFile(this.world, this.bvtContext, this.web))) {
-      await writeFile(_getDataFile(this.world, this.bvtContext, this.web), JSON.stringify({}), "utf8");
-    }
-    let data = JSON.parse(await readFile(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
-    data = Object.assign(data, obj);
-    await writeFile(_getDataFile(this.world, this.bvtContext, this.web), JSON.stringify(data), "utf8");
-  }
-  getScenarios() {
-    const featureFiles = readdirSync(path.join(this.projectDir, "features"))
-      .filter((file) => file.endsWith(".feature"))
-      .map((file) => path.join(this.projectDir, "features", file));
-    try {
-      const parsedFiles = featureFiles.map((file) => this.parseFeatureFile(file));
-      const output = {};
-      parsedFiles.forEach((file) => {
-        if (!file.feature) return;
-        if (!file.feature.name) return;
-        output[file.feature.name] = [];
-        file.feature.children.forEach((child) => {
-          if (child.scenario) {
-            output[file.feature.name].push(child.scenario.name);
-          }
-        });
-      });
-
-      return output;
-    } catch (e) {
-      console.log(e);
-    }
-    return {};
-  }
-  getCommandsForImplementedStep({ stepName }) {
-    const step_definitions = loadStepDefinitions(this.projectDir);
-    const stepParams = parseStepTextParameters(stepName);
-    return getCommandsForImplementedStep(stepName, step_definitions, stepParams).commands;
-  }
-
-  loadExistingScenario({ featureName, scenarioName }) {
-    const step_definitions = loadStepDefinitions(this.projectDir);
-    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 = [];
-    const datasets = [];
-    if (scenario.examples && scenario.examples.length > 0) {
-      const example = scenario.examples[0];
-      example?.tableHeader?.cells.forEach((cell, index) => {
-        parameters.push({
-          key: cell.value,
-          value: unEscapeNonPrintables(example.tableBody[0].cells[index].value),
-        });
-        // datasets.push({
-        //   data: example.tableBody[]
-        // })
-      });
-
-      for (let i = 0; i < example.tableBody.length; i++) {
-        const row = example.tableBody[i];
-        // for (const row of example.tableBody) {
-        const paramters = [];
-        row.cells.forEach((cell, index) => {
-          paramters.push({
-            key: example.tableHeader.cells[index].value,
-            value: unEscapeNonPrintables(cell.value),
-          });
-        });
-        datasets.push({
-          data: paramters,
-          datasetId: i,
-        });
-      }
-    }
-
-    for (const step of scenario.steps) {
-      const stepParams = parseStepTextParameters(step.text);
-      // console.log("Parsing step ", step, stepParams);
-      const _s = getCommandsForImplementedStep(step.text, step_definitions, stepParams);
-      delete step.location;
-      const _step = {
-        ...step,
-        ..._s,
-        keyword: step.keyword.trim(),
-      };
-      parseRouteFiles(this.projectDir, _step);
-      steps.push(_step);
-    }
-    return {
-      name: scenario.name,
-      tags: scenario.tags.map((tag) => tag.name),
-      steps,
-      parameters,
-      datasets,
-    };
-  }
-  async findRelatedTextInAllFrames({ searchString, climb, contextText, params }) {
-    if (searchString.length === 0) return -1;
-    let result = 0;
-    for (let i = 0; i < 3; i++) {
-      result = 0;
-      try {
-        try {
-          const allFrameResult = await this.web.findRelatedTextInAllFrames(
-            contextText,
-            climb,
-            searchString,
-            params,
-            {},
-            this.world
-          );
-          for (const frameResult of allFrameResult) {
-            result += frameResult.elementCount;
-          }
-        } catch (e) {
-          console.log(e);
-        }
-
-        return result;
-      } catch (e) {
-        console.log(e);
-        result = 0;
-      }
-    }
-    return result;
-  }
-  async setStepCodeByScenario({
-    function_name,
-    mjs_file_content,
-    user_request,
-    selectedTarget,
-    page_context,
-    AIMemory,
-    steps_context,
-  }) {
-    const runsURL = getRunsServiceBaseURL();
-    const url = `${runsURL}/process-user-request/generate-code-with-context`;
-    try {
-      const result = await axiosClient({
-        url,
-        method: "POST",
-        data: {
-          function_name,
-          mjs_file_content,
-          user_request,
-          selectedTarget,
-          page_context,
-          AIMemory,
-          steps_context,
+        __bvt_setMode: async (_src, mode) => {
+            await this.setMode(mode);
         },
-        headers: {
-          Authorization: `Bearer ${this.TOKEN}`,
-          "X-Source": "recorder",
+        __bvt_revertMode: async () => {
+            await this.revertMode();
         },
-      });
-      if (result.status !== 200) {
-        return { success: false, message: "Error while fetching code changes" };
-      }
-      return { success: true, data: result.data };
-    } catch (error) {
-      // @ts-ignore
-      const reason = error?.response?.data?.error || "";
-      const errorMessage = error instanceof Error ? error.message : "Unknown error";
-      throw new Error(`Failed to fetch code changes: ${errorMessage} \n ${reason}`);
-    }
-  }
-
-  async getStepCodeByScenario({ featureName, scenarioName, projectId, branch }) {
-    try {
-      const runsURL = getRunsServiceBaseURL();
-      const ssoURL = runsURL.replace("/runs", "/auth");
-      const privateRepoURL = `${ssoURL}/isRepoPrivate?project_id=${projectId}`;
-
-      const isPrivateRepoReq = await axiosClient({
-        url: privateRepoURL,
-        method: "GET",
-        headers: {
-          Authorization: `Bearer ${this.TOKEN}`,
-          "X-Source": "recorder",
+        __bvt_recordPageClose: async ({ page }) => {
+            this.pageSet.delete(page);
         },
-      });
-
-      if (isPrivateRepoReq.status !== 200) {
-        return { success: false, message: "Error while checking repo privacy" };
-      }
-
-      const isPrivateRepo = isPrivateRepoReq.data.isPrivate ? isPrivateRepoReq.data.isPrivate : false;
-
-      const workspaceURL = runsURL.replace("/runs", "/workspace");
-      const url = `${workspaceURL}/get-step-code-by-scenario`;
-
-      const result = await axiosClient({
-        url,
-        method: "POST",
-        data: {
-          scenarioName,
-          featureName,
-          projectId,
-          isPrivateRepo,
-          branch,
+        __bvt_closePopups: async () => {
+            await this.onClosePopup();
         },
-        headers: {
-          Authorization: `Bearer ${this.TOKEN}`,
-          "X-Source": "recorder",
+        __bvt_log: async (_src, message) => {
+            this.logger.info(`Inside Browser: ${message}`);
         },
-      });
-      if (result.status !== 200) {
-        return { success: false, message: "Error while getting step code" };
-      }
-      return { success: true, data: result.data.stepInfo };
-    } catch (error) {
-      const reason = error?.response?.data?.error || "";
-      const errorMessage = error instanceof Error ? error.message : "Unknown error";
-      throw new Error(`Failed to get step code: ${errorMessage} \n ${reason}`);
-    }
-  }
-  async getContext() {
-    await this.page.waitForLoadState("domcontentloaded");
-    await this.page.waitForSelector("body");
-    await this.page.waitForTimeout(500);
-    return await this.page.evaluate(() => {
-      return document.documentElement.outerHTML;
-    });
-  }
-  async deleteCommandFromStepCode({ scenario, AICode, command }) {
-    if (!AICode || AICode.length === 0) {
-      console.log("No AI code available to delete.");
-      return;
-    }
-
-    const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
-    const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
-    process.env.tempFeaturesFolderPath = __temp_features_FolderName;
-    process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
-
-    try {
-      await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
-      await this.stepRunner.writeWrapperCode(tempFolderPath);
-      const codeView = AICode.find((f) => f.stepName === scenario.step.text);
-
-      if (!codeView) {
-        throw new Error("Step code not found for step: " + scenario.step.text);
-      }
-
-      const functionName = codeView.functionName;
-      const mjsPath = path
-        .normalize(codeView.mjsFile)
-        .split(path.sep)
-        .filter((part) => part !== "features")
-        .join(path.sep);
-      const codePath = path.join(tempFolderPath, mjsPath);
-
-      if (!existsSync(codePath)) {
-        throw new Error("Step code file not found: " + codePath);
-      }
-
-      const codePage = getCodePage(codePath);
-
-      const elements = codePage.getVariableDeclarationAsObject("elements");
-
-      const cucumberStep = getCucumberStep({ step: scenario.step });
-      cucumberStep.text = scenario.step.text;
-      const stepCommands = scenario.step.commands;
-      const cmd = _toRecordingStep(command, scenario.step.name);
-
-      const recording = new Recording();
-      recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
-      const step = { ...recording.steps[0], ...cmd };
-      const result = _generateCodeFromCommand(step, elements, {});
-
-      codePage._removeCommands(functionName, result.codeLines);
-      codePage.removeUnusedElements();
-      codePage.save();
-
-      await rm(tempFolderPath, { recursive: true, force: true });
-
-      return { code: codePage.fileContent, mjsFile: codeView.mjsFile };
-    } catch (error) {
-      await rm(tempFolderPath, { recursive: true, force: true });
-      throw error;
-    }
-  }
-  async addCommandToStepCode({ scenario, AICode }) {
-    if (!AICode || AICode.length === 0) {
-      console.log("No AI code available to add.");
-      return;
-    }
-
-    const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
-    const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
-    process.env.tempFeaturesFolderPath = __temp_features_FolderName;
-    process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
-
-    try {
-      await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
-      await this.stepRunner.writeWrapperCode(tempFolderPath);
-
-      let codeView = AICode.find((f) => f.stepName === scenario.step.text);
-
-      if (codeView) {
-        scenario.step.commands = [scenario.step.commands.pop()];
-        const functionName = codeView.functionName;
-        const mjsPath = path
-          .normalize(codeView.mjsFile)
-          .split(path.sep)
-          .filter((part) => part !== "features")
-          .join(path.sep);
-        const codePath = path.join(tempFolderPath, mjsPath);
-
-        if (!existsSync(codePath)) {
-          throw new Error("Step code file not found: " + codePath);
-        }
-
-        const codePage = getCodePage(codePath);
-        const elements = codePage.getVariableDeclarationAsObject("elements");
-
-        const cucumberStep = getCucumberStep({ step: scenario.step });
-        cucumberStep.text = scenario.step.text;
-        const stepCommands = scenario.step.commands;
-        const cmd = _toRecordingStep(scenario.step.commands[0], scenario.step.name);
-
-        const recording = new Recording();
-        recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
-        const step = { ...recording.steps[0], ...cmd };
-
-        const result = _generateCodeFromCommand(step, elements, {});
-        codePage.insertElements(result.elements);
-
-        codePage._injectOneCommand(functionName, result.codeLines.join("\n"));
-        codePage.save();
-
-        await rm(tempFolderPath, { recursive: true, force: true });
-
-        return { code: codePage.fileContent, newStep: false, mjsFile: codeView.mjsFile };
-      }
-      console.log("Step code not found for step: ", scenario.step.text);
-
-      codeView = AICode[0];
-      const functionName = toMethodName(scenario.step.text);
-      const codeLines = [];
-      const mjsPath = path
-        .normalize(codeView.mjsFile)
-        .split(path.sep)
-        .filter((part) => part !== "features")
-        .join(path.sep);
-      const codePath = path.join(tempFolderPath, mjsPath);
-
-      if (!existsSync(codePath)) {
-        throw new Error("Step code file not found: " + codePath);
-      }
-
-      const codePage = getCodePage(codePath);
-      const elements = codePage.getVariableDeclarationAsObject("elements");
-      let newElements = { ...elements };
-
-      const cucumberStep = getCucumberStep({ step: scenario.step });
-      cucumberStep.text = scenario.step.text;
-      const stepCommands = scenario.step.commands;
-      stepCommands.forEach((command) => {
-        const cmd = _toRecordingStep(command, scenario.step.name);
-
-        const recording = new Recording();
-        recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
-        const step = { ...recording.steps[0], ...cmd };
-        const result = _generateCodeFromCommand(step, elements, {});
-        newElements = { ...result.elements };
-        codeLines.push(...result.codeLines);
-      });
-
-      codePage.insertElements(newElements);
-      codePage.addInfraCommand(
-        functionName,
-        cucumberStep.text,
-        cucumberStep.getVariablesList(),
-        codeLines,
-        false,
-        "recorder"
-      );
-
-      const keyword = (cucumberStep.keywordAlias ?? cucumberStep.keyword).trim();
-      codePage.addCucumberStep(keyword, cucumberStep.getTemplate(), functionName, stepCommands.length);
-      codePage.save();
-
-      await rm(tempFolderPath, { recursive: true, force: true });
-
-      return { code: codePage.fileContent, newStep: true, functionName, mjsFile: codeView.mjsFile };
-    } catch (error) {
-      await rm(tempFolderPath, { recursive: true, force: true });
-      throw error;
-    }
-  }
-  async cleanup({ tags }) {
-    const noopStep = {
-      text: "Noop",
-      isImplemented: true,
-    };
-    const projectDir = this.projectDir;
-    console.log("Cleaning up project dir:", projectDir);
-
-    try {
-      // run a dummy scenario that will run after hooks
-      await this.runStep(
-        {
-          step: noopStep,
-          parametersMap: {},
-          tags: tags || [],
+        __bvt_getObject: (_src, obj) => {
+            this.processObject(obj);
         },
-        {
-          skipAfter: false,
-        }
-      );
-
-      // delete the temp folders (any folder that starts with __temp_features)
-      const tempFolders = readdirSync(projectDir).filter((folder) => folder.startsWith("__temp_features"));
-      for (const folder of tempFolders) {
-        const folderPath = path.join(projectDir, folder);
-        if (existsSync(folderPath)) {
-          this.logger.info(`Deleting temp folder: ${folderPath}`);
-          rmSync(folderPath, { recursive: true });
-        }
-      }
-    } catch (error) {
-      console.error("Error in cleanup", error);
-    }
-  }
-  async processAriaSnapshot(snapshot) {
-    try {
-      await this.evaluateInAllFrames(
-        this.context,
-        `window.__bvt_Recorder.processAriaSnapshot(${JSON.stringify(snapshot)});`
-      );
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  async deselectAriaElements() {
-    try {
-      await this.evaluateInAllFrames(this.context, `window.__bvt_Recorder.deselectAriaElements();`);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-  async initExecution({ tags = [] }) {
-    // run before hooks
-    const noopStep = {
-      text: "Noop",
-      isImplemented: true,
     };
-    await this.runStep(
-      {
-        step: noopStep,
-        parametersMap: {},
-        tags,
-      },
-      {
-        skipBefore: false,
-        skipAfter: true,
-      }
-    );
-  }
-  async cleanupExecution({ tags = [] }) {
-    // run after hooks
-    const noopStep = {
-      text: "Noop",
-      isImplemented: true,
+    getSnapshot = async (attr) => {
+        const selector = `[__bvt_snapshot="${attr}"]`;
+        const locator = await this.web.page.locator(selector);
+        const snapshot = await locator.ariaSnapshot();
+        return snapshot;
     };
-    await this.runStep(
-      {
-        step: noopStep,
-        parametersMap: {},
-        tags,
-      },
-      {
-        skipBefore: true,
-        skipAfter: false,
-      }
-    );
-  }
-  async resetExecution({ tags = [] }) {
-    // run after hooks followed by before hooks
-    await this.cleanupExecution({ tags });
-    await this.initExecution({ tags });
-  }
-
-  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 {};
-  }
-
-  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];
+    processObject = async ({ type, action, value }) => {
+        switch (type) {
+            case "snapshot-element": {
+                if (action === "get-template") {
+                    return true;
+                }
+                break;
+            }
+            default: {
+                console.log("Unknown object type", type);
+                break;
+            }
+        }
+    };
+    getPWScript() {
+        const pwFolder = path.join(__dirname, "..", "..", "assets", "preload", "pw_utils");
+        const result = [];
+        for (const script of readdirSync(pwFolder)) {
+            const scriptPath = path.join(pwFolder, script);
+            const content = readFileSync(scriptPath, "utf8");
+            result.push(content);
+        }
+        return result;
+    }
+    getRecorderScripts() {
+        const recorderFolder = path.join(__dirname, "..", "..", "assets", "preload", "recorder");
+        const result = [];
+        for (const script of readdirSync(recorderFolder)) {
+            const scriptPath = path.join(recorderFolder, script);
+            const content = readFileSync(scriptPath, "utf8");
+            result.push(content);
+        }
+        return result;
+    }
+    getInitScripts(config) {
+        return getInitScript(config, {
+            sdkLanguage: "javascript",
+            testIdAttributeName: "blinq-test-id",
+            stableRafCount: 0,
+            browserName: this.browser?.browserType().name(),
+            inputFileRoleTextbox: false,
+            customEngines: [],
+            isUnderTest: true,
         });
-        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);
+    async _initBrowser({ url }) {
+        if (process.env.CDP_LISTEN_PORT === undefined) {
+            this.#remoteDebuggerPort = await findAvailablePort();
+            process.env.CDP_LISTEN_PORT = String(this.#remoteDebuggerPort);
+        }
+        else {
+            this.#remoteDebuggerPort = Number(process.env.CDP_LISTEN_PORT);
+        }
+        // this.stepRunner.setRemoteDebugPort(this.#remoteDebuggerPort);
+        this.world = { attach: () => { } };
+        const ai_config_file = path.join(this.projectDir, "ai_config.json");
+        let ai_config = {};
+        if (existsSync(ai_config_file)) {
+            try {
+                ai_config = JSON.parse(readFileSync(ai_config_file, "utf8"));
+            }
+            catch (error) {
+                this.logger.error("Error reading ai_config.json", { error });
+            }
+        }
+        this.config = ai_config;
+        const initScripts = {
+            recorderCjs: null,
+            scripts: [
+                this.getInitScripts(ai_config),
+                `\ndelete Object.getPrototypeOf(navigator).webdriver;${process.env.WINDOW_DEBUGGER ? "window.debug=true;\n" : ""}`,
+            ],
+        };
+        const bvtContext = (await initContext(url, false, false, this.world, 450, initScripts, this.envName));
+        this.bvtContext = bvtContext;
+        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,
         });
-
-      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);
+        this.context = bvtContext.playContext;
+        this.web = bvtContext.stable || bvtContext.web;
+        this.web.tryAllStrategies = true;
+        this.page = bvtContext.page;
+        this.pageSet.add(this.page);
+        this.lastKnownUrlPath = this._updateUrlPath();
+        const browser = await this.context.browser();
+        this.browser = browser;
+        // add bindings
+        for (const [name, handler] of Object.entries(this.bindings)) {
+            await this.context.exposeBinding(name, handler);
+        }
+        this._watchTestData();
+        this.web.onRestoreSaveState = async (url) => {
+            await this._initBrowser({ url });
+            this._addPagelisteners(this.context);
+            this._addFrameNavigateListener(this.page);
         };
-
-        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;
+        // 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");
+        await this.bvtContext.web.closeUnexpectedPopups();
+    }
+    async evaluateInAllFrames(context, script) {
+        // retry 3 times
+        for (let i = 0; i < 3; i++) {
+            try {
+                for (const page of context.pages()) {
+                    await evaluate(page.mainFrame(), script);
                 }
-                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 });
+                return;
+            }
+            catch (error) {
+                // console.error("Error evaluting in context:", error);
+                this.logger.error("Error evaluating in context", { error });
+            }
+        }
+    }
+    getMode() {
+        // console.log("getMode", this.#mode);
+        this.logger.info("Current mode", { mode: this.#mode });
+        return this.#mode;
+    }
+    async setMode(mode) {
+        await this.evaluateInAllFrames(this.context, `window.__bvt_Recorder.mode = "${mode}";`);
+        this.#previousMode = this.#mode;
+        this.#mode = mode;
+    }
+    async revertMode() {
+        await this.setMode(this.#previousMode);
+    }
+    async _openTab({ url }) {
+        // add listeners for new pages
+        this._addPagelisteners(this.context);
+        await this.page.goto(url, {
+            waitUntil: "domcontentloaded",
+            timeout: typeof this.config.page_timeout === "number" ? 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 = url;
+        await this.page.dispatchEvent("html", "scroll");
+        await delay(1000);
+    }
+    _addFrameNavigateListener(page) {
+        page.on("close", () => {
+            try {
+                if (!this.pageSet.has(page))
+                    return;
+                // console.log(this.context.pages().length);
+                if (this.context.pages().length > 0) {
+                    this.sendEvent(this.events.onPageClose);
+                }
+                else {
+                    // closed all tabs
+                    this.sendEvent(this.events.onBrowserClose);
                 }
-              }
             }
-          } 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) {
+                this.logger.error("Error in page close event", { error });
+                console.error("Error in page close event");
+                console.error(error);
             }
-          } 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",
+        page.on("framenavigated", async (frame) => {
+            try {
+                if (frame !== page.mainFrame())
+                    return;
+                await this.handlePageTransition();
+            }
+            catch (error) {
+                this.logger.error("Error in handlePageTransition event", { error });
+                console.error("Error in handlePageTransition event");
+                console.error(error);
+            }
+            try {
+                if (frame !== this.#activeFrame)
+                    return;
+                // hack to sync the action event with the frame navigation
+                await this.storeScreenshot({
+                    element: { inputID: "frame" },
+                });
+                const newUrl = frame.url();
+                const newPath = new URL(newUrl).pathname;
+                const newTitle = await frame.title();
+                const changed = diffPaths(this.#currentURL, newUrl);
+                if (changed) {
+                    this.sendEvent(this.events.onFrameNavigate, { url: newPath, title: newTitle });
+                    this.#currentURL = newUrl;
+                }
+            }
+            catch (error) {
+                this.logger.error("Error in frame navigate event", { error });
+                console.error("Error in frame navigate event");
+                // console.error(error);
+            }
         });
-        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) => {
-        console.log("Injecting clipboard payload", 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);
+    }
+    hasHistoryReplacementAtIndex(previousEntries, currentEntries, index) {
+        if (!previousEntries || !currentEntries)
+            return false;
+        if (index >= previousEntries.length || index >= currentEntries.length)
+            return false;
+        const prevEntry = previousEntries[index];
+        // console.log("prevEntry", prevEntry);
+        const currEntry = currentEntries[index];
+        // console.log("currEntry", currEntry);
+        // Check if the entry at this index has been replaced
+        return prevEntry.id !== currEntry.id;
+    }
+    // Even simpler approach for your specific case
+    analyzeTransitionType(entries, currentIndex, currentEntry) {
+        // console.log("Analyzing transition type");
+        // console.log("===========================");
+        // console.log("Current Index:", currentIndex);
+        // console.log("Current Entry:", currentEntry);
+        // console.log("Current Entries:", entries);
+        // console.log("Current entries length:", entries.length);
+        // console.log("===========================");
+        // console.log("Previous Index:", this.previousIndex);
+        // // console.log("Previous Entry:", this.previousEntries[this.previousIndex]);
+        // console.log("Previous Entries:", this.previousEntries);
+        // console.log("Previous entries length:", this.previousHistoryLength);
+        if (this.previousIndex === null || this.previousHistoryLength === null || !this.previousEntries) {
+            return {
+                action: "initial",
+            };
+        }
+        const indexDiff = currentIndex - this.previousIndex;
+        const lengthDiff = entries.length - this.previousHistoryLength;
+        // Backward navigation
+        if (indexDiff < 0) {
+            return { action: "back" };
+        }
+        // Forward navigation
+        if (indexDiff > 0 && lengthDiff === 0) {
+            // Check if the entry at current index is the same as before
+            const entryReplaced = this.hasHistoryReplacementAtIndex(this.previousEntries, entries, currentIndex);
+            if (entryReplaced) {
+                return { action: "navigate" }; // New navigation that replaced forward history
+            }
+            else {
+                return { action: "forward" }; // True forward navigation
+            }
+        }
+        // New navigation (history grew)
+        if (lengthDiff > 0) {
+            return { action: "navigate" };
+        }
+        // Same position, same length
+        if (lengthDiff <= 0) {
+            const entryReplaced = this.hasHistoryReplacementAtIndex(this.previousEntries, entries, currentIndex);
+            return entryReplaced ? { action: "navigate" } : { action: "reload" };
+        }
+        return { action: "unknown" };
+    }
+    async getCurrentTransition() {
+        if (this?.web?.browser?._name !== "chromium") {
+            return;
+        }
+        const client = await this.context.newCDPSession(this.web.page);
+        try {
+            const result = await client.send("Page.getNavigationHistory");
+            const entries = result.entries;
+            const currentIndex = result.currentIndex;
+            const currentEntry = entries[currentIndex];
+            const transitionInfo = this.analyzeTransitionType(entries, currentIndex, currentEntry);
+            this.previousIndex = currentIndex;
+            this.previousHistoryLength = entries.length;
+            this.previousUrl = currentEntry.url;
+            this.previousEntries = [...entries]; // Store a copy of current entries
+            return {
+                currentEntry,
+                navigationAction: transitionInfo.action,
+            };
+        }
+        catch (error) {
+            this.logger.error("Error in getCurrentTransition event", { error });
+            console.error("Error in getTransistionType event", error);
+        }
+        finally {
+            await client.detach();
+        }
+    }
+    userInitiatedTransitionTypes = ["typed", "address_bar"];
+    async handlePageTransition() {
+        const transition = await this.getCurrentTransition();
+        if (!transition)
+            return;
+        const { currentEntry, navigationAction } = transition;
+        switch (navigationAction) {
+            case "initial":
+                // console.log("Initial navigation, no action taken");
+                return;
+            case "navigate":
+                // console.log("transitionType", transition.transitionType);
+                // console.log("sending onGoto event", { url: currentEntry.url,
+                // type: "navigate", });
+                if (this.userInitiatedTransitionTypes.includes(currentEntry.transitionType)) {
+                    const env = JSON.parse(readFileSync(this.envName, "utf8"));
+                    const baseUrl = env.baseUrl;
+                    let url = currentEntry.userTypedURL;
+                    if (baseUrl && url.startsWith(baseUrl)) {
+                        url = url.replace(baseUrl, "{{env.baseUrl}}");
+                    }
+                    // console.log("User initiated transition");
+                    this.sendEvent(this.events.onGoto, { url, type: "navigate" });
+                }
+                return;
+            case "back":
+                // console.log("User navigated back");
+                // console.log("sending onGoto event", {
+                //   type: "back",
+                // });
+                this.sendEvent(this.events.onGoto, { type: "back" });
+                return;
+            case "forward":
+                // console.log("User navigated forward"); console.log("sending onGoto event", { type: "forward", });
+                this.sendEvent(this.events.onGoto, { type: "forward" });
+                return;
+            default:
+                this.sendEvent(this.events.onGoto, { type: "unknown" });
+                return;
+        }
+    }
+    async getCurrentPageTitle() {
+        let title = "";
+        try {
+            title = await this.bvtContext.page.title();
+        }
+        catch (e) {
+            this.logger.error(`Error getting page title: ${getErrorMessage(e)}`);
+        }
+        return title;
+    }
+    async getCurrentPageUrl() {
+        let url = "";
+        try {
+            url = await this.bvtContext.page.url();
+        }
+        catch (e) {
+            this.logger.error(`Error getting page url: ${getErrorMessage(e)}`);
+        }
+        return url;
+    }
+    _addPagelisteners(context) {
+        context.on("page", async (page) => {
+            try {
+                if (page.isClosed())
+                    return;
+                this.pageSet.add(page);
+                await page.waitForLoadState("domcontentloaded");
+                // add listener for frame navigation on new tab
+                this._addFrameNavigateListener(page);
+            }
+            catch (error) {
+                this.logger.error(`Error in page event: ${getErrorMessage(error)}`, undefined, "_addPagelisteners");
+            }
+        });
+    }
+    async openBrowser(_input) {
+        const env = JSON.parse(readFileSync(this.envName, "utf8"));
+        const url = env.baseUrl;
+        await this._initBrowser({ url });
+        await this._openTab({ url });
+        process.env.TEMP_RUN = "true";
+    }
+    overlayLocators(event) {
+        const locatorsResults = [...(event.locators ?? [])];
+        for (const cssLocator of event.cssLocators ?? []) {
+            locatorsResults.push({ mode: "NO_TEXT", css: cssLocator });
+        }
+        if (event.digitLocators) {
+            for (const digitLocator of event.digitLocators) {
+                locatorsResults.push({ ...digitLocator, mode: "IGNORE_DIGIT" });
+            }
+        }
+        if (event.contextLocator) {
+            locatorsResults.push({
+                mode: "CONTEXT",
+                text: event.contextLocator.texts?.[0],
+                css: event.contextLocator.css,
+                climb: event.contextLocator.climbCount,
+            });
+        }
+        return locatorsResults;
+    }
+    setShouldTakeScreenshot(input) {
+        this.shouldTakeScreenshot = input?.value;
+    }
+    async getScreenShot() {
+        const client = await this.context.newCDPSession(this.web.page);
+        try {
+            // Using CDP to capture the screenshot
+            const { data } = await client.send("Page.captureScreenshot", { format: "png" });
+            return data;
+        }
+        catch (error) {
+            this.logger.error("Error in taking browser screenshot", { error });
+            console.error("Error in taking browser screenshot", error);
+        }
+        finally {
+            await client.detach();
+        }
+    }
+    async storeScreenshot(event) {
+        try {
+            // const spath = path.join(__dirname, "media", `${event.inputID}.png`);
+            const screenshotURL = await this.getScreenShot();
+            if (!event.element.inputID) {
+                return;
+            }
+            const inputId = event.element.inputID;
+            if (!screenshotURL) {
+                return;
+            }
+            this.screenshotMap.set(inputId, screenshotURL);
+            // writeFileSync(spath, screenshotURL, "base64");
+        }
+        catch (error) {
+            this.logger.error(`Error in storeScreenshot: ${getErrorMessage(error)}`, undefined, "storeScreenshot");
+        }
+    }
+    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;
+        if (!doc) {
+            throw new Error("Snapshot details missing document content");
+        }
+        // const selector = `[data-blinq-id="${id}"]`;
+        if (!this.backgroundContext) {
+            throw new Error("Background context not initialized");
+        }
+        const newPage = await this.backgroundContext.newPage();
+        const htmlDoc = doc;
+        await newPage.setContent(htmlDoc, { 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 (!recorder || !el) {
+                return { locators: [], allStrategyLocators: [] };
+            }
+            if (contextElement && recorder.locatorGenerator.toContextLocators) {
+                const result = recorder.locatorGenerator.toContextLocators(el, contextElement);
+                return result ?? { locators: [], allStrategyLocators: [] };
+            }
+            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);
+        const cmdEvent = {
+            ...event.element,
+            ...transformAction(event.action, event.element, event.mode === "recordingText" || event.mode === "recordingContext", !!event.isPopupCloseClick, event.mode === "recordingHover", event.mode === "multiInspecting"),
+            // 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,
         };
-
-        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;
-          }
+        // 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();
+        if (event.locators) {
+            Object.assign(cmdEvent, {
+                locators: {
+                    locators: event.locators,
+                    iframe_src: !event.frame.isTop ? event.frame.url : undefined,
+                    nestFrmLoc: event.nestFrmLoc?.children,
+                },
+                allStrategyLocators: event.allStrategyLocators,
+            });
+            this.sendEvent(this.events.onNewCommand, cmdEvent);
+            this._updateUrlPath();
+        }
+        else {
+            this.sendEvent(this.events.onNewCommand, cmdEvent);
+            this._updateUrlPath();
+            await this.generateLocators(event);
+        }
+    }
+    _updateUrlPath() {
+        try {
+            const url = this.bvtContext.web.page.url();
+            if (url !== "about:blank") {
+                this.lastKnownUrlPath = new URL(url).pathname;
+            }
+        }
+        catch (error) {
+            this.logger.error("Error in getting last known url path", { error });
+        }
+        return this.lastKnownUrlPath;
+    }
+    async closeBrowser(_input) {
+        delete process.env.TEMP_RUN;
+        await this.watcher?.close();
+        this.watcher = null;
+        this.previousIndex = null;
+        this.previousHistoryLength = null;
+        this.previousUrl = null;
+        this.previousEntries = null;
+        await closeContext();
+        this.pageSet.clear();
+    }
+    async reOpenBrowser(input) {
+        if (input && input.envName) {
+            this.envName = path.join(this.projectDir, "environments", input.envName + ".json");
+            process.env.BLINQ_ENV = this.envName;
+        }
+        await this.closeBrowser();
+        //   logger.log("closed");
+        await delay(1000);
+        await this.openBrowser();
+        //   logger.log("opened");
+    }
+    async getNumberOfOccurrences({ searchString, regex = false, partial = true, ignoreCase = false, tag = "*", }) {
+        this.isVerify = false;
+        //const script = `window.countStringOccurrences(${JSON.stringify(searchString)});`;
+        if (searchString.length === 0)
+            return -1;
+        let result = 0;
+        for (let i = 0; i < 3; i++) {
+            result = 0;
+            try {
+                // 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) {
+                console.log(e);
+                result = 0;
+            }
+        }
+    }
+    async startRecordingInput(_input) {
+        await this.setMode("recordingInput");
+    }
+    async stopRecordingInput(_input) {
+        await this.setMode("idle");
+    }
+    async startRecordingText(input) {
+        const isInspectMode = typeof input === "boolean" ? input : !!input?.isInspectMode;
+        if (isInspectMode) {
+            await this.setMode("inspecting");
+        }
+        else {
+            await this.setMode("recordingText");
+        }
+    }
+    async stopRecordingText(_input) {
+        await this.setMode("idle");
+    }
+    async startRecordingContext(_input) {
+        await this.setMode("recordingContext");
+    }
+    async stopRecordingContext(_input) {
+        await this.setMode("idle");
+    }
+    async abortExecution() {
+        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();
+        }, 100);
+        this.timerId = timerId;
+    }
+    async runStep({ step, parametersMap, tags, isFirstStep = false, listenNetwork = false, AICode }, options) {
+        const { skipAfter = true, skipBefore = !isFirstStep } = options || {};
+        const env = path.basename(this.envName, ".json");
+        const envVars = {
+            TOKEN: this.TOKEN,
+            TEMP_RUN: "true",
+            REPORT_FOLDER: this.bvtContext.reportFolder,
+            BLINQ_ENV: this.envName,
+            DEBUG: "blinq:route",
         };
-
-        let dataTransfer = null;
+        if (!step.isImplemented) {
+            envVars.BVT_TEMP_SNAPSHOTS_FOLDER = path.join(this.tempSnapshotsFolder, env);
+        }
+        this.bvtContext.navigate = true;
+        this.bvtContext.loadedRoutes = null;
+        this.bvtContext.STORE_DETAILED_NETWORK_DATA = !!listenNetwork;
+        for (const [key, value] of Object.entries(envVars)) {
+            process.env[key] = value;
+        }
+        if (this.timerId) {
+            clearTimeout(this.timerId);
+            this.timerId = null;
+        }
+        await this.setMode("running");
         try {
-          dataTransfer = new DataTransfer();
-        } catch (error) {
-          console.warn("Clipboard bridge could not create DataTransfer", error);
+            step.text = step.text.trim();
+            const { result, info } = await this.stepRunner.runStep({
+                step,
+                parametersMap,
+                envPath: this.envName,
+                tags,
+                config: this.config,
+                AICode,
+            }, this.bvtContext, {
+                skipAfter,
+                skipBefore,
+            });
+            await this.revertMode();
+            return { info };
+        }
+        catch (error) {
+            await this.revertMode();
+            throw error;
+        }
+        finally {
+            for (const key of Object.keys(envVars)) {
+                delete process.env[key];
+            }
+            this.bvtContext.navigate = false;
+        }
+    }
+    async saveScenario({ scenario, featureName, override, isSingleStep, branch, isEditing, env, AICode, }) {
+        const res = await this.workspaceService.saveScenario({
+            scenario,
+            featureName,
+            override,
+            isSingleStep,
+            branch,
+            isEditing,
+            projectId: path.basename(this.projectDir),
+            env: env ?? this.envName,
+            AICode,
+        });
+        if (res.success) {
+            await this.cleanup({ tags: scenario.tags });
+        }
+        else {
+            throw new Error(res.message || "Error saving scenario");
+        }
+    }
+    async getImplementedSteps(_input) {
+        const stepsAndScenarios = await getImplementedSteps(this.projectDir);
+        const implementedSteps = stepsAndScenarios.implementedSteps;
+        const scenarios = stepsAndScenarios.scenarios;
+        for (const scenario of scenarios) {
+            this.scenariosStepsMap.set(scenario.name, scenario.steps);
+            delete scenario.steps;
         }
-
-        if (dataTransfer) {
-          if (clipboardPayload?.text) {
+        return {
+            implementedSteps,
+            scenarios,
+        };
+    }
+    async getStepsAndCommandsForScenario({ name, featureName }) {
+        const steps = this.scenariosStepsMap.get(name) || [];
+        for (const step of steps) {
+            if (step.isImplemented) {
+                step.commands = this.getCommandsForImplementedStep({ stepName: step.text });
+            }
+            else {
+                step.commands = [];
+            }
+        }
+        return steps;
+        // return getStepsAndCommandsForScenario({
+        //   name,
+        //   featureName,
+        //   projectDir: this.projectDir,
+        //   map: this.scenariosStepsMap,
+        // });
+    }
+    async generateStepName({ commands, stepsNames, parameters, map, }) {
+        return await this.namesService.generateStepName({ commands, stepsNames, parameters, map });
+    }
+    async generateScenarioAndFeatureNames(scenarioAsText) {
+        return await this.namesService.generateScenarioAndFeatureNames(scenarioAsText);
+    }
+    async generateCommandName({ command }) {
+        return await this.namesService.generateCommandName({ command });
+    }
+    async getCurrentChromiumPath() {
+        const currentURL = await this.bvtContext.web.page.url();
+        const env = JSON.parse(readFileSync(this.envName, "utf8"));
+        const baseURL = env.baseUrl;
+        const relativeURL = currentURL.startsWith(baseURL) ? currentURL.replace(baseURL, "/") : undefined;
+        return {
+            relativeURL,
+            baseURL,
+            currentURL,
+        };
+    }
+    getReportFolder() {
+        if (this.bvtContext.reportFolder) {
+            return this.bvtContext.reportFolder;
+        }
+        else
+            return "";
+    }
+    getSnapshotFolder() {
+        if (this.bvtContext.snapshotFolder) {
+            return path.join(process.cwd(), this.bvtContext.snapshotFolder);
+        }
+        else
+            return "";
+    }
+    async overwriteTestData(data) {
+        this.bvtContext.stable?.overwriteTestData(data.value, this.world);
+    }
+    _watchTestData() {
+        this.watcher = chokidar.watch(_getDataFile(this.world, this.bvtContext, this.web), {
+            persistent: true,
+            ignoreInitial: true,
+            awaitWriteFinish: {
+                stabilityThreshold: 2000,
+                pollInterval: 100,
+            },
+        });
+        if (existsSync(_getDataFile(this.world, this.bvtContext, this.web))) {
             try {
-              dataTransfer.setData("text/plain", clipboardPayload.text);
-            } catch (error) {
-              console.warn("Clipboard bridge failed to set text/plain", error);
+                const testData = JSON.parse(readFileSync(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
+                // this.logger.info("Test data", testData);
+                this.sendEvent(this.events.getTestData, testData);
             }
-          }
-          if (clipboardPayload?.html) {
+            catch (e) {
+                // this.logger.error("Error reading test data file", e);
+                console.log("Error reading test data file", e);
+            }
+        }
+        this.logger.info("Watching for test data changes");
+        this.watcher.on("all", async (_event, _path) => {
             try {
-              dataTransfer.setData("text/html", clipboardPayload.html);
-            } catch (error) {
-              console.warn("Clipboard bridge failed to set text/html", error);
+                const testData = JSON.parse(await readFile(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
+                // 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);
+                console.log("Error reading test data file", e);
+            }
+        });
+    }
+    async loadTestData({ data, type }) {
+        if (type === "user") {
+            const username = data.username;
+            await this.web.loadTestDataAsync("users", username, this.world);
+        }
+        else {
+            const csv = data.csv;
+            const row = data.row;
+            // code = `await context.web.loadTestDataAsync("csv","${csv}:${row}", this)`;
+            await this.web.loadTestDataAsync("csv", `${csv}:${row}`, this.world);
+        }
+    }
+    async discardTestData({ tags }) {
+        resetTestData(this.envName, this.world);
+        await this.cleanup({ tags });
+    }
+    async addToTestData(obj) {
+        if (!existsSync(_getDataFile(this.world, this.bvtContext, this.web))) {
+            await writeFile(_getDataFile(this.world, this.bvtContext, this.web), JSON.stringify({}), "utf8");
+        }
+        let data = JSON.parse(await readFile(_getDataFile(this.world, this.bvtContext, this.web), "utf8"));
+        data = Object.assign(data, obj);
+        await writeFile(_getDataFile(this.world, this.bvtContext, this.web), JSON.stringify(data), "utf8");
+    }
+    getScenarios() {
+        const featureFiles = readdirSync(path.join(this.projectDir, "features"))
+            .filter((file) => file.endsWith(".feature"))
+            .map((file) => path.join(this.projectDir, "features", file));
+        try {
+            const parsedFiles = featureFiles.map((file) => this.parseFeatureFile(file));
+            const output = {};
+            parsedFiles.forEach((file) => {
+                if (!file.feature)
+                    return;
+                if (!file.feature.name)
+                    return;
+                output[file.feature.name] = [];
+                file.feature.children.forEach((child) => {
+                    if (child.scenario) {
+                        output[file.feature.name].push(child.scenario.name);
+                    }
+                });
+            });
+            return output;
+        }
+        catch (e) {
+            console.log(e);
+        }
+        return {};
+    }
+    getCommandsForImplementedStep({ stepName }) {
+        const step_definitions = loadStepDefinitions(this.projectDir);
+        const stepParams = parseStepTextParameters(stepName);
+        return getCommandsForImplementedStep(stepName, step_definitions, stepParams).commands;
+    }
+    loadExistingScenario({ featureName, scenarioName }) {
+        const step_definitions = loadStepDefinitions(this.projectDir);
+        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 = [];
+        const datasets = [];
+        if (scenario.examples && scenario.examples.length > 0) {
+            const example = scenario.examples[0];
+            example?.tableHeader?.cells.forEach((cell, index) => {
+                parameters.push({
+                    key: cell.value,
+                    value: unEscapeNonPrintables(example.tableBody[0].cells[index].value),
+                });
+                // datasets.push({
+                //   data: example.tableBody[]
+                // })
+            });
+            for (let i = 0; i < example.tableBody.length; i++) {
+                const row = example.tableBody[i];
+                // for (const row of example.tableBody) {
+                const paramters = [];
+                row.cells.forEach((cell, index) => {
+                    paramters.push({
+                        key: example.tableHeader.cells[index].value,
+                        value: unEscapeNonPrintables(cell.value),
+                    });
+                });
+                datasets.push({
+                    data: paramters,
+                    datasetId: i,
+                });
             }
-          }
-          if (Array.isArray(clipboardPayload?.files)) {
-            for (const filePayload of clipboardPayload.files) {
-              const file = createFileFromPayload(filePayload);
-              if (file) {
+        }
+        for (const step of scenario.steps) {
+            const stepParams = parseStepTextParameters(step.text);
+            // console.log("Parsing step ", step, stepParams);
+            const _s = getCommandsForImplementedStep(step.text, step_definitions, stepParams);
+            delete step.location;
+            const _step = {
+                ...step,
+                ..._s,
+                keyword: step.keyword.trim(),
+            };
+            parseRouteFiles(this.projectDir, _step);
+            steps.push(_step);
+        }
+        return {
+            name: scenario.name,
+            tags: scenario.tags.map((tag) => tag.name),
+            steps,
+            parameters,
+            datasets,
+        };
+    }
+    async findRelatedTextInAllFrames({ searchString, climb, contextText, params, }) {
+        if (searchString.length === 0)
+            return -1;
+        let result = 0;
+        for (let i = 0; i < 3; i++) {
+            result = 0;
+            try {
                 try {
-                  dataTransfer.items.add(file);
-                } catch (error) {
-                  console.warn("Clipboard bridge failed to append file", error);
+                    const allFrameResult = await this.web.findRelatedTextInAllFrames(contextText, climb, searchString, params, {}, this.world);
+                    for (const frameResult of allFrameResult) {
+                        result += frameResult.elementCount;
+                    }
+                }
+                catch (e) {
+                    console.log(e);
                 }
-              }
+                return result;
+            }
+            catch (e) {
+                console.log(e);
+                result = 0;
+            }
+        }
+        return result;
+    }
+    async setStepCodeByScenario({ function_name, mjs_file_content, user_request, selectedTarget, page_context, AIMemory, steps_context, }) {
+        const runsURL = getRunsServiceBaseURL();
+        const url = `${runsURL}/process-user-request/generate-code-with-context`;
+        try {
+            const result = await axiosClient({
+                url,
+                method: "POST",
+                data: {
+                    function_name,
+                    mjs_file_content,
+                    user_request,
+                    selectedTarget,
+                    page_context,
+                    AIMemory,
+                    steps_context,
+                },
+                headers: {
+                    Authorization: `Bearer ${this.TOKEN}`,
+                    "X-Source": "recorder",
+                },
+            });
+            if (result.status !== 200) {
+                return { success: false, message: "Error while fetching code changes" };
             }
-          }
-        }
-
-        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,
+            return { success: true, data: result.data };
+        }
+        catch (error) {
+            // @ts-ignore
+            const reason = error?.response?.data?.error || "";
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            throw new Error(`Failed to fetch code changes: ${errorMessage} \n ${reason}`);
+        }
+    }
+    async getStepCodeByScenario({ featureName, scenarioName, projectId, branch, }) {
+        try {
+            const runsURL = getRunsServiceBaseURL();
+            const ssoURL = runsURL.replace("/runs", "/auth");
+            const privateRepoURL = `${ssoURL}/isRepoPrivate?project_id=${projectId}`;
+            const isPrivateRepoReq = await axiosClient({
+                url: privateRepoURL,
+                method: "GET",
+                headers: {
+                    Authorization: `Bearer ${this.TOKEN}`,
+                    "X-Source": "recorder",
+                },
             });
-            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);
+            if (isPrivateRepoReq.status !== 200) {
+                return { success: false, message: "Error while checking repo privacy" };
             }
-          }
-          return false;
-        };
-
-        if (clipboardPayload?.html) {
-          const inserted = callLegacyExecCommand("insertHTML", clipboardPayload.html);
-          if (inserted) {
+            const isPrivateRepo = isPrivateRepoReq.data.isPrivate ? isPrivateRepoReq.data.isPrivate : false;
+            const workspaceURL = runsURL.replace("/runs", "/workspace");
+            const url = `${workspaceURL}/get-step-code-by-scenario`;
+            const result = await axiosClient({
+                url,
+                method: "POST",
+                data: {
+                    scenarioName,
+                    featureName,
+                    projectId,
+                    isPrivateRepo,
+                    branch,
+                },
+                headers: {
+                    Authorization: `Bearer ${this.TOKEN}`,
+                    "X-Source": "recorder",
+                },
+            });
+            if (result.status !== 200) {
+                return { success: false, message: "Error while getting step code" };
+            }
+            return { success: true, data: result.data.stepInfo };
+        }
+        catch (error) {
+            const axiosError = error;
+            const reason = axiosError?.response?.data?.error || "";
+            const errorMessage = error instanceof Error ? error.message : "Unknown error";
+            throw new Error(`Failed to get step code: ${errorMessage} \n ${reason}`);
+        }
+    }
+    async getContext() {
+        await this.page.waitForLoadState("domcontentloaded");
+        await this.page.waitForSelector("body");
+        await this.page.waitForTimeout(500);
+        return await this.page.evaluate(() => {
+            return document.documentElement.outerHTML;
+        });
+    }
+    async deleteCommandFromStepCode({ scenario, AICode, command }) {
+        if (!AICode || AICode.length === 0) {
+            console.log("No AI code available to delete.");
             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;
+        }
+        const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
+        const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
+        process.env.tempFeaturesFolderPath = __temp_features_FolderName;
+        process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
+        try {
+            await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
+            await this.stepRunner.writeWrapperCode(tempFolderPath);
+            const codeView = AICode.find((f) => f.stepName === scenario.step.text);
+            if (!codeView) {
+                throw new Error("Step code not found for step: " + scenario.step.text);
             }
-          } 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) {
+            const functionName = codeView.functionName;
+            const mjsPath = path
+                .normalize(codeView.mjsFile)
+                .split(path.sep)
+                .filter((part) => part !== "features")
+                .join(path.sep);
+            const codePath = path.join(tempFolderPath, mjsPath);
+            if (!existsSync(codePath)) {
+                throw new Error("Step code file not found: " + codePath);
+            }
+            const codePage = getCodePage(codePath);
+            const elements = codePage.getVariableDeclarationAsObject("elements");
+            const cucumberStep = getCucumberStep({ step: scenario.step });
+            cucumberStep.text = scenario.step.text;
+            const stepCommands = scenario.step.commands;
+            const cmd = _toRecordingStep(command, scenario.step.name);
+            const recording = new Recording();
+            recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+            const step = { ...(recording.steps[0] ?? {}), ...(cmd ?? {}) };
+            const result = _generateCodeFromCommand(step, elements, {});
+            codePage._removeCommands(functionName, result.codeLines);
+            codePage.removeUnusedElements();
+            codePage.save();
+            await rm(tempFolderPath, { recursive: true, force: true });
+            return { code: codePage.fileContent, mjsFile: codeView.mjsFile };
+        }
+        catch (error) {
+            await rm(tempFolderPath, { recursive: true, force: true });
+            throw error;
+        }
+    }
+    async addCommandToStepCode({ scenario, AICode }) {
+        if (!AICode || AICode.length === 0) {
+            console.log("No AI code available to add.");
             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;
+        }
+        const __temp_features_FolderName = "__temp_features" + Math.random().toString(36).substring(2, 7);
+        const tempFolderPath = path.join(this.projectDir, __temp_features_FolderName);
+        process.env.tempFeaturesFolderPath = __temp_features_FolderName;
+        process.env.TESTCASE_REPORT_FOLDER_PATH = tempFolderPath;
+        try {
+            await this.stepRunner.copyCodetoTempFolder({ tempFolderPath, AICode });
+            await this.stepRunner.writeWrapperCode(tempFolderPath);
+            let codeView = AICode.find((f) => f.stepName === scenario.step.text);
+            if (codeView) {
+                scenario.step.commands = [scenario.step.commands.pop()];
+                const functionName = codeView.functionName;
+                const mjsPath = path
+                    .normalize(codeView.mjsFile)
+                    .split(path.sep)
+                    .filter((part) => part !== "features")
+                    .join(path.sep);
+                const codePath = path.join(tempFolderPath, mjsPath);
+                if (!existsSync(codePath)) {
+                    throw new Error("Step code file not found: " + codePath);
+                }
+                const codePage = getCodePage(codePath);
+                const elements = codePage.getVariableDeclarationAsObject("elements");
+                const cucumberStep = getCucumberStep({ step: scenario.step });
+                cucumberStep.text = scenario.step.text;
+                const stepCommands = scenario.step.commands;
+                const cmd = _toRecordingStep(scenario.step.commands[0], scenario.step.name);
+                const recording = new Recording();
+                recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+                const step = { ...(recording.steps[0] ?? {}), ...(cmd ?? {}) };
+                const result = _generateCodeFromCommand(step, elements, {});
+                codePage.insertElements(result.elements);
+                codePage._injectOneCommand(functionName, result.codeLines.join("\n"));
+                codePage.save();
+                await rm(tempFolderPath, { recursive: true, force: true });
+                return { code: codePage.fileContent, newStep: false, mjsFile: codeView.mjsFile };
             }
-          } 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);
+            console.log("Step code not found for step: ", scenario.step.text);
+            codeView = AICode[0];
+            const functionName = toMethodName(scenario.step.text);
+            const codeLines = [];
+            const mjsPath = path
+                .normalize(codeView.mjsFile)
+                .split(path.sep)
+                .filter((part) => part !== "features")
+                .join(path.sep);
+            const codePath = path.join(tempFolderPath, mjsPath);
+            if (!existsSync(codePath)) {
+                throw new Error("Step code file not found: " + codePath);
             }
-            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",
-      });
-    }
-  }
+            const codePage = getCodePage(codePath);
+            const elements = codePage.getVariableDeclarationAsObject("elements") || {};
+            let newElements = { ...elements };
+            const cucumberStep = getCucumberStep({ step: scenario.step });
+            cucumberStep.text = scenario.step.text;
+            const stepCommands = scenario.step.commands;
+            stepCommands.forEach((command) => {
+                const cmd = _toRecordingStep(command, scenario.step.name);
+                const recording = new Recording();
+                recording.loadFromObject({ steps: stepCommands, step: cucumberStep });
+                const step = { ...(recording.steps[0] ?? {}), ...(cmd ?? {}) };
+                const result = _generateCodeFromCommand(step, elements, {});
+                const elementUpdates = result.elements ?? {};
+                newElements = { ...elementUpdates };
+                codeLines.push(...(result.codeLines ?? []));
+            });
+            codePage.insertElements(newElements);
+            codePage.addInfraCommand(functionName, cucumberStep.text, cucumberStep.getVariablesList(), codeLines, false, "recorder");
+            const keyword = (cucumberStep.keywordAlias ?? cucumberStep.keyword).trim();
+            codePage.addCucumberStep(keyword, cucumberStep.getTemplate(), functionName, stepCommands.length);
+            codePage.save();
+            await rm(tempFolderPath, { recursive: true, force: true });
+            return { code: codePage.fileContent, newStep: true, functionName, mjsFile: codeView.mjsFile };
+        }
+        catch (error) {
+            await rm(tempFolderPath, { recursive: true, force: true });
+            throw error;
+        }
+    }
+    async cleanup({ tags }) {
+        const noopStep = {
+            text: "Noop",
+            isImplemented: true,
+        };
+        const projectDir = this.projectDir;
+        console.log("Cleaning up project dir:", projectDir);
+        try {
+            // run a dummy scenario that will run after hooks
+            await this.runStep({
+                step: noopStep,
+                parametersMap: {},
+                tags: tags || [],
+            }, {
+                skipAfter: false,
+            });
+            // delete the temp folders (any folder that starts with __temp_features)
+            const tempFolders = readdirSync(projectDir).filter((folder) => folder.startsWith("__temp_features"));
+            for (const folder of tempFolders) {
+                const folderPath = path.join(projectDir, folder);
+                if (existsSync(folderPath)) {
+                    this.logger.info(`Deleting temp folder: ${folderPath}`);
+                    rmSync(folderPath, { recursive: true });
+                }
+            }
+        }
+        catch (error) {
+            console.error("Error in cleanup", error);
+        }
+    }
+    async processAriaSnapshot(snapshot) {
+        try {
+            await this.evaluateInAllFrames(this.context, `window.__bvt_Recorder.processAriaSnapshot(${JSON.stringify(snapshot)});`);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    async deselectAriaElements() {
+        try {
+            await this.evaluateInAllFrames(this.context, `window.__bvt_Recorder.deselectAriaElements();`);
+            return true;
+        }
+        catch (e) {
+            return false;
+        }
+    }
+    async initExecution({ tags = [] }) {
+        // run before hooks
+        const noopStep = {
+            text: "Noop",
+            isImplemented: true,
+        };
+        await this.runStep({
+            step: noopStep,
+            parametersMap: {},
+            tags,
+        }, {
+            skipBefore: false,
+            skipAfter: true,
+        });
+    }
+    async cleanupExecution({ tags = [] }) {
+        // run after hooks
+        const noopStep = {
+            text: "Noop",
+            isImplemented: true,
+        };
+        await this.runStep({
+            step: noopStep,
+            parametersMap: {},
+            tags,
+        }, {
+            skipBefore: true,
+            skipAfter: false,
+        });
+    }
+    async resetExecution({ tags = [] }) {
+        // run after hooks followed by before hooks
+        await this.cleanupExecution({ tags });
+        await this.initExecution({ tags });
+    }
+    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}`, { error: e });
+            console.log(e);
+        }
+        return {};
+    }
+    stopRecordingNetwork(_input) {
+        if (this.bvtContext) {
+            this.bvtContext.STORE_DETAILED_NETWORK_DATA = false;
+        }
+    }
+    async fakeParams(params) {
+        const newFakeParams = {};
+        Object.entries(params).forEach(([key, rawValue]) => {
+            if (!rawValue.startsWith("{{") || !rawValue.endsWith("}}")) {
+                newFakeParams[key] = rawValue;
+                return;
+            }
+            try {
+                newFakeParams[key] = faker.helpers.fake(rawValue);
+            }
+            catch {
+                newFakeParams[key] = rawValue;
+            }
+        });
+        return newFakeParams;
+    }
 }