@empiricalrun/test-gen 0.42.4 → 0.42.8

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

@@ -1,491 +0,0 @@
-/* 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 = {}, preference } = {}) {
-  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;
-
-  // 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;
-    const centerY = rect.top + rect.height / 2;
-
-    // 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);
-      const doesElementContainTopElement = element.contains(topElement);
-
-
-      // Restore the original scroll positions
-      windowToAnnotate.scrollTo(originalScrollX, originalScrollY);
-      return doesElementContainTopElement;
-    }
-
-    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, windowToAnnotate) {
-    if (!(element instanceof windowToAnnotate.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;
-    }
-
-    // Tag-specific clickability
-    const focusableTags = [
-      "a",
-      "button",
-      "input",
-      "select",
-      "textarea",
-      "object",
-      "embed",
-      "label",
-      "details",
-    ];
-
-    // Check for onclick attribute or listener
-    if (
-      (element.hasAttribute("onclick") ||
-      typeof element.onclick === "function") 
-      // check for parent element having same on click
-      && element.parentNode.onclick !== element.onclick
-      // parent element should not be a focusable tag like button
-      && focusableTags.indexOf(element.parentNode.tagName.toLowerCase()) === -1
-    ) {
-      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;
-      }
-    }
-
-    
-    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, windowToAnnotate) {
-    const rect = el.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 + 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",
-      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 = [];
-  }
-
-  function isInputElement(el) {
-    // Check if it's an input with a text-like type
-    if (el instanceof HTMLInputElement) {
-      const textTypes = ['text', 'email', 'number', 'password', 'search', 'tel', 'url', 'checkbox'];
-      return textTypes.includes(el.type.toLowerCase());
-    }
-    
-    // Check if it's a textarea
-    if (el instanceof HTMLTextAreaElement) {
-      return true;
-    }
-    
-    // Check if it's contentEditable
-    return el.isContentEditable;
-  }
-
-  // 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) => {
-
-      //If preference is fill then it should only annotate input elements
-      if(preference === "fill"){
-        if (!isInputElement(el)) {
-          return false;
-        }
-      }
-
-      const isClickable = isElementClickable(el, windowToAnnotate);
-      const isClickNotBlocked = isElementClickNotBlocked(el, windowToAnnotate);
-      return isClickable && isClickNotBlocked;
-    });  
-    // 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, windowToAnnotate);
-      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) {
-      clearAnnotations();
-      Object.values(annotationsMap).forEach((annotation) => {
-        annotation.node.style.boxShadow = "none";
-      });
-
-      annotationsContainer.parentNode.removeChild(annotationsContainer);
-      annotationsContainer = null;
-    }
-  }
-
-  enable();
-
-  return {
-    annotations: annotationsMap,
-    destroy,
-  };
-}