@empiricalrun/test-gen 0.81.0 → 0.81.2

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

@@ -1,612 +0,0 @@
-/**
- * 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.
- */
-// eslint-disable-next-line no-unused-vars, autofix/no-unused-vars
-function annotateElementsWithPreference({
-  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 MAX_Z_INDEX_FOR_DOM = 10000;
-  const Z_INDEX_FOR_MARKERS = 99999;
-  const originalZIndices = new Map(); // Store original z-indices
-
-  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();
-
-    // 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)
-    ) {
-      return false;
-    }
-
-    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;
-      }
-    }
-
-    // Some special handling for Tailwind CSS and Vue
-    if (!isClickable) {
-      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,
-    baseColor,
-  ) {
-    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",
-      background: baseColor,
-      padding: "1px 3px 0px",
-      borderRadius: "3px",
-      border: `1px solid ${baseColor}`,
-      fontSize: "11px",
-      pointerEvents: "none",
-      zIndex: `${Z_INDEX_FOR_MARKERS}`,
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      letterSpacing: 0,
-      minHeight: 0,
-      lineHeight: "100%",
-      color: "white",
-      fontFamily: "Helvetica, Arial, sans-serif",
-      fontWeight: "bold",
-      visibility: "hidden", // Setting the visibility to hidden initially, to get the height and width of marker
-    });
-
-    parentElement.appendChild(marker);
-    let markerRect = marker.getBoundingClientRect();
-    let top = rect.top + windowToAnnotate.scrollY;
-    let left = rect.left + windowToAnnotate.scrollX;
-
-    // If the target element is smaller, we annotate outside the container
-    if (markerRect.height > rect.height - markerRect.height) {
-      top = top - markerRect.height;
-    }
-
-    if (markerRect.width > rect.width - markerRect.width) {
-      left = left - markerRect.width / 2;
-    }
-
-    // Applying the position and setting visibility
-    marker.style.top = `${top}px`;
-    marker.style.left = `${left}px`;
-    marker.style.visibility = "visible";
-
-    // Attach the marker to the specified parent element
-    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;
-  }
-
-  function isRequiredTextPresent(el, assertionText) {
-    assertionText = assertionText?.trim().toLowerCase();
-    if (assertionText) {
-      let elementText = el.innerText?.trim().toLowerCase();
-      let placeHolderText = el.placeholder?.trim().toLowerCase();
-      if (elementText === assertionText || placeHolderText === assertionText) {
-        //Check if the text for parent and child is same or not, if its same don't annotate again
-        if (el.parentNode.innerText?.toLowerCase() !== elementText) {
-          return true;
-        }
-      }
-      return false;
-    }
-    return true;
-  }
-
-  // This checks if the element is scrollable or not
-  function isElementScrollable(elem) {
-    function getComputedStyle(elem) {
-      return window.getComputedStyle(elem, null);
-    }
-
-    function getActualCss(elem, style) {
-      return getComputedStyle(elem)[style];
-    }
-
-    function isYScrollable(elem) {
-      return (
-        elem.offsetHeight < elem.scrollHeight &&
-        autoOrScroll(getActualCss(elem, "overflow-y"))
-      );
-    }
-
-    function autoOrScroll(text) {
-      return text == "scroll" || text == "auto";
-    }
-
-    // This doesn't annotate the elements with horizontal scroll
-    return isYScrollable(elem);
-  }
-
-  // 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 elementsToAnnotate = Array.from(
-      windowToAnnotate.document.querySelectorAll("*"),
-    ).filter((el) => {
-      // Here based on the action type we filter the elements
-      // and annotate only those elements
-      switch (preference.actionType) {
-        case "fill":
-          return isInputElement(el);
-
-        case "assert_text":
-          return isRequiredTextPresent(el, preference.assertionText);
-
-        case "scroll":
-          return isElementScrollable(el);
-
-        default:
-          return (
-            isElementClickable(el, windowToAnnotate) &&
-            isElementClickNotBlocked(el, windowToAnnotate)
-          );
-      }
-    });
-    // Generate hint strings for the clickable elements
-    const hints = generateHintStrings(
-      hintCharacterSet,
-      Math.min(maxHints, elementsToAnnotate.length),
-    );
-
-    // Create markers for the elements
-    elementsToAnnotate.slice(0, maxHints).forEach((el, index) => {
-      const hint = hints[index];
-      const rect = el.getBoundingClientRect();
-
-      const colors = [
-        "#FF0000", // Red
-        "#006400", // Dark Green
-        "#0000FF", // Blue
-        "#FFA500", // Orange
-        "#800080", // Purple
-        "#008080", // Teal
-        "#FF69B4", // Hot Pink
-        "#4B0082", // Indigo
-        "#FF4500", // Orange Red
-        "#2E8B57", // Sea Green
-        "#DC143C", // Crimson
-        "#4682B4", // Steel Blue
-      ];
-      const colorIndex = index % colors.length;
-      const baseColor = colors[colorIndex];
-
-      // Use createHintMarker with the specified container
-      createHintMarker(el, hint, container, windowToAnnotate, baseColor);
-
-      el.style.boxShadow = `inset 0 0 0px 1px ${baseColor}`;
-
-      // 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() {
-    scaleAllZIndices(MAX_Z_INDEX_FOR_DOM);
-    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: `${Z_INDEX_FOR_MARKERS}`,
-      });
-      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";
-      });
-
-      // Restore original z-indices
-      originalZIndices.forEach((originalZ, element) => {
-        element.style.zIndex = originalZ;
-      });
-      originalZIndices.clear();
-
-      annotationsContainer.parentNode.removeChild(annotationsContainer);
-      annotationsContainer = null;
-    }
-  }
-
-  function scaleAllZIndices(maxValue) {
-    const allElements = document.querySelectorAll("*");
-    let zIndexes = [];
-    allElements.forEach((el) => {
-      const z = window.getComputedStyle(el).getPropertyValue("z-index");
-      if (z !== "auto" && !isNaN(parseInt(z, 10))) {
-        zIndexes.push(parseInt(z, 10));
-        // Store original z-index
-        originalZIndices.set(el, z);
-      }
-    });
-    if (zIndexes.length === 0) {
-      console.log("No elements with a numeric z-index were found.");
-    } else {
-      const currentMax = Math.max(...zIndexes);
-      const scalingFactor = maxValue / currentMax;
-      allElements.forEach((el) => {
-        const computedZ = window
-          .getComputedStyle(el)
-          .getPropertyValue("z-index");
-        if (computedZ !== "auto" && !isNaN(parseInt(computedZ, 10))) {
-          const originalZ = parseInt(computedZ, 10);
-          const newZ = Math.floor(originalZ * scalingFactor);
-          el.style.zIndex = newZ;
-        }
-      });
-    }
-  }
-
-  enable();
-
-  return {
-    annotations: annotationsMap,
-    destroy,
-  };
-}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=annotate-elements.spec.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"annotate-elements.spec.d.ts","sourceRoot":"","sources":["../../src/browser-injected-scripts/annotate-elements.spec.ts"],"names":[],"mappings":""}