@empiricalrun/playwright-utils 0.22.6 → 0.23.0

package/bundled/test-gen/browser-injected-scripts/annotate-elements.js

@@ -0,0 +1,615 @@
+/* eslint-disable autofix/no-unused-vars */
+
+/**
+ * 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 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();
+    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)
+    ) {
+      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/bundled/test-gen/browser-injected-scripts/annotate-elements.spec.d.ts

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

package/bundled/test-gen/browser-injected-scripts/annotate-elements.spec.d.ts.map

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