@empiricalrun/test-gen 0.38.5 → 0.38.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @empiricalrun/test-gen
 
+## 0.38.7
+
+### Patch Changes
+
+- b13b57d: fix: remove duplicate code
+
+## 0.38.6
+
+### Patch Changes
+
+- 72c09d9: feat: added support for annotations in iframe
+
 ## 0.38.5
 
 ### Patch Changes

package/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,116 @@ 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() {
-    if (annotationsContainer) {
-      annotationsContainer.remove();
-      annotationsContainer = null;
-    }
-  }
-
-  /**
-   * Initializes the annotations by creating the container and adding markers.
-   */
-  function initializeAnnotations() {
-    clearAnnotations(); // Clear any existing annotations
-
-    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
+    parentElements.forEach((parentElement) => {
+      const markers = parentElement.querySelectorAll(`.${markerClass}`);
+      markers.forEach((marker) => marker.remove());
     });
-    document.body.appendChild(annotationsContainer);
-
-    const clickableElements = Array.from(document.querySelectorAll("*")).filter(
-      (el) => {
-        const isClickable = isElementClickable(el);
-
-        const originalScrollX = window.scrollX;
-        const originalScrollY = window.scrollY;
-
-        const isClickNotBlocked = isElementClickNotBlocked(el);
-        // Restore the original scroll positions
-        window.scrollTo(originalScrollX, originalScrollY);
-
-        return isClickable && isClickNotBlocked;
-      },
-    );
-    const hints = generateHintStrings(
-      hintCharacterSet,
-      Math.min(maxHints, clickableElements.length),
-    );
+    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,
   };
-};
+}

package/browser-injected-scripts/annotate-elements.spec.ts

