@empiricalrun/test-gen 0.38.4 → 0.38.6

package/dist/browser-injected-scripts/annotate-elements.js

@@ -9,28 +9,20 @@
  * @param {string} options.markerClass - CSS class to apply to hint markers.
  * @returns {Object} An object containing annotations map and enable/disable methods.
  */
-window.annotateClickableElements = function annotateClickableElements(
-  options = {},
-) {
+function annotateClickableElements(options = {}) {
   const {
     hintCharacterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", // Default set of characters for hints
     maxHints = 1000, // Maximum number of hints to generate
     markerClass = "hint-marker", // CSS class for markers
   } = options;
 
+  const document = window.document;
   const annotationsMap = {};
+  const usedHints = new Set();
   let annotationsContainer = null;
 
-  /**
-   * Checks if the provided DOM element is clickable by ensuring that
-   * no other elements are covering it, regardless of its current
-   * viewport visibility.
-   *
-   * @param {Element} element - The DOM element to check.
-   * @returns {boolean} - Returns true if the element is clickable; otherwise, false.
-   */
-
-  function isElementClickNotBlocked(element) {
+  // Check if the element is not blocked and visible for clicking
+  function isElementClickNotBlocked(element, windowToAnnotate) {
     const rect = element.getBoundingClientRect();
 
     // Calculate the center point of the element
@@ -41,21 +33,21 @@ window.annotateClickableElements = function annotateClickableElements(
     if (
       centerX < 0 ||
       centerY < 0 ||
-      centerX > (window.innerWidth || document.documentElement.clientWidth) ||
-      centerY > (window.innerHeight || document.documentElement.clientHeight)
+      centerX > (windowToAnnotate.innerWidth || document.documentElement.clientWidth) ||
+      centerY > (windowToAnnotate.innerHeight || document.documentElement.clientHeight)
     ) {
       // Determine the viewport dimensions
       const viewportWidth =
-        window.innerWidth || document.documentElement.clientWidth;
+      windowToAnnotate.innerWidth || document.documentElement.clientWidth;
       const viewportHeight =
-        window.innerHeight || document.documentElement.clientHeight;
+      windowToAnnotate.innerHeight || document.documentElement.clientHeight;
 
       // Calculate the new scroll positions to bring the element into the center of the viewport
       const newScrollX = centerX - viewportWidth / 2;
       const newScrollY = centerY - viewportHeight / 2;
 
       // Scroll the window to the new positions
-      window.scrollTo({
+      windowToAnnotate.scrollTo({
         top: newScrollY,
         left: newScrollX,
       });
@@ -67,20 +59,12 @@ window.annotateClickableElements = function annotateClickableElements(
       return element.contains(topElement);
     }
 
-    // Retrieve the topmost element at the center point
-    const topElement = document.elementFromPoint(centerX, centerY);
+    const topElement = windowToAnnotate.document.elementFromPoint(centerX, centerY);
 
     // Check if the topmost element is the target element or one of its descendants
     return element.contains(topElement);
   }
 
-  /**
-   * Generates a sequence of hint strings based on the provided character set.
-   * For example, with 'abc' as the set and maxHints 5, it generates: 'a', 'b', 'c', 'aa', 'ab'
-   * @param {string} charset - Characters to use.
-   * @param {number} max - Maximum number of hints to generate.
-   * @returns {string[]} Array of hint strings.
-   */
   function generateHintStrings(charset, max) {
     const hints = [];
     let length = 1;
@@ -88,7 +72,11 @@ window.annotateClickableElements = function annotateClickableElements(
     while (hints.length < max) {
       const combos = cartesianProduct(Array(length).fill(charset.split("")));
       for (const combo of combos) {
-        hints.push(combo.join(""));
+        const hint = combo.join("");
+        if (!usedHints.has(hint)) {
+          hints.push(hint);
+          usedHints.add(hint);
+        }
         if (hints.length >= max) break;
       }
       length++;
@@ -97,29 +85,19 @@ window.annotateClickableElements = function annotateClickableElements(
     return hints;
   }
 
-  /**
-   * Creates a Cartesian product of arrays.
-   * @param {Array<Array>} arrays - Array of arrays for Cartesian product.
-   * @returns {Array<Array>} Cartesian product.
-   */
   function cartesianProduct(arrays) {
     return arrays.reduce(
       (acc, curr) =>
         acc
           .map((a) => curr.map((b) => a.concat([b])))
           .reduce((a, b) => a.concat(b), []),
-      [[]],
+      [[]]
     );
   }
 
-  /**
-   * Checks if an element is visible and interactable.
-   * Enhanced version inspired by getLocalHintsForElement.
-   * @param {Element} element - DOM element.
-   * @returns {boolean} True if the element is clickable and visible.
-   */
+  // Check if an element is clickable
   function isElementClickable(element) {
-    if (!(element instanceof Element)) return false;
+    // if (!(element instanceof Element)) return false;
 
     const tagName = element.tagName.toLowerCase();
     let isClickable = false;
@@ -311,11 +289,6 @@ window.annotateClickableElements = function annotateClickableElements(
     return isClickable;
   }
 
-  /**
-   * Helper function to determine if an input is selectable (e.g., text, search).
-   * @param {Element} input - The input element.
-   * @returns {boolean} True if the input type is selectable.
-   */
   function isInputSelectable(input) {
     const selectableTypes = [
       "text",
@@ -330,68 +303,23 @@ window.annotateClickableElements = function annotateClickableElements(
     return selectableTypes.includes(type);
   }
 
-  /**
-   * Generates a unique CSS selector path for a given element.
-   * @param {Element} element - The DOM element.
-   * @returns {string} A unique CSS selector string.
-   */
-  function getUniqueSelector(element) {
-    if (element.id) {
-      return `#${CSS.escape(element.id)}`;
-    }
-
-    const parts = [];
-    while (element && element.nodeType === Node.ELEMENT_NODE) {
-      let part = element.nodeName.toLowerCase();
-
-      // Use classList instead of className to avoid errors
-      if (element.classList && element.classList.length > 0) {
-        const classes = Array.from(element.classList)
-          .filter((cls) => cls.length > 0)
-          .map((cls) => `.${CSS.escape(cls)}`)
-          .join("");
-        part += classes;
-      }
-
-      // Add nth-child if necessary
-      const parent = element.parentNode;
-      if (parent) {
-        const siblings = Array.from(parent.children).filter(
-          (sibling) => sibling.nodeName === element.nodeName,
-        );
-        if (siblings.length > 1) {
-          const index =
-            Array.prototype.indexOf.call(parent.children, element) + 1;
-          part += `:nth-child(${index})`;
-        }
-      }
-
-      parts.unshift(part);
-      element = element.parentElement;
-    }
-
-    return parts.join(" > ");
-  }
+  var parentElements = [];
 
-  /**
-   * Creates a hint marker element positioned at the top-left of the target element.
-   * @param {Element} el - The clickable DOM element.
-   * @param {string} hint - The hint identifier.
-   * @param {string} nodePath - Unique CSS selector path for the element.
-   * @returns {HTMLElement} The created hint marker element.
-   */
-  function createHintMarker(el, hint) {
+  // Create a hint marker
+  function createHintMarker(el, hint, parentElement) {
     const rect = el.getBoundingClientRect();
-
+    const parentRect = parentElement.getBoundingClientRect();
+    
+    // Create the marker element
     const marker = document.createElement("div");
     marker.textContent = hint;
     marker.className = markerClass;
-
+  
     // Style the marker
     Object.assign(marker.style, {
       position: "absolute",
-      top: `${rect.top + window.scrollY}px`,
-      left: `${rect.left + window.scrollX}px`,
+      top: `${rect.top + parentRect.top}px`,
+      left: `${rect.left + parentRect.left}px`,
       background:
         "-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)))",
       padding: "1px 3px 0px",
@@ -411,116 +339,570 @@ window.annotateClickableElements = function annotateClickableElements(
       fontWeight: "bold",
       textShadow: "rgba(255, 255, 255, 0.6) 0px 1px 0px",
     });
-
-    annotationsContainer.appendChild(marker);
-
+  
+    // Attach the marker to the specified parent element
+    parentElement.appendChild(marker);
+    parentElements.push(parentElement);
     return marker;
   }
+  
 
-  /**
-   * Clears all existing hint markers from the annotations container.
-   */
+  // Clear existing annotations
+  //TODO: Handle clearing annotations
   function clearAnnotations() {
+    parentElements.forEach((parentElement) => {
+      const markers = parentElement.querySelectorAll(`.${markerClass}`);
+      markers.forEach((marker) => marker.remove());
+    });
+    parentElements = [];
+  }
+
+  // Initialize annotations for a given window (including iframes)
+  function initializeAnnotations(windowToAnnotate, parentHints, depth) {
+    const container =
+    parentHints?.nodeName === "IFRAME"
+      ? parentHints.contentWindow.document.body
+      : annotationsContainer;
+
+    // Ensure the container exists
+    if (!container) return;
+  
+    // Filter for clickable elements
+    const clickableElements = Array.from(windowToAnnotate.document.querySelectorAll("*")).filter((el) => {
+      return isElementClickable(el) && isElementClickNotBlocked(el, windowToAnnotate);
+    });  
+    // Generate hint strings for the clickable elements
+    const hints = generateHintStrings(hintCharacterSet, Math.min(maxHints, clickableElements.length));
+  
+    // Create markers for the elements
+    clickableElements.slice(0, maxHints).forEach((el, index) => {
+      const hint = hints[index];
+      const rect = el.getBoundingClientRect();
+  
+      // Use createHintMarker with the specified container
+      createHintMarker(el, hint, container);
+      el.style.boxShadow = `inset 0 0 0px 2px red`;
+
+      // Add element details to the annotations map
+      annotationsMap[hint] = {
+        node: el,
+        rect: {
+          top: rect.top + windowToAnnotate.scrollY,
+          left: rect.left + windowToAnnotate.scrollX,
+          width: rect.width,
+          height: rect.height,
+        },
+        depth: [...depth ]
+      };
+    });
+  
+    // Process iframes recursively
+    Array.from(windowToAnnotate.document.querySelectorAll("iframe")).forEach((iframe) => {
+      try {
+        const frameWindow = iframe.contentWindow;
+        if (frameWindow && iframe.offsetWidth > 0 && iframe.offsetHeight > 0) {
+          initializeAnnotations(frameWindow, iframe,  [...depth, iframe]);
+        }
+      } catch (e) {
+        console.warn("Cannot access iframe:", e);
+      }
+    });
+  }
+  
+
+  // Initialize and enable annotations
+  function enable() {
+    clearAnnotations();
+    if (!annotationsContainer) {
+      annotationsContainer = document.createElement("div");
+      annotationsContainer.className = "annotations";
+      Object.assign(annotationsContainer.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: "9999",
+      });
+      document.body.appendChild(annotationsContainer);
+      initializeAnnotations(window, null, []);
+    } else {
+      annotationsContainer.style.display = "block";
+    }
+  }
+
+  // Destroy annotations
+  function destroy() {
     if (annotationsContainer) {
-      annotationsContainer.remove();
+      clearAnnotations();
+      Object.values(annotationsMap).forEach((annotation) => {
+        annotation.node.style.boxShadow = "none";
+      });
+
+      annotationsContainer.parentNode.removeChild(annotationsContainer);
       annotationsContainer = null;
     }
   }
 
-  /**
-   * Initializes the annotations by creating the container and adding markers.
-   */
-  function initializeAnnotations() {
-    clearAnnotations(); // Clear any existing annotations
+  enable();
 
-    annotationsContainer = document.createElement("div");
-    annotationsContainer.className = "annotations";
-    // Ensure the container covers the entire page
-    Object.assign(annotationsContainer.style, {
-      position: "absolute",
-      top: "0",
-      left: "0",
-      width: "100%",
-      height: "100%",
-      pointerEvents: "none", // Allow clicks to pass through
-      zIndex: "9999", // Ensure it's above other elements
-    });
-    document.body.appendChild(annotationsContainer);
+  return {
+    annotations: annotationsMap,
+    destroy,
+  };
+}
+/* eslint-disable no-undef */
+/**
+ * Annotates all clickable elements on the page with unique hint markers.
+ * Returns an object containing annotations and methods to enable/disable them.
+ *
+ * @param {Object} options - Configuration options for hint markers.
+ * @param {string} options.hintCharacterSet - Characters to use for generating hint identifiers.
+ * @param {number} options.maxHints - Maximum number of hints to generate.
+ * @param {string} options.markerClass - CSS class to apply to hint markers.
+ * @returns {Object} An object containing annotations map and enable/disable methods.
+ */
+function annotateClickableElements(options = {}) {
+  const {
+    hintCharacterSet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ", // Default set of characters for hints
+    maxHints = 1000, // Maximum number of hints to generate
+    markerClass = "hint-marker", // CSS class for markers
+  } = options;
 
-    const clickableElements = Array.from(document.querySelectorAll("*")).filter(
-      (el) => {
-        const isClickable = isElementClickable(el);
+  const document = window.document;
+  const annotationsMap = {};
+  const usedHints = new Set();
+  let annotationsContainer = null;
 
-        const originalScrollX = window.scrollX;
-        const originalScrollY = window.scrollY;
+  // Check if the element is not blocked and visible for clicking
+  function isElementClickNotBlocked(element, windowToAnnotate) {
+    const rect = element.getBoundingClientRect();
 
-        const isClickNotBlocked = isElementClickNotBlocked(el);
-        // Restore the original scroll positions
-        window.scrollTo(originalScrollX, originalScrollY);
+    // Calculate the center point of the element
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
 
-        return isClickable && isClickNotBlocked;
-      },
-    );
-    const hints = generateHintStrings(
-      hintCharacterSet,
-      Math.min(maxHints, clickableElements.length),
+    // check if element is within the viewport
+    if (
+      centerX < 0 ||
+      centerY < 0 ||
+      centerX > (windowToAnnotate.innerWidth || document.documentElement.clientWidth) ||
+      centerY > (windowToAnnotate.innerHeight || document.documentElement.clientHeight)
+    ) {
+      // Determine the viewport dimensions
+      const viewportWidth =
+      windowToAnnotate.innerWidth || document.documentElement.clientWidth;
+      const viewportHeight =
+      windowToAnnotate.innerHeight || document.documentElement.clientHeight;
+
+      // Calculate the new scroll positions to bring the element into the center of the viewport
+      const newScrollX = centerX - viewportWidth / 2;
+      const newScrollY = centerY - viewportHeight / 2;
+
+      // Scroll the window to the new positions
+      windowToAnnotate.scrollTo({
+        top: newScrollY,
+        left: newScrollX,
+      });
+
+      const newRect = element.getBoundingClientRect();
+      const newCenterX = newRect.left + newRect.width / 2;
+      const newCenterY = newRect.top + newRect.height / 2;
+      const topElement = document.elementFromPoint(newCenterX, newCenterY);
+      return element.contains(topElement);
+    }
+
+    const topElement = windowToAnnotate.document.elementFromPoint(centerX, centerY);
+
+    // Check if the topmost element is the target element or one of its descendants
+    return element.contains(topElement);
+  }
+
+  function generateHintStrings(charset, max) {
+    const hints = [];
+    let length = 1;
+
+    while (hints.length < max) {
+      const combos = cartesianProduct(Array(length).fill(charset.split("")));
+      for (const combo of combos) {
+        const hint = combo.join("");
+        if (!usedHints.has(hint)) {
+          hints.push(hint);
+          usedHints.add(hint);
+        }
+        if (hints.length >= max) break;
+      }
+      length++;
+    }
+
+    return hints;
+  }
+
+  function cartesianProduct(arrays) {
+    return arrays.reduce(
+      (acc, curr) =>
+        acc
+          .map((a) => curr.map((b) => a.concat([b])))
+          .reduce((a, b) => a.concat(b), []),
+      [[]]
     );
+  }
+
+  // Check if an element is clickable
+  function isElementClickable(element) {
+    // if (!(element instanceof Element)) return false;
+
+    const tagName = element.tagName.toLowerCase();
+    let isClickable = false;
+
+    // Check for aria-disabled
+    const ariaDisabled = element.getAttribute("aria-disabled");
+    if (ariaDisabled && ["", "true"].includes(ariaDisabled.toLowerCase())) {
+      return false; // Element should not be clickable if aria-disabled is true
+    }
+
+    // Check for visibility
+    const style = window.getComputedStyle(element);
+    if (
+      style.display === "none" ||
+      style.visibility === "hidden" ||
+      // This is done for cases where opacity is undefined
+      // parseFloat(style.opacity) === 0 
+      style.pointerEvents === "none"
+    ) {
+      return false;
+    }
+
+    // Check if element is disabled (for applicable elements)
+    if (element.disabled) return false;
+
+    // Check for AngularJS click handlers
+    if (!isElementClickable._checkForAngularJs) {
+      isElementClickable._checkForAngularJs = (function () {
+        const angularElements = document.getElementsByClassName("ng-scope");
+        if (angularElements.length === 0) {
+          return () => false;
+        } else {
+          const ngAttributes = [];
+          for (const prefix of ["", "data-", "x-"]) {
+            for (const separator of ["-", ":", "_"]) {
+              ngAttributes.push(`${prefix}ng${separator}click`);
+            }
+          }
+          return function (el) {
+            for (const attribute of ngAttributes) {
+              if (el.hasAttribute(attribute)) return true;
+            }
+            return false;
+          };
+        }
+      })();
+    }
+
+    if (!isClickable && isElementClickable._checkForAngularJs(element)) {
+      isClickable = true;
+    }
+
+    // Check for onclick attribute or listener
+    if (
+      element.hasAttribute("onclick") ||
+      typeof element.onclick === "function"
+    ) {
+      isClickable = true;
+    }
+
+    // Check for jsaction attribute (commonly used in frameworks like Google's)
+    if (!isClickable && element.hasAttribute("jsaction")) {
+      const jsactionRules = element.getAttribute("jsaction").split(";");
+      for (const jsactionRule of jsactionRules) {
+        const ruleSplit = jsactionRule.trim().split(":");
+        if (ruleSplit.length >= 1 && ruleSplit.length <= 2) {
+          const [eventType] = ruleSplit[0].trim().split(".");
+          if (eventType === "click") {
+            isClickable = true;
+            break;
+          }
+        }
+      }
+    }
+
+    // Check for role attributes that imply clickability
+    if (!isClickable) {
+      const role = element.getAttribute("role");
+      const clickableRoles = [
+        "button",
+        "tab",
+        "link",
+        "checkbox",
+        "menuitem",
+        "menuitemcheckbox",
+        "menuitemradio",
+        "radio",
+        "switch",
+      ];
+      if (role && clickableRoles.includes(role.toLowerCase())) {
+        isClickable = true;
+      }
+    }
+
+    // Check for contentEditable
+    if (!isClickable) {
+      const contentEditable = element.getAttribute("contentEditable");
+      if (
+        contentEditable != null &&
+        ["", "contenteditable", "true"].includes(contentEditable.toLowerCase())
+      ) {
+        isClickable = true;
+      }
+    }
+
+    // Tag-specific clickability
+    const focusableTags = [
+      "a",
+      "button",
+      "input",
+      "select",
+      "textarea",
+      "object",
+      "embed",
+      "label",
+      "details",
+    ];
+    if (focusableTags.includes(tagName)) {
+      switch (tagName) {
+        case "a":
+          // Ensure it's not just a named anchor without href
+          if (element.hasAttribute("href")) {
+            isClickable = true;
+          }
+          break;
+        case "input": {
+          const type = (element.getAttribute("type") || "").toLowerCase();
+          if (
+            type !== "hidden" &&
+            !element.disabled &&
+            !(element.readOnly && isInputSelectable(element))
+          ) {
+            isClickable = true;
+          }
+          break;
+        }
+        case "textarea":
+          if (!element.disabled && !element.readOnly) {
+            isClickable = true;
+          }
+          break;
+        case "button":
+        case "select":
+          if (!element.disabled) {
+            isClickable = true;
+          }
+          break;
+        case "object":
+        case "embed":
+          isClickable = true;
+          break;
+        case "label":
+          if (element.control && !element.control.disabled) {
+            isClickable = true;
+          }
+          break;
+        case "details":
+          isClickable = true;
+          break;
+        default:
+          break;
+      }
+    }
+
+    // Check for class names containing 'button' as a possible click target
+    if (!isClickable) {
+      const className = element.getAttribute("class");
+      if (className && className.toLowerCase().includes("button")) {
+        isClickable = true;
+      } else if (element.classList.contains("cursor-pointer")) {
+        isClickable = true;
+      } else if (element.classList.contains("v-list-item--link")) {
+        // vue specific click handling
+        isClickable = true;
+      } else if (element.style.cursor === "pointer") {
+        isClickable = true;
+      }
+    }
+
+    // Check for tabindex
+    if (!isClickable) {
+      const tabIndexValue = element.getAttribute("tabindex");
+      const tabIndex = tabIndexValue ? parseInt(tabIndexValue) : -1;
+      if (tabIndex >= 0 && !isNaN(tabIndex)) {
+        isClickable = true;
+      }
+    }
+
+    return isClickable;
+  }
 
+  function isInputSelectable(input) {
+    const selectableTypes = [
+      "text",
+      "search",
+      "password",
+      "url",
+      "email",
+      "number",
+      "tel",
+    ];
+    const type = (input.getAttribute("type") || "").toLowerCase();
+    return selectableTypes.includes(type);
+  }
+
+  var parentElements = [];
+
+  // Create a hint marker
+  function createHintMarker(el, hint, parentElement) {
+    const rect = el.getBoundingClientRect();
+    const parentRect = parentElement.getBoundingClientRect();
+    
+    // Create the marker element
+    const marker = document.createElement("div");
+    marker.textContent = hint;
+    marker.className = markerClass;
+  
+    // Style the marker
+    Object.assign(marker.style, {
+      position: "absolute",
+      top: `${rect.top + parentRect.top}px`,
+      left: `${rect.left + parentRect.left}px`,
+      background:
+        "-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)))",
+      padding: "1px 3px 0px",
+      borderRadius: "3px",
+      border: "1px solid rgb(227, 190, 35)",
+      fontSize: "11px",
+      pointerEvents: "none",
+      zIndex: "10000",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      boxShadow: "rgba(0, 0, 0, 0.3) 0px 3px 7px 0px",
+      letterSpacing: 0,
+      minHeight: 0,
+      lineHeight: "100%",
+      color: "rgb(48, 37, 5)",
+      fontFamily: "Helvetica, Arial, sans-serif",
+      fontWeight: "bold",
+      textShadow: "rgba(255, 255, 255, 0.6) 0px 1px 0px",
+    });
+  
+    // Attach the marker to the specified parent element
+    parentElement.appendChild(marker);
+    parentElements.push(parentElement);
+    return marker;
+  }
+  
+
+  // Clear existing annotations
+  //TODO: Handle clearing annotations
+  function clearAnnotations() {
+    parentElements.forEach((parentElement) => {
+      const markers = parentElement.querySelectorAll(`.${markerClass}`);
+      markers.forEach((marker) => marker.remove());
+    });
+    parentElements = [];
+  }
+
+  // Initialize annotations for a given window (including iframes)
+  function initializeAnnotations(windowToAnnotate, parentHints, depth) {
+    const container =
+    parentHints?.nodeName === "IFRAME"
+      ? parentHints.contentWindow.document.body
+      : annotationsContainer;
+
+  // Ensure the container exists
+  if (!container) return;
+  
+    // Filter for clickable elements
+    const clickableElements = Array.from(windowToAnnotate.document.querySelectorAll("*")).filter((el) => {
+      return isElementClickable(el) && isElementClickNotBlocked(el, windowToAnnotate);
+    });  
+    // Generate hint strings for the clickable elements
+    const hints = generateHintStrings(hintCharacterSet, Math.min(maxHints, clickableElements.length));
+  
+    // Create markers for the elements
     clickableElements.slice(0, maxHints).forEach((el, index) => {
       const hint = hints[index];
-      const nodePath = getUniqueSelector(el);
       const rect = el.getBoundingClientRect();
-
-      // Create the hint marker
-      createHintMarker(el, hint, nodePath);
+  
+      // Use createHintMarker with the specified container
+      createHintMarker(el, hint, container);
       el.style.boxShadow = `inset 0 0 0px 2px red`;
 
-      // Populate the annotations map
+      // Add element details to the annotations map
       annotationsMap[hint] = {
         node: el,
-        nodePath: nodePath,
         rect: {
-          top: rect.top + window.scrollY,
-          left: rect.left + window.scrollX,
+          top: rect.top + windowToAnnotate.scrollY,
+          left: rect.left + windowToAnnotate.scrollX,
           width: rect.width,
           height: rect.height,
-          right: rect.right + window.scrollX,
-          bottom: rect.bottom + window.scrollY,
         },
+        depth: [...depth ]
       };
     });
+  
+    // Process iframes recursively
+    Array.from(windowToAnnotate.document.querySelectorAll("iframe")).forEach((iframe) => {
+      try {
+        const frameWindow = iframe.contentWindow;
+        if (frameWindow && iframe.offsetWidth > 0 && iframe.offsetHeight > 0) {
+          initializeAnnotations(frameWindow, iframe,  [...depth, iframe]);
+        }
+      } catch (e) {
+        console.warn("Cannot access iframe:", e);
+      }
+    });
   }
+  
 
-  /**
-   * Enables the annotations by making the annotations container visible.
-   */
+  // Initialize and enable annotations
   function enable() {
+    clearAnnotations();
     if (!annotationsContainer) {
-      initializeAnnotations();
+      annotationsContainer = document.createElement("div");
+      annotationsContainer.className = "annotations";
+      Object.assign(annotationsContainer.style, {
+        position: "absolute",
+        top: "0",
+        left: "0",
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: "9999",
+      });
+      document.body.appendChild(annotationsContainer);
+      initializeAnnotations(window, null, []);
     } else {
       annotationsContainer.style.display = "block";
     }
   }
 
-  /**
-   * removes all generated hints from DOM
-   */
+  // Destroy annotations
   function destroy() {
     if (annotationsContainer) {
+      clearAnnotations();
       Object.values(annotationsMap).forEach((annotation) => {
         annotation.node.style.boxShadow = "none";
       });
 
       annotationsContainer.parentNode.removeChild(annotationsContainer);
+      annotationsContainer = null;
     }
   }
 
-  // Initialize annotations upon first run
   enable();
 
-  // Return the desired object
   return {
     annotations: annotationsMap,
     destroy,
   };
-};
+}