@empiricalrun/test-gen 0.38.7 → 0.38.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @empiricalrun/test-gen
 
+## 0.38.9
+
+### Patch Changes
+
+- 134f282: fix: annotations position after scroll
+
+## 0.38.8
+
+### Patch Changes
+
+- deb93bd: fix: scroll while annotating
+
 ## 0.38.7
 
 ### Patch Changes

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

@@ -24,6 +24,8 @@ function annotateClickableElements(options = {}) {
   // Check if the element is not blocked and visible for clicking
   function isElementClickNotBlocked(element, windowToAnnotate) {
     const rect = element.getBoundingClientRect();
+    const originalScrollX = windowToAnnotate.scrollX;
+    const originalScrollY = windowToAnnotate.scrollY;
 
     // Calculate the center point of the element
     const centerX = rect.left + rect.width / 2;
@@ -56,7 +58,12 @@ function annotateClickableElements(options = {}) {
       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 doesElementContainTopElement = element.contains(topElement);
+
+
+      // Restore the original scroll positions
+      windowToAnnotate.scrollTo(originalScrollX, originalScrollY);
+      return doesElementContainTopElement;
     }
 
     const topElement = windowToAnnotate.document.elementFromPoint(centerX, centerY);
@@ -306,20 +313,18 @@ function annotateClickableElements(options = {}) {
   var parentElements = [];
 
   // Create a hint marker
-  function createHintMarker(el, hint, parentElement) {
+  function createHintMarker(el, hint, parentElement, windowToAnnotate) {
     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`,
+      top: `${rect.top + windowToAnnotate.scrollY}px`,
+      left: `${rect.left + windowToAnnotate.scrollX}px`,
       background:
         "-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)))",
       padding: "1px 3px 0px",
@@ -369,7 +374,9 @@ function annotateClickableElements(options = {}) {
   
     // Filter for clickable elements
     const clickableElements = Array.from(windowToAnnotate.document.querySelectorAll("*")).filter((el) => {
-      return isElementClickable(el) && isElementClickNotBlocked(el, windowToAnnotate);
+      const isClickable = isElementClickable(el);
+      const isClickNotBlocked = isElementClickNotBlocked(el, windowToAnnotate);
+      return isClickable && isClickNotBlocked;
     });  
     // Generate hint strings for the clickable elements
     const hints = generateHintStrings(hintCharacterSet, Math.min(maxHints, clickableElements.length));
@@ -380,7 +387,7 @@ function annotateClickableElements(options = {}) {
       const rect = el.getBoundingClientRect();
   
       // Use createHintMarker with the specified container
-      createHintMarker(el, hint, container);
+      createHintMarker(el, hint, container, windowToAnnotate);
       el.style.boxShadow = `inset 0 0 0px 2px red`;
 
       // Add element details to the annotations map

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

@@ -24,6 +24,8 @@ function annotateClickableElements(options = {}) {
   // Check if the element is not blocked and visible for clicking
   function isElementClickNotBlocked(element, windowToAnnotate) {
     const rect = element.getBoundingClientRect();
+    const originalScrollX = windowToAnnotate.scrollX;
+    const originalScrollY = windowToAnnotate.scrollY;
 
     // Calculate the center point of the element
     const centerX = rect.left + rect.width / 2;
@@ -56,7 +58,12 @@ function annotateClickableElements(options = {}) {
       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 doesElementContainTopElement = element.contains(topElement);
+
+
+      // Restore the original scroll positions
+      windowToAnnotate.scrollTo(originalScrollX, originalScrollY);
+      return doesElementContainTopElement;
     }
 
     const topElement = windowToAnnotate.document.elementFromPoint(centerX, centerY);
@@ -306,20 +313,18 @@ function annotateClickableElements(options = {}) {
   var parentElements = [];
 
   // Create a hint marker
-  function createHintMarker(el, hint, parentElement) {
+  function createHintMarker(el, hint, parentElement, windowToAnnotate) {
     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`,
+      top: `${rect.top + windowToAnnotate.scrollY}px`,
+      left: `${rect.left + windowToAnnotate.scrollX}px`,
       background:
         "-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 247, 133)), to(rgb(255, 197, 66)))",
       padding: "1px 3px 0px",
@@ -369,7 +374,9 @@ function annotateClickableElements(options = {}) {
   
     // Filter for clickable elements
     const clickableElements = Array.from(windowToAnnotate.document.querySelectorAll("*")).filter((el) => {
-      return isElementClickable(el) && isElementClickNotBlocked(el, windowToAnnotate);
+      const isClickable = isElementClickable(el);
+      const isClickNotBlocked = isElementClickNotBlocked(el, windowToAnnotate);
+      return isClickable && isClickNotBlocked;
     });  
     // Generate hint strings for the clickable elements
     const hints = generateHintStrings(hintCharacterSet, Math.min(maxHints, clickableElements.length));
@@ -380,7 +387,7 @@ function annotateClickableElements(options = {}) {
       const rect = el.getBoundingClientRect();
   
       // Use createHintMarker with the specified container
-      createHintMarker(el, hint, container);
+      createHintMarker(el, hint, container, windowToAnnotate);
       el.style.boxShadow = `inset 0 0 0px 2px red`;
 
       // Add element details to the annotations map

package/package.json

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