@@ -15,7 +15,7 @@ test("should annotate all links on empirical landing page", async ({
   });
 
   const annotations = await page.evaluate(() => {
-    const { annotations } = window.annotateClickableElements();
+    const { annotations } = annotateClickableElements();
 
     return Object.entries(annotations).map(([hint, config]) => ({
       innerText: config.node.innerText,
@@ -80,7 +80,7 @@ test("should annotate all important items on quizizz page", async ({
   });
 
   const annotations = await page.evaluate(() => {
-    const { annotations } = window.annotateClickableElements();
+    const { annotations } = annotateClickableElements();
 
     return Object.entries(annotations).map(([hint, config]) => ({
       hint,

package/dist/actions/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/actions/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,EAAE,GAAG,CAAC;QAChB,MAAM,EAAE,GAAG,CAAC;KACb;CACF;AAED,wBAAsB,oCAAoC,CACxD,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,IAAI,EACV,iBAAiB,CAAC,EAAE,MAAM,gBAoF3B;AAED,wBAAgB,cAAc,WAG7B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/actions/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,UAAU,EAAE,GAAG,CAAC;QAChB,MAAM,EAAE,GAAG,CAAC;KACb;CACF;AAED,wBAAsB,oCAAoC,CACxD,WAAW,EAAE,MAAM,EACnB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,IAAI,EACV,iBAAiB,CAAC,EAAE,MAAM,gBAkH3B;AAED,wBAAgB,cAAc,WAG7B"}

package/dist/actions/utils/index.js

@@ -16,6 +16,31 @@ async function getPlaywrightLocatorUsingCssSelector(cssSelector, xpath, page, el
             selectedElem =
                 // @ts-ignore
                 window?.annotationInstance?.annotations?.[elementAnnotation]?.node;
+            const elementDepth = 
+            //@ts-ignore
+            window?.annotationInstance?.annotations?.[elementAnnotation].depth;
+            const frameLocatorStr = elementDepth
+                // @ts-ignore
+                .map((e, index) => {
+                const locator = index === 0
+                    ? //To handle the parent iframe
+                        window.playwright.generateLocator(e)
+                    : elementDepth[index - 1].contentWindow.playwright.generateLocator(e);
+                return locator.replace(/^locator\(/, "frameLocator(");
+            })
+                .join(".");
+            let elementLocator;
+            //If the element is inside an iframe, we need to append the locator for the iframe
+            if (elementDepth.length > 0) {
+                elementLocator =
+                    elementDepth[elementDepth.length - 1].contentWindow.playwright.generateLocator(selectedElem);
+            }
+            else {
+                elementLocator = window.playwright.generateLocator(selectedElem);
+            }
+            return frameLocatorStr
+                ? `${frameLocatorStr}.${elementLocator}`
+                : elementLocator;
         }
         else if (locator.xpath) {
             try {

package/dist/agent/browsing/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/agent/browsing/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK3D,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAiBvD,OAAO,EAAe,aAAa,EAAE,MAAM,aAAa,CAAC;AAMzD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,MAAM,CAKhD;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,UAIvD;AA6FD;;;;GAIG;AACH,wBAAsB,yBAAyB,CAC7C,SAAS,EAAE,aAAa,EACxB,KAAK,CAAC,EAAE,WAAW,GAClB,OAAO,CAAC,MAAM,CAAC,CA0DjB;AAyBD,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,IAAI,iBAgCxD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,QA+BjD;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAM1E;AAWD;;;;;GAKG;AACH,wBAAsB,iBAAiB,CACrC,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,oBAAoB,EACtC,gBAAgB,GAAE,MAAM,EAAU,GACjC,OAAO,CAAC,MAAM,CAAC,CA+CjB;AAED,wBAAsB,sBAAsB,CAAC,EAC3C,YAAiB,EACjB,IAAS,EACT,eAAoB,EACpB,gBAAqB,EACrB,UAAyC,GAC1C,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,8EASA;AAED,qBAAa,eAAe;IACd,OAAO,CAAC,SAAS;gBAAT,SAAS,EAAE,MAAM;IACrC,OAAO,CAAC,aAAa,CAAqB;YAE5B,mBAAmB;YAUnB,gBAAgB;IAsBjB,OAAO;IAuBb,SAAS;CAKjB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/agent/browsing/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAK3D,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAiBvD,OAAO,EAAe,aAAa,EAAE,MAAM,aAAa,CAAC;AAMzD,wBAAgB,QAAQ,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,IAAI,MAAM,CAKhD;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,UAIvD;AA6FD;;;;GAIG;AACH,wBAAsB,yBAAyB,CAC7C,SAAS,EAAE,aAAa,EACxB,KAAK,CAAC,EAAE,WAAW,GAClB,OAAO,CAAC,MAAM,CAAC,CA0DjB;AAyBD,wBAAsB,wBAAwB,CAAC,IAAI,EAAE,IAAI,iBAuGxD;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,QA+BjD;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAM1E;AAWD;;;;;GAKG;AACH,wBAAsB,iBAAiB,CACrC,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,oBAAoB,EACtC,gBAAgB,GAAE,MAAM,EAAU,GACjC,OAAO,CAAC,MAAM,CAAC,CA+CjB;AAED,wBAAsB,sBAAsB,CAAC,EAC3C,YAAiB,EACjB,IAAS,EACT,eAAoB,EACpB,gBAAqB,EACrB,UAAyC,GAC1C,EAAE;IACD,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,8EASA;AAED,qBAAa,eAAe;IACd,OAAO,CAAC,SAAS;gBAAT,SAAS,EAAE,MAAM;IACrC,OAAO,CAAC,aAAa,CAAqB;YAE5B,mBAAmB;YAUnB,gBAAgB;IAsBjB,OAAO;IAuBb,SAAS;CAKjB"}

package/dist/agent/browsing/utils.js

@@ -179,15 +179,83 @@ async function injectPwLocatorGenerator(page) {
         fs_extra_1.default.readFile(annotateElementPath, "utf-8"),
     ]);
     page.on("load", async () => {
-        // add script for subsequent page load events
         try {
             await Promise.all(scripts.map((s) => page.addScriptTag({ content: s })));
+            await page.evaluate(async () => {
+                //@ts-ignore
+                const injectScriptInIframe = (iframeDoc) => {
+                    try {
+                        [
+                            "https://assets-test.empirical.run/pw-selector.js",
+                            "https://code.jquery.com/jquery-3.7.1.min.js",
+                        ].forEach((url) => {
+                            const scr = iframeDoc.createElement("script");
+                            scr.src = url;
+                            console.log("Injecting script in iframe", scr);
+                            iframeDoc.head.appendChild(scr);
+                        });
+                    }
+                    catch (e) {
+                        console.warn("Error injecting script in iframe:", e);
+                    }
+                };
+                const iframes = document.getElementsByTagName("iframe");
+                for (const iframe of iframes) {
+                    iframe.getBoundingClientRect();
+                    const rect = iframe.getBoundingClientRect();
+                    const isVisible = rect.width > 0 && rect.height > 0;
+                    if (isVisible) {
+                        //@ts-ignore
+                        const iframeContent = iframe.contentDocument || iframe.contentWindow?.document;
+                        if (iframeContent) {
+                            injectScriptInIframe(iframeContent);
+                        }
+                    }
+                }
+            });
         }
         catch (e) {
-            // skip errors which can occur while the page is getting stable
+            console.warn("Error during script injection on page load:", e);
         }
     });
-    await Promise.all(scripts.map((s) => page.addScriptTag({ content: s })));
+    try {
+        await Promise.all(scripts.map((s) => page.addScriptTag({ content: s })));
+        await page.evaluate(async () => {
+            //@ts-ignore
+            const injectScriptInIframe = (iframeDoc) => {
+                try {
+                    [
+                        "https://assets-test.empirical.run/pw-selector.js",
+                        "https://code.jquery.com/jquery-3.7.1.min.js",
+                    ].forEach((url) => {
+                        const scr = iframeDoc.createElement("script");
+                        scr.src = url;
+                        console.log("Injecting script in iframe", scr);
+                        iframeDoc.head.appendChild(scr);
+                    });
+                }
+                catch (e) {
+                    console.warn("Error injecting script in iframe:", e);
+                }
+            };
+            const iframes = document.getElementsByTagName("iframe");
+            for (const iframe of iframes) {
+                iframe.getBoundingClientRect();
+                const rect = iframe.getBoundingClientRect();
+                const isVisible = rect.width > 0 && rect.height > 0;
+                if (isVisible) {
+                    //@ts-ignore
+                    const iframeContent = iframe.contentDocument || iframe.contentWindow?.document;
+                    if (iframeContent) {
+                        injectScriptInIframe(iframeContent);
+                    }
+                }
+            }
+        });
+    }
+    catch (e) {
+        console.warn("Error injecting script in iframe:", e);
+    }
 }
 exports.injectPwLocatorGenerator = injectPwLocatorGenerator;
 /**

package/dist/agent/master/run.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../src/agent/master/run.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,GAAG,EACH,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAclD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EACL,oBAAoB,EAErB,MAAM,aAAa,CAAC;AAoBrB,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,EACH,OAAO,EACP,cAAc,EACd,uBAAuB,EACvB,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,2FA2FA;AAGD,wBAAsB,0BAA0B,CAAC,EAC/C,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;;;GAiUA"}
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../src/agent/master/run.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,GAAG,EACH,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAclD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EACL,oBAAoB,EAErB,MAAM,aAAa,CAAC;AAoBrB,wBAAsB,aAAa,CAAC,EAClC,IAAI,EACJ,eAAe,EACf,aAAa,EACb,OAAO,EACP,KAAK,EACL,GAAG,EACH,OAAO,EACP,cAAc,EACd,uBAAuB,EACvB,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,WAAW,GACZ,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,aAAa,EAAE,GAAG,EAAE,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC;IACV,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;IACvB,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,aAAa,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;CACxB,2FA2FA;AAGD,wBAAsB,0BAA0B,CAAC,EAC/C,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,IAAI,CAAC;IACX,QAAQ,EAAE,QAAQ,CAAC;IACnB,OAAO,EAAE,oBAAoB,CAAC;IAC9B,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;;;GAsTA"}

package/dist/agent/master/run.js

@@ -202,17 +202,17 @@ async function createTestUsingMasterAgent({ task, page, testCase, options, scope
         const pageScreenshot = buffer.toString("base64");
         let output;
         let generatedCodeSteps = [];
-        let annotations;
         let annotatedPageScreenshot;
+        let annotationKeys = [];
         if (useHints) {
             await page.waitForTimeout(2000);
-            const annotationResult = await page.evaluate(() => {
+            annotationKeys = await page.evaluate(() => {
                 // @ts-ignore
-                window.annotationInstance = window.annotateClickableElements();
+                // eslint-disable-next-line no-undef
+                window.annotationInstance = annotateClickableElements();
                 // @ts-ignore
-                return window.annotationInstance;
+                return Object.keys(window.annotationInstance.annotations);
             });
-            annotations = annotationResult?.annotations || {};
             await page.waitForTimeout(2000);
             const annonationBuffer = await page.screenshot({
             //This is done to improve element annotation accuracy, anyways it doesn't annotate elements which are out of viewport
@@ -236,7 +236,6 @@ async function createTestUsingMasterAgent({ task, page, testCase, options, scope
         if (await (0, session_1.shouldStopSession)()) {
             break;
         }
-        const annotationKeys = annotations ? Object.keys(annotations) : [];
         const toolCall = await getNextAction({
             task,
             executedActions: masterAgentActions,
@@ -275,12 +274,12 @@ async function createTestUsingMasterAgent({ task, page, testCase, options, scope
                         name: "trigger-hints-flow",
                         input: {
                             outputFromGetNextAction: output,
-                            generatedAnnotations: annotations,
+                            generatedAnnotations: annotationKeys,
                         },
                     });
                     const result = await (0, with_hints_1.triggerHintsFlow)({
                         outputFromGetNextAction: output,
-                        generatedAnnotations: annotations,
+                        generatedAnnotations: annotationKeys,
                         page: testGenPage,
                         llm,
                         trace: triggerHintsFlowSpan,

package/dist/agent/master/with-hints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"with-hints.d.ts","sourceRoot":"","sources":["../../../src/agent/master/with-hints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAI5B,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,eAAO,MAAM,0BAA0B;iBAMxB,OAAO,8BAA8B;;oBAElC,MAAM;6BACG,MAAM;MAC7B,MAAM,GAAG,OAAO,yBAAyB,EAiC5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;6BAOF;QACvB,MAAM,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;0BACqB,OAAO,MAAM,EAAE,GAAG,CAAC;UACnC,WAAW;SACZ,GAAG;;MAEN,QAAQ;IACV,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,EAAE,OAAO,qBAAqB,GAAG,SAAS,CAAC;CACpE,CAqGA,CAAC"}
+{"version":3,"file":"with-hints.d.ts","sourceRoot":"","sources":["../../../src/agent/master/with-hints.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,OAAO,MAAM,MAAM,QAAQ,CAAC;AAI5B,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnD,eAAO,MAAM,0BAA0B;iBAMxB,OAAO,8BAA8B;;oBAElC,MAAM;6BACG,MAAM;MAC7B,MAAM,GAAG,OAAO,yBAAyB,EAiC5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;6BAOF;QACvB,MAAM,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,MAAM,CAAC;KAC5B;0BACqB,OAAO,MAAM,EAAE,GAAG,CAAC;UACnC,WAAW;SACZ,GAAG;;MAEN,QAAQ;IACV,sBAAsB,EAAE,OAAO,CAAC;IAChC,wBAAwB,EAAE,OAAO,qBAAqB,GAAG,SAAS,CAAC;CACpE,CAuGA,CAAC"}

package/dist/agent/master/with-hints.js

@@ -37,12 +37,12 @@ const triggerHintsFlow = async ({ outputFromGetNextAction, generatedAnnotations,
     try {
         const hasElementAnnotation = outputFromGetNextAction?.elementAnnotation?.length &&
             outputFromGetNextAction?.elementAnnotation?.trim()?.length &&
-            outputFromGetNextAction?.elementAnnotation in
-                (generatedAnnotations || {});
+            generatedAnnotations?.includes(outputFromGetNextAction?.elementAnnotation);
         trace?.event({
             name: "has-element-annotation",
             output: {
                 hasElementAnnotation,
+                generatedAnnotations,
             },
         });
         if (!hasElementAnnotation) {

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,116 @@ 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() {
-    if (annotationsContainer) {
-      annotationsContainer.remove();
-      annotationsContainer = null;
-    }
-  }
-
-  /**
-   * Initializes the annotations by creating the container and adding markers.
-   */
-  function initializeAnnotations() {
-    clearAnnotations(); // Clear any existing annotations
-
-    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
+    parentElements.forEach((parentElement) => {
+      const markers = parentElement.querySelectorAll(`.${markerClass}`);
+      markers.forEach((marker) => marker.remove());
     });
-    document.body.appendChild(annotationsContainer);
-
-    const clickableElements = Array.from(document.querySelectorAll("*")).filter(
-      (el) => {
-        const isClickable = isElementClickable(el);
-
-        const originalScrollX = window.scrollX;
-        const originalScrollY = window.scrollY;
-
-        const isClickNotBlocked = isElementClickNotBlocked(el);
-        // Restore the original scroll positions
-        window.scrollTo(originalScrollX, originalScrollY);
-
-        return isClickable && isClickNotBlocked;
-      },
-    );
-    const hints = generateHintStrings(
-      hintCharacterSet,
-      Math.min(maxHints, clickableElements.length),
-    );
+    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,
   };
-};
+}

package/dist/browser-injected-scripts/annotate-elements.spec.ts

@@ -15,7 +15,7 @@ test("should annotate all links on empirical landing page", async ({
   });
 
   const annotations = await page.evaluate(() => {
-    const { annotations } = window.annotateClickableElements();
+    const { annotations } = annotateClickableElements();
 
     return Object.entries(annotations).map(([hint, config]) => ({
       innerText: config.node.innerText,
@@ -80,7 +80,7 @@ test("should annotate all important items on quizizz page", async ({
   });
 
   const annotations = await page.evaluate(() => {
-    const { annotations } = window.annotateClickableElements();
+    const { annotations } = annotateClickableElements();
 
     return Object.entries(annotations).map(([hint, config]) => ({
       hint,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empiricalrun/test-gen",
-  "version": "0.38.5",
+  "version": "0.38.7",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"