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

package/bin/assets/scripts/recorder.js

@@ -0,0 +1,1147 @@
+import LocatorGenerator from "./unique_locators";
+import SnapshotCapturer from "./snapshot_capturer";
+import { initInjectedScript, __PW } from "./pw";
+import AriaSnapshotUtils from "./aria_snapshot";
+
+import Yaml from "./yaml";
+import EventUtils from "./event_utils";
+const RANDOM_ID = Math.random().toString(36).substring(7);
+let inputId = 0;
+const getNextInputId = () => {
+  inputId++;
+  return `bvt_input_${inputId}_${RANDOM_ID}`;
+};
+
+const elementHasText = (el) => {
+  if (el instanceof HTMLInputElement) {
+    if (el.type === "button" || el.type === "submit") {
+      return el.value?.length > 0;
+    }
+  }
+  const text = el.innerText;
+
+  if (text?.length > 0) {
+    // let hasChildTextNode = false;
+    if (el.childNodes.length === 0) {
+      return true;
+    }
+    for (let i = 0; i < el.childNodes.length; i++) {
+      const child = el.childNodes[i];
+      if (child.nodeType === Node.TEXT_NODE) {
+        // hasChildTextNode = true;
+        if (child.nodeValue.trim().length > 0) {
+          return true;
+        }
+      }
+    }
+  }
+};
+
+/*global __bvt_recordCommand, __bvt_setMode, __bvt_revertMode, __bvt_recordPageClose, __bvt_getMode, __bvt_log, __bvt_getObject */
+const bvtRecorderBindings = {
+  recordCommand: (cmd) => __bvt_recordCommand(cmd),
+  setMode: (m) => __bvt_setMode(m),
+  revertMode: () => __bvt_revertMode(),
+  recordPageClose: () => __bvt_recordPageClose(),
+  getMode: () => __bvt_getMode(),
+  log: (msg) => __bvt_log(msg),
+  sendObject: (obj) => __bvt_getObject(obj),
+  // validateLocators: (obj) => __bvt_validateLocators(obj),
+};
+
+let lastInputId = null;
+
+// define the jsdoc type for the action
+/**
+ * @typedef {Object} BVTRecorderAction
+ * @property {string} name
+ */
+
+// define the jsdoc type for the input
+/**
+ * @typedef {Object} BVTRecorderStateInput
+ * @property {(event:Event) => BVTRecorderAction | undefined} getAction
+ * @property {(element:HTMLElement) => HTMLElement} getInterestedElement
+ * @property {string} hoverOutlineStyle
+ */
+class BVTRecorderState {
+  /**
+   * @param {string} name
+   * @param {BVTRecorderStateInput} input
+   */
+  constructor(name, input) {
+    this.name = name;
+    this.getAction = input.getAction;
+    this.getInterestedElement = input.getInterestedElement;
+    this.hoverOutlineStyle = input.hoverOutlineStyle;
+    this.start = input.start;
+  }
+}
+
+class BVTRecorder {
+  #activeTool = null;
+  #mode = "noop";
+  contextElement = null;
+  debugListener = false;
+  debugMouseOut = false;
+  debugMouseOver = false;
+  debugFocusOut = false;
+  debugFocusIn = false;
+  #outlineSymbol = Symbol("outline");
+  #isDraggingToolbar = false;
+  toolbar = null;
+  activeElement = null;
+  cleanup = null;
+  rect = null;
+  offsetX = null;
+  offsetY = null;
+  popupHandlers = [];
+  disableHighlight = false;
+  improviseLocators = true;
+  snapshotCapturer = new SnapshotCapturer({
+    excludeSelectors: ["script", "x-bvt-toolbar"],
+  });
+  injectedScript = initInjectedScript();
+  locatorGenerator = new LocatorGenerator(this.injectedScript);
+  PW = __PW;
+  snapshotUtils = new AriaSnapshotUtils();
+  eventUtils = new EventUtils();
+
+  constructor(config = {}) {
+    const { disableHighlight = false, improviseLocators = true, popupHandlers = [], testAttributes = [] } = config;
+    this.disableHighlight = disableHighlight;
+    this.improviseLocators = improviseLocators;
+    this.popupHandlers = popupHandlers;
+    this.locatorGenerator.options.customAttributes = testAttributes;
+    this.init();
+  }
+  init({ mode = "noop" } = {}) {
+    this.addRecorderStates();
+    this.mode = mode;
+    this.addOverrides();
+    this.addListeners();
+    this.addHighlightListeners(window);
+    window.addEventListener("DOMContentLoaded", async () => {
+      this.addToolbar();
+      this.mode = await bvtRecorderBindings.getMode();
+    });
+  }
+  collectElementsFromAriaSnapshot(root, elementSet) {
+    if (root.element && root.element.tagName === "X-BVT-TOOL") {
+      return;
+    }
+    if (root.element) {
+      elementSet.add({ element: root.element, snapshot: this.injectedScript.ariaSnapshot(root.element) });
+    }
+    for (const child of root.children) {
+      if (typeof child !== "string") {
+        this.collectElementsFromAriaSnapshot(child, elementSet);
+      }
+    }
+  }
+  addRecorderStates() {
+    const noopTool = new BVTRecorderState("noop", {
+      getAction: (e) => {
+        this.eventUtils.consumeEvent(e);
+      },
+      getInterestedElement: () => { },
+      hoverOutlineStyle: "",
+    });
+
+    const idleTool = new BVTRecorderState("idle", {
+      start: () => {
+        // on start hide the toolbar
+        this.toolbar?.hide();
+        // on cleanup show the toolbar
+
+        return () => {
+          this.toolbar?.show();
+        };
+      },
+      getAction: () => null,
+      getInterestedElement: () => { },
+      hoverOutlineStyle: "",
+    });
+
+    const runningTool = new BVTRecorderState("running", {
+      start: () => {
+        // on start hide the toolbar
+        this.toolbar?.hide();
+        // on cleanup show the toolbar
+
+        return () => {
+          this.toolbar?.show();
+        };
+      },
+      getAction: () => null,
+      getInterestedElement: () => { },
+      hoverOutlineStyle: "",
+    });
+
+    const inspectingTool = new BVTRecorderState("inspecting", {
+      start: () => {
+        // on start hide the toolbar
+        this.toolbar?.hide();
+        // on cleanup show the toolbar
+
+        return () => {
+          this.toolbar?.show();
+          this.resetHighlight(this.activeElement);
+        };
+      },
+      getInterestedElement: (el) => el,
+      hoverOutlineStyle: "2px solid red",
+      getAction(e) {
+        bvtRecorderThis.eventUtils.consumeEvent(e);
+        if (e.type === "pointerdown") {
+          const el = bvtRecorderThis.eventUtils.deepEventTarget(e);
+          return {
+            details: {
+              name: "click",
+            },
+            element: el,
+          };
+        }
+      },
+    });
+
+    const multiInspectingTool = new BVTRecorderState("multiInspecting", {
+      start: () => {
+        // on start hide the toolbar
+        this.toolbar?.hide();
+        const el = document.getElementsByTagName("body")[0];
+
+        this.pageSnapshot = this.injectedScript.ariaSnapshot(el);
+        this.lastSnapshot = this.injectedScript._lastAriaSnapshot;
+        this.snapshotElements = new Set();
+        this.interestedElements = new Map();
+        this.collectElementsFromAriaSnapshot(this.lastSnapshot.root, this.snapshotElements);
+        this.elementSet = new Set();
+        for (const { element: el } of this.snapshotElements) {
+          this.elementSet.add(el);
+        }
+
+        return () => {
+          this.toolbar?.show();
+          for (const el of this.interestedElements.keys()) {
+            el.style.background = el.__originalBackground;
+            delete el.__originalBackground;
+          }
+          // reset the highlight for all active elements
+        };
+      },
+      getInterestedElement: (el) => {
+        return this.snapshotUtils.isSnapshotAvailable(el, this.elementSet);
+      },
+      hoverOutlineStyle: "2px solid red",
+      getAction: (e) => {
+        this.eventUtils.consumeEvent(e);
+        if (e.type === "pointerdown") {
+          const el = this.eventUtils.deepEventTarget(e);
+          let snapshot = this.injectedScript.ariaSnapshot(el);
+          if (this.snapshotUtils.isSnapshotAvailable(el, this.elementSet)) {
+            if (this.interestedElements.has(el)) {
+              this.interestedElements.delete(el);
+              el.style.background = el.__originalBackground;
+              delete el.__originalBackground;
+            } else {
+              el.__originalBackground = el.style.background;
+              el.style.background = "rgba(255, 204, 0, 0.3)";
+              this.interestedElements.set(el, snapshot);
+            }
+            const childrenArray = Array.from(this.interestedElements.keys());
+            if (childrenArray.length === 0) {
+              return {
+                details: {
+                  name: "click",
+                  value: "",
+                },
+                element: el,
+              };
+            }
+            const parsedParentSnapshot = this.injectedScript.utils.parseAriaSnapshot(Yaml, this.pageSnapshot).fragment;
+            const childrenSnapshots = Array.from(this.interestedElements.values());
+            const parsedChildrenSnapshots = childrenSnapshots.map((snapshot) => {
+              return this.injectedScript.utils.parseAriaSnapshot(Yaml, snapshot).fragment;
+            });
+            const filteredParent = this.snapshotUtils.filterParentToChildren(
+              parsedParentSnapshot,
+              parsedChildrenSnapshots
+            );
+            snapshot = this.snapshotUtils.serializeAriaSnapshot(filteredParent);
+            return {
+              details: {
+                name: "click",
+                value: snapshot,
+              },
+              element: el,
+            };
+          }
+        }
+      },
+    });
+
+    const bvtRecorderThis = this;
+    const recordingTextTool = new BVTRecorderState("recordingText", {
+      start: () => {
+        // on start hide the toolbar
+        this.toolbar?.hide();
+        // on cleanup show the toolbar
+
+        return () => {
+          this.toolbar?.show();
+          this.resetHighlight(this.activeElement);
+        };
+      },
+
+      getInterestedElement: (el) => {
+        const hasText = elementHasText(el);
+        if (hasText) {
+          return el;
+        }
+        return;
+      },
+      hoverOutlineStyle: "2px solid red",
+      getAction(e) {
+        bvtRecorderThis.eventUtils.consumeEvent(e);
+        if (e.type === "pointerdown") {
+          const el = bvtRecorderThis.eventUtils.deepEventTarget(e);
+          const isInterested = this.getInterestedElement(el);
+          if (isInterested) {
+            return {
+              details: {
+                name: "click",
+              },
+              element: el,
+            };
+          }
+        }
+      },
+    });
+
+    const recordingHoverTool = new BVTRecorderState("recordingHover", {
+      start: () => {
+        // TODO: highlight the activeElement
+        // set hover tool selected
+        if (this.toolbar) {
+          this.toolbar.hoverTool.selected = true;
+        }
+
+        // on cleanup remove the highlight from activeElement
+        return () => {
+          this.resetHighlight(this.activeElement);
+          if (this.toolbar) {
+            this.toolbar.hoverTool.selected = false;
+          }
+        };
+      },
+      getAction: (e) => {
+        this.eventUtils.consumeEvent(e);
+        if (e.type === "click") {
+          return {
+            details: {
+              name: "click",
+            },
+            element: this.eventUtils.deepEventTarget(e),
+          };
+        }
+      },
+      getInterestedElement: (el) => el,
+      hoverOutlineStyle: "2px solid blue",
+    });
+
+    const recordingInputTool = new BVTRecorderState("recordingInput", {
+      start: () => {
+        // TODO: highlight the activeElement
+
+        // on cleanup remove the highlight from activeElement
+        return () => {
+          this.resetHighlight(this.activeElement);
+        };
+      },
+      getAction: (event) => {
+        switch (event.type) {
+          case "pointerdown": {
+            if (event.button === 2) return;
+            const el = this.eventUtils.getNearestInteractiveElement(this.eventUtils.deepEventTarget(event));
+            const checkbox = this.eventUtils.asCheckbox(el);
+            if (el.nodeName === "INPUT" && el.type.toLowerCase() === "file") {
+              return;
+            }
+            if (checkbox) {
+              return {
+                details: {
+                  // since we are listening to mouseup, logic is inverted
+                  name: !checkbox.checked ? "check" : "uncheck",
+                },
+                element: el,
+              };
+            }
+            return {
+              details: {
+                name: "click",
+                position: this.eventUtils.positionForEvent(event),
+                button: this.eventUtils.buttonForEvent(event),
+                modifiers: this.eventUtils.modifiersForEvent(event),
+                clickCount: event.detail,
+              },
+              element: el,
+            };
+          }
+          case "input": {
+            const target = this.eventUtils.getNearestInteractiveElement(this.eventUtils.deepEventTarget(event));
+            if (target.nodeName === "INPUT" && target.type.toLowerCase() === "file") {
+              return {
+                details: {
+                  name: "setInputFiles",
+                  files: [...(target.files || [])].map((file) => file.name),
+                },
+                element: target,
+              };
+            }
+            if (this.eventUtils.isRangeInput(target)) {
+              return {
+                details: {
+                  name: "fill",
+                  text: target.value, // should it be value or text?
+                },
+                element: target,
+              };
+            }
+            if (["INPUT", "TEXTAREA"].includes(target.nodeName) || target.isContentEditable) {
+              if (target.nodeName === "INPUT" && ["checkbox", "radio"].includes(target.type.toLowerCase())) {
+                // Checkbox is handled in click, we can't let input trigger on checkbox - that would mean we dispatched click events while recording.
+                return;
+              }
+              return {
+                details: {
+                  name: "fill",
+                  text: target.isContentEditable ? target.innerText : target.value,
+                },
+                element: target,
+              };
+            }
+            if (target.nodeName === "SELECT") {
+              const selectElement = target;
+              return {
+                details: {
+                  name: "select",
+                  options: [...selectElement.selectedOptions].map((option) => option.value),
+                },
+                element: target,
+              };
+            }
+            return;
+          }
+          case "keydown": {
+            if (!this.eventUtils.shouldGenerateKeyPressFor(event)) return;
+            // if (this._actionInProgress(event)) {
+            //   this._expectProgrammaticKeyUp = true;
+            //   return;
+            // }
+            // if (this._consumedDueWrongTarget(event)) return;
+            // Similarly to click, trigger checkbox on key event, not input.
+            if (event.key === " ") {
+              const checkbox = this.eventUtils.asCheckbox(this.eventUtils.deepEventTarget(event));
+              if (checkbox) {
+                return {
+                  details: {
+                    name: checkbox.checked ? "uncheck" : "check",
+                  },
+                  element: checkbox,
+                };
+              }
+            }
+            return {
+              details: {
+                name: "press",
+                key: event.key,
+                modifiers: this.eventUtils.modifiersForEvent(event),
+              },
+              element: this.eventUtils.deepEventTarget(event),
+            };
+          }
+        }
+      },
+      getInterestedElement: (el) => {
+        const interactiveElement = this.eventUtils.getNearestInteractiveElement(el);
+        if (interactiveElement) {
+          return interactiveElement;
+        }
+        return el;
+      },
+      hoverOutlineStyle: "2px solid red",
+    });
+
+    const RecorderStateMap = {
+      noop: noopTool,
+      idle: idleTool,
+      running: runningTool,
+      recordingText: recordingTextTool,
+      recordingContext: recordingTextTool,
+      recordingInput: recordingInputTool,
+      recordingHover: recordingHoverTool,
+      inspecting: inspectingTool,
+      multiInspecting: multiInspectingTool,
+    };
+    this.RecorderStateMap = RecorderStateMap;
+  }
+  addOverrides() {
+    // override the window.close method
+    const windowClose = window.close.bind(window);
+    window.close = async function () {
+      bvtRecorderBindings.recordPageClose();
+      windowClose();
+    };
+
+    const bvtRecorder = this;
+
+    // override the element.attachShadow method
+    const elementAttachShadow = Element.prototype.attachShadow;
+    Element.prototype.attachShadow = function (options) {
+      // bvtRecorderBindings.log(`Shadow DOM attached to ${this.tagName}`);
+      const shadowRoot = elementAttachShadow.call(this, options);
+      bvtRecorder.addHighlightListeners(shadowRoot);
+      return shadowRoot;
+    };
+  }
+  set mode(mode) {
+    const tool = this.RecorderStateMap[mode];
+    if (!tool) return;
+    if (this.cleanup) {
+      this.cleanup();
+    }
+    this.#activeTool = tool;
+    if (this.#activeTool.start) {
+      this.cleanup = this.#activeTool.start();
+    }
+    this.#mode = mode;
+  }
+
+  get mode() {
+    return this.#mode;
+  }
+
+  getFrameDetails() {
+    const details = {
+      url: window.location.href,
+      title: window.document.title,
+      isTop: window.top === window,
+      viewport: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+    };
+    return details;
+  }
+  setHighlight(element) {
+    if (element.closest("x-bvt-toolbar")) return;
+    const interestedElement = this.#activeTool.getInterestedElement(element);
+    if (!interestedElement) return;
+    this.activeElement = interestedElement;
+    if (interestedElement[this.#outlineSymbol] !== undefined) return;
+    interestedElement[this.#outlineSymbol] = interestedElement.style.outline;
+    interestedElement.style.outline = this.#activeTool.hoverOutlineStyle;
+    if (interestedElement.styleUpdateFn) {
+      interestedElement.styleUpdateFn(interestedElement);
+    }
+  }
+  resetHighlight(element) {
+    if (!element) return;
+    const interestedElement = this.#activeTool.getInterestedElement(element);
+    if (!interestedElement) return;
+    if (interestedElement[this.#outlineSymbol] === undefined) return;
+    interestedElement.style.outline = interestedElement[this.#outlineSymbol];
+    interestedElement[this.#outlineSymbol] = undefined;
+    if (interestedElement.styleUpdateFn) {
+      interestedElement.styleUpdateFn(interestedElement);
+    }
+  }
+  addHighlightListeners(root) {
+    root.addEventListener("mouseover", (event) => {
+      if (this.debugMouseOver) {
+        debugger;
+      }
+      const target = this.eventUtils.deepEventTarget(event);
+      this.setHighlight(target);
+    });
+    root.addEventListener("mouseout", (event) => {
+      if (this.debugMouseOut) {
+        debugger;
+      }
+      const target = this.eventUtils.deepEventTarget(event);
+      this.resetHighlight(target);
+    });
+    root.addEventListener("focusin", (event) => {
+      if (this.debugFocusIn) {
+        debugger;
+      }
+      const target = this.eventUtils.deepEventTarget(event);
+      this.setHighlight(target);
+    });
+    root.addEventListener("focusout", (event) => {
+      if (this.debugFocusOut) {
+        debugger;
+      }
+      const target = this.eventUtils.deepEventTarget(event);
+      this.resetHighlight(target);
+    });
+  }
+  addToolbar() {
+    if (window.top !== window) return;
+    const toolbar = document.createElement("x-bvt-toolbar");
+    toolbar.id = "bvt-toolbar";
+    this.toolbar = toolbar;
+    document.body.appendChild(toolbar);
+  }
+
+  handleStateTransition(element) {
+    if (this.#mode === "recordingContext") {
+      this.contextElement = element;
+      bvtRecorderBindings.revertMode();
+      return;
+    }
+    if (this.#mode === "recordingHover") {
+      bvtRecorderBindings.revertMode();
+    }
+    this.contextElement = null;
+  }
+  getElementProperties(element) {
+    if (!element || !(element instanceof HTMLElement || element instanceof SVGElement)) {
+      throw new Error("Please provide a valid HTML element");
+    }
+
+    const result = {
+      properties: {},
+      attributes: {},
+      dataset: {},
+    };
+
+    const unsortedProperties = {};
+    const unsortedAttributes = {};
+    const unsortedDataset = {};
+
+    // Get enumerable properties
+    for (const prop in element) {
+      try {
+        const value = element[prop];
+        if (
+          typeof value !== "function" &&
+          typeof value !== "object" &&
+          value !== null &&
+          value !== undefined &&
+          !prop.includes("_")
+        ) {
+          unsortedProperties[prop] = value;
+        }
+      } catch (error) {
+        unsortedProperties[prop] = "[Error accessing property]";
+      }
+    }
+
+    // Get all attributes
+    if (element.attributes) {
+      for (const attr of element.attributes) {
+        if (attr.name === "data-input-id") continue; // skip input id attribute
+        if (attr.name === "data-blinq-id") continue; // skip blinq id attribute{
+        unsortedAttributes[attr.name] = attr.value;
+      }
+    }
+
+    // Get dataset properties (data-* attributes)
+    if (element.dataset) {
+      for (const [key, value] of Object.entries(element.dataset)) {
+        if (key === "inputId") continue; // skip input id dataset property
+        if (key === "blinqId") continue; // skip blinq id dataset property
+        unsortedDataset[key] = value;
+      }
+    }
+
+    // Sort each object by key
+    const sortByKey = (obj) => Object.fromEntries(Object.entries(obj).sort(([a], [b]) => a.localeCompare(b)));
+
+    result.properties = sortByKey(unsortedProperties);
+    result.attributes = sortByKey(unsortedAttributes);
+    result.dataset = sortByKey(unsortedDataset);
+
+    return result;
+  }
+  getElementDetails(el, type) {
+    if (lastInputId !== el.dataset.inputId || type !== "input") {
+      el.dataset.inputId = getNextInputId();
+      // if (lastInputId !== el.dataset.inputId) {
+
+      // el[locatorsSymbol] = locators;
+      // }
+
+      lastInputId = el.dataset.inputId;
+
+      el.__locators = this.getLocatorsObject(el);
+    }
+    const role = this.PW.roleUtils.getAriaRole(el);
+    const label =
+      this.PW.roleUtils.getElementAccessibleName(el, false) ||
+      this.PW.roleUtils.getElementAccessibleName(el, true) ||
+      "";
+    const result = this.getElementProperties(el);
+    return {
+      role,
+      label,
+      inputID: el.dataset.inputId,
+      tagName: el.tagName,
+      type: el.type,
+      text: this.PW.selectorUtils.elementText(new Map(), el).full.trim(),
+      parent: `tagname: ${el.parentElement?.tagName}\ninnerText: ${el.parentElement?.innerText}`,
+      attrs: {
+        placeholder: el.getAttribute("placeholder"),
+        src: el.getAttribute("src"),
+        href: el.getAttribute("href"),
+        alt: el.getAttribute("alt"),
+        value: el.value,
+        tagName: el.tagName,
+        text: el.textContent,
+        type: el.type, // el.getAttribute("type"),
+        disabled: el.disabled,
+        readOnly: el.readOnly,
+        required: el.required,
+        checked: el.checked,
+        innerText: el.innerText,
+      },
+      attributes: result.attributes,
+      properties: result.properties,
+      dataset: result.dataset,
+    };
+  }
+  handleEvent(e) {
+    if (!this.toolbar) return true;
+    const target = this.eventUtils.deepEventTarget(e);
+    switch (e.type) {
+      case "pointerdown": {
+        const tool = target.closest("x-bvt-tool");
+        if (tool?.name === "drag") {
+          this.rect = this.toolbar.getBoundingClientRect();
+          this.offsetX = e.clientX - this.rect.left;
+          this.offsetY = e.clientY - this.rect.top;
+          this.#isDraggingToolbar = true;
+          return false;
+        }
+        if (tool) {
+          return false;
+        }
+        break;
+      }
+      case "pointerup": {
+        if (this.#isDraggingToolbar) {
+          this.#isDraggingToolbar = false;
+          return false;
+        }
+        break;
+      }
+      case "mousemove": {
+        if (this.#isDraggingToolbar) {
+          const left = e.clientX - this.offsetX;
+          const top = e.clientY - this.offsetY;
+          if (
+            left < 0 ||
+            top < 0 ||
+            left + this.rect.width > window.innerWidth ||
+            top + this.rect.height > window.innerHeight
+          ) {
+            return;
+          }
+          this.toolbar.style.left = `${left}px`;
+          return false;
+        }
+        break;
+      }
+      case "click": {
+        const tool = target.closest("x-bvt-tool");
+        if (tool?.name === "hover") {
+          if (tool.selected) {
+            bvtRecorderBindings.revertMode();
+          } else {
+            bvtRecorderBindings.setMode("recordingHover");
+          }
+          return false;
+        }
+        break;
+      }
+    }
+    return true;
+  }
+  isPopupCloseEvent(e) {
+    const type = e.type;
+    const isPointerDown = type === "pointerdown";
+    const enterKeyDown = type === "keydown" && e.key === "Enter";
+    if (!isPointerDown && !enterKeyDown) return false;
+
+    const el = this.eventUtils.deepEventTarget(e);
+
+    return this.popupHandlers.some((handler) => {
+      const popupTitleSelector = handler.locator.css;
+      const closeBtnSelector = handler.close_dialog_locator.css;
+      const cookieTitleEl = document.querySelector(popupTitleSelector);
+      if (!cookieTitleEl) return false;
+      const style = window.getComputedStyle(cookieTitleEl);
+      if (style.display === "none" || style.visibility === "hidden") return false;
+      return el.matches(closeBtnSelector);
+    });
+  }
+
+  getLocatorsObject(el) {
+    if (this.contextElement) {
+      const text = this.contextElement.innerText; // TODO: handle case where contextElement is not in dom/ children removed
+      const contextEl = this.contextElement;
+      // const { climb, commonParent } = window.getCommonParent(contextEl, el);
+      const commonParent = this.locatorGenerator.dom_Parent.findLowestCommonAncestor([contextEl, el]);
+      const climb = this.locatorGenerator.dom_Parent.getClimbCountToParent(contextEl, commonParent);
+      const result = this.locatorGenerator.getElementLocators(el, {
+        excludeText: true,
+        root: commonParent,
+      });
+      result.locators.forEach((locator) => {
+        locator.text = text;
+        locator.climb = climb;
+      });
+      return result;
+    }
+    const isRecordingText = this.#mode === "recordingText";
+    return this.locatorGenerator.getElementLocators(el, {
+      excludeText: isRecordingText,
+    });
+  }
+  addListeners() {
+    const interestedEvents = ["input", "keydown", "click", "pointerdown", "pointerup", "mousemove"];
+    interestedEvents.forEach((eventName) => {
+      window.addEventListener(
+        eventName,
+        async (e) => {
+          if (this.debugListener) {
+            debugger;
+          }
+          performance.mark("command-received");
+          const shouldContinue = this.handleEvent(e);
+          if (!shouldContinue) return;
+          const action = this.#activeTool.getAction(e);
+          if (!action) return;
+          const actionElement = action.element;
+          // const element = this.getElementDetails(actionElement);
+          // const locators = this.getElementLocators(actionElement);
+          // const element = new BVTElement(actionElement, this.contextElement);
+
+          const prevActiveElement = document.querySelector(`[data-blinq-id]`);
+          if (prevActiveElement) {
+            prevActiveElement.removeAttribute("data-blinq-id");
+          }
+          actionElement.setAttribute("data-blinq-id", getNextInputId());
+
+          const prevContextElement = document.querySelector(`[data-blinq-context-id]`);
+          if (prevContextElement) {
+            prevContextElement.removeAttribute("data-blinq-context-id");
+          }
+          if (this.contextElement) {
+            this.contextElement.setAttribute("data-blinq-context-id", getNextInputId());
+          }
+
+          performance.mark("command-send");
+          const cmd = {
+            mode: this.#mode,
+            action: action.details,
+            element: this.getElementDetails(actionElement, eventName),
+            isPopupCloseClick: this.isPopupCloseEvent(e),
+            // ...this.getLocatorsObject(actionElement),
+            ...(actionElement.__locators ?? this.getLocatorsObject(actionElement)),
+            frame: this.getFrameDetails(),
+            statistics: {
+              time: `${performance.measure("command-received", "command-send").duration.toFixed(2)} ms`,
+            },
+          };
+          const snapshotDetails = {
+            id: actionElement.getAttribute("data-blinq-id"),
+            contextId: this.contextElement?.getAttribute("data-blinq-context-id"),
+            doc: this.snapshotCapturer.createSnapshot({
+              excludeSelectors: ["x-bvt-toolbar", "script", "style", "link[rel=stylesheet]"],
+            }),
+          };
+          cmd.snapshotDetails = snapshotDetails;
+          // eventQueue.enqueue(async () => {
+          // await bvtRecorderBindings.validateLocators(snapshotDetails);
+          // });
+          // console.log(cmd);
+          await bvtRecorderBindings.recordCommand(cmd);
+          this.handleStateTransition(action.element);
+        },
+        { capture: true }
+      );
+    });
+  }
+
+  // TODO: implement the corresponding logic for the below methods
+  setPopupHandlers(_popopHandlers) {
+    this.popupHandlers = _popopHandlers;
+  }
+  setDisableHighlight(disableHighlight) {
+    this.disableHighlight = disableHighlight;
+  }
+  setImproviseLocators(improviseLocators) {
+    this.improviseLocators = improviseLocators;
+  }
+  deselectAriaElements() {
+    for (const el of this.interestedElements.keys()) {
+      el.style.background = el.__originalBackground;
+      delete el.__originalBackground;
+    }
+    this.interestedElements.clear();
+  }
+  processAriaSnapshot(snapshot) {
+    const matchedElements = this.findMatchingElements(snapshot, this.snapshotElements);
+    for (const el of matchedElements.values()) {
+      const element = el;
+      if (element) {
+        element.__originalOutline = element.style.outline;
+        element.style.outline = "2px solid blue";
+        setTimeout(() => {
+          element.style.outline = element.__originalOutline;
+          delete element.__originalOutline;
+        }, 2000);
+      }
+    }
+  }
+  setTestAttributes(attributes) {
+    this.locatorGenerator.options.customAttributes = attributes;
+  }
+}
+
+window.__bvt_Recorder = new BVTRecorder(window.__bvt_Recorder_config);
+
+class BVTTool extends HTMLElement {
+  #selected = false;
+  tooltipText = null;
+  #tooltip = null;
+  #isInitialized = false;
+
+  constructor(name, tooltipText) {
+    // Always call super first in constructor
+    super();
+  }
+  connectedCallback() {
+    if (this.#isInitialized) return;
+    this.init();
+    this.addEventListener("mouseenter", this.showTooltip);
+    this.addEventListener("mouseleave", this.hideTooltip);
+    this.#isInitialized = true;
+  }
+  init() {
+    this.setAttribute("role", "button");
+    this.style.cssText = `
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: rgba(8, 8, 8, 1);
+    outline: none;
+    width:32px;
+    border-radius:8px;
+    gap:8px;
+    padding:4px 0px 4px 0px;
+    transistion: background-color 0.47s ease, color 0.24s ease;
+    `;
+  }
+  get selected() {
+    return this.#selected;
+  }
+  set selected(value) {
+    this.#selected = value;
+    if (value) {
+      this.style.backgroundColor = "#093DB0"; // blue bg
+      this.style.color = "white";
+    } else {
+      this.style.backgroundColor = "#eee";
+      this.style.color = "rgba(8, 8, 8, 1)";
+    }
+  }
+  showTooltip(event) {
+    if (!this.#tooltip) {
+      this.#tooltip = document.createElement("div");
+      this.#tooltip.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      opacity: 0;
+      // transform: translate(-50%, -100%);
+      transition: opacity 0.2s ease;
+      z-index: 2147483648;
+
+      display: inline-flex;
+      padding: var(--border-radius-radius-md, 8px) var(--spacing-spacing-sm, 12px);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--border-radius-radius-lg, 16px);
+
+      border-radius: var(--border-radius-radius-pre-lg, 12px);
+      background: var(--surface-surface-dark, #080808);
+
+      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+      color: var(--text-white, #FFF);
+
+      /* Text sm/Medium */
+      font-family: "Verdana";
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: -0.084px;
+    `;
+      this.#tooltip.textContent = this.tooltipText ?? "";
+      document.body.appendChild(this.#tooltip);
+    }
+
+    const rect = this.getBoundingClientRect();
+    const tooltip = this.#tooltip;
+
+    tooltip.style.opacity = "0"; // hide before measuring
+    tooltip.style.left = "0px"; // reset for accurate width calc
+    tooltip.style.top = "0px";
+    tooltip.style.transform = "none"; // remove old transform
+
+    // Allow DOM to render
+    requestAnimationFrame(() => {
+      const tooltipWidth = tooltip.offsetWidth;
+      const margin = 8;
+      let left = rect.left + rect.width / 2 - tooltipWidth / 2;
+
+      // Clamp to viewport
+      if (left < margin) left = margin;
+      if (left + tooltipWidth > window.innerWidth - margin) {
+        left = window.innerWidth - margin - tooltipWidth;
+      }
+
+      tooltip.style.left = `${left}px`;
+      tooltip.style.top = `${rect.bottom + 20}px`;
+      tooltip.style.opacity = "1";
+    });
+  }
+  hideTooltip() {
+    if (this.#tooltip) {
+      this.#tooltip.style.opacity = "0";
+      setTimeout(() => {
+        if (this.#tooltip) {
+          document.body.removeChild(this.#tooltip);
+          this.#tooltip = null;
+        }
+      }, 200);
+    }
+  }
+
+  // Commented out to avoid tooltip position update on mouse move
+  // updateTooltipPosition() {
+  //   if (this.#tooltip) {
+  //     const rect = this.getBoundingClientRect();
+  //     const tooltipRect = this.#tooltip.getBoundingClientRect();
+  //     this.#tooltip.style.left = `${rect.left + rect.width / 2}px`;
+  //     this.#tooltip.style.top = `${rect.top - tooltipRect.height - 8}px`; // 8px gap above button
+  //   }
+  // }
+
+  reset() {
+    this.selected = false;
+  }
+}
+
+class BVTToolBar extends HTMLElement {
+  #isInitialized = false;
+  constructor() {
+    // Always call super first in constructor
+    super();
+  }
+  connectedCallback() {
+    if (this.#isInitialized) return;
+    this.init();
+    this.#isInitialized = true;
+  }
+
+  show() {
+    // this.style.display = "flex";
+    this.style.transform = "translateY(0)";
+  }
+  hide() {
+    // this.style.display = "none";
+    this.style.transform = "translateY(-200%)";
+  }
+  getDragHandler() {
+    // const dragHandler = new BVTTool("drag", "Hold and drag to reposition this toolbar");
+    const dragHandler = document.createElement("x-bvt-tool");
+    dragHandler.name = "drag";
+    dragHandler.tooltipText = "Hold and drag to reposition this toolbar";
+
+    dragHandler.style.cursor = "move";
+    dragHandler.innerHTML = `<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8.625 7.125a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM15.375 7.125a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM8.625 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM15.375 13.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM8.625 19.875a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM15.375 19.875a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" fill="#080808" style="fill: #080808;"/>
+    </svg>`;
+
+    dragHandler.addEventListener("mousedown", (event) => {
+      event.preventDefault(); // Prevent text selection
+
+      if (dragHandler.hideTooltip) {
+        dragHandler.hideTooltip(); // Hide tooltip while dragging
+      }
+
+      document.body.style.userSelect = "none";
+      // 	const toolbar = this;
+      // 	const rect = toolbar.getBoundingClientRect();
+      // 	const offsetX = event.clientX - rect.left;
+      // 	const offsetY = event.clientY - rect.top;
+
+      // 	const moveHandler = (event) => {
+      // 		const left = event.clientX - offsetX;
+      // 		const top = event.clientY - offsetY;
+      // 		if (left < 0 || top < 0 || left + rect.width > window.innerWidth || top + rect.height > window.innerHeight) {
+      // 			return;
+      // 		}
+      // 		toolbar.style.left = `${left}px`;
+      // 		toolbar.style.top = `${top}px`;
+      // 	};
+
+      // 	const upHandler = () => {
+      // 		document.removeEventListener("mousemove", moveHandler);
+      // 		document.removeEventListener("mouseup", upHandler);
+      // 	};
+
+      // 	document.addEventListener("mousemove", moveHandler);
+      // 	document.addEventListener("mouseup", upHandler);
+    });
+    return dragHandler;
+  }
+  getHoverTool() {
+    // const hoverTool = new BVTTool("hover", "Record hover over an element");
+    const hoverTool = document.createElement("x-bvt-tool");
+    hoverTool.name = "hover";
+    hoverTool.tooltipText = "Record hover over an element";
+    hoverTool.innerHTML = `<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M13.999 17.175l-3.452.774a.391.391 0 00-.245.172l-1.664 2.6c-.809 1.265-2.743.924-3.072-.541L3.71 10.963C3.38 9.493 4.99 8.36 6.263 9.167l8.271 4.933c1.27.805.933 2.746-.535 3.075z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke: currentColor; fill: none;" /><rect x="11" y="3" width="12" height="2" rx="1" fill="currentColor" style="fill: currentColor;"/><rect x="11" y="7" width="9" height="2" rx="1" fill="currentColor" style="fill: currentColor;"/><rect x="11" y="11" width="12" height="2" rx="1" fill="currentColor" style="fill: currentColor;"/><circle cx="9" cy="4" r="1" fill="currentColor" style="fill: currentColor;"/><circle cx="9" cy="8" r="1" fill="currentColor" style="fill: currentColor;"/></svg>`;
+    // hoverTool.addEventListener("click", this.onHoverMode);
+    return hoverTool;
+  }
+  init() {
+    this.style.cssText = `
+    position: fixed;
+    width: fit-content;
+    top: 8px;
+    left: calc(50vw - 36px);
+    z-index: 2147483647;
+    display: flex;
+    gap: 8px;
+    background-color: rgba(241, 241, 241, 0.95);
+    padding: 8px;
+    border-radius: 12px;
+    transistion: transform 0.47s ease;
+  `;
+    this.dragTool = this.getDragHandler();
+    this.hoverTool = this.getHoverTool();
+    this.append(this.dragTool, this.hoverTool);
+  }
+}
+
+customElements.define("x-bvt-tool", BVTTool);
+customElements.define("x-bvt-toolbar", BVTToolBar);