@empiricalrun/test-gen 0.35.3 → 0.35.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @empiricalrun/test-gen
 
+## 0.35.4
+
+### Patch Changes
+
+- 4bddc82: fix: annotate all non-blocked elements, outside the viewport too
+
 ## 0.35.3
 
 ### Patch Changes

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

@@ -22,20 +22,56 @@ window.annotateClickableElements = function annotateClickableElements(
   let annotationsContainer = null;
 
   /**
-   * Checks if an element is visible to the user.
-   * It considers not just the viewport but also the scrollable parent.
+   * 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} True if the element is visible to the user.
+   * @returns {boolean} - Returns true if the element is clickable; otherwise, false.
    */
-  function isElementVisibleToUser(element) {
+
+  function isElementClickNotBlocked(element) {
     const rect = element.getBoundingClientRect();
-    return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <=
-        (window.innerHeight || document.documentElement.clientHeight) &&
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    );
+
+    // Calculate the center point of the element
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // check if element is within the viewport
+    if (
+      centerX < 0 ||
+      centerY < 0 ||
+      centerX > (window.innerWidth || document.documentElement.clientWidth) ||
+      centerY > (window.innerHeight || document.documentElement.clientHeight)
+    ) {
+      // Determine the viewport dimensions
+      const viewportWidth =
+        window.innerWidth || document.documentElement.clientWidth;
+      const viewportHeight =
+        window.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({
+        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);
+    }
+
+    // Retrieve the topmost element at the center point
+    const topElement = document.elementFromPoint(centerX, centerY);
+
+    // Check if the topmost element is the target element or one of its descendants
+    return element.contains(topElement);
   }
 
   /**
@@ -408,7 +444,18 @@ window.annotateClickableElements = function annotateClickableElements(
     document.body.appendChild(annotationsContainer);
 
     const clickableElements = Array.from(document.querySelectorAll("*")).filter(
-      (el) => isElementClickable(el) && isElementVisibleToUser(el),
+      (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,

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

@@ -22,20 +22,56 @@ window.annotateClickableElements = function annotateClickableElements(
   let annotationsContainer = null;
 
   /**
-   * Checks if an element is visible to the user.
-   * It considers not just the viewport but also the scrollable parent.
+   * 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} True if the element is visible to the user.
+   * @returns {boolean} - Returns true if the element is clickable; otherwise, false.
    */
-  function isElementVisibleToUser(element) {
+
+  function isElementClickNotBlocked(element) {
     const rect = element.getBoundingClientRect();
-    return (
-      rect.top >= 0 &&
-      rect.left >= 0 &&
-      rect.bottom <=
-        (window.innerHeight || document.documentElement.clientHeight) &&
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
-    );
+
+    // Calculate the center point of the element
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+
+    // check if element is within the viewport
+    if (
+      centerX < 0 ||
+      centerY < 0 ||
+      centerX > (window.innerWidth || document.documentElement.clientWidth) ||
+      centerY > (window.innerHeight || document.documentElement.clientHeight)
+    ) {
+      // Determine the viewport dimensions
+      const viewportWidth =
+        window.innerWidth || document.documentElement.clientWidth;
+      const viewportHeight =
+        window.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({
+        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);
+    }
+
+    // Retrieve the topmost element at the center point
+    const topElement = document.elementFromPoint(centerX, centerY);
+
+    // Check if the topmost element is the target element or one of its descendants
+    return element.contains(topElement);
   }
 
   /**
@@ -408,7 +444,18 @@ window.annotateClickableElements = function annotateClickableElements(
     document.body.appendChild(annotationsContainer);
 
     const clickableElements = Array.from(document.querySelectorAll("*")).filter(
-      (el) => isElementClickable(el) && isElementVisibleToUser(el),
+      (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,

package/package.json

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