@midscene/web 0.3.0 → 0.3.1

package/dist/script/htmlElement.js

@@ -580,9 +580,6 @@ var midscene_element_inspector = (() => {
     extractTextWithPosition: () => extractTextWithPosition
   });
 
-  // src/extractor/constants.ts
-  var TEXT_SIZE_THRESHOLD = 9;
-
   // src/extractor/dom-util.ts
   function isInputElement(node) {
     return node instanceof HTMLElement && (node.tagName.toLowerCase() === "input" || node.tagName.toLowerCase() === "textarea");
@@ -593,10 +590,21 @@ var midscene_element_inspector = (() => {
   function isImgElement(node) {
     return node instanceof HTMLElement && node.tagName.toLowerCase() === "img";
   }
+  function isTextElement(node) {
+    return node.nodeName.toLowerCase() === "#text";
+  }
 
   // src/extractor/util.ts
   var import_js_sha256 = __toESM(require_sha256());
+  var debugMode = false;
+  function setDebugMode(mode) {
+    debugMode = mode;
+  }
   function logger(..._msg) {
+    if (!debugMode) {
+      return;
+    }
+    console.log(..._msg);
   }
   var taskIdKey = "_midscene_retrieve_task_id";
   function selectorForValue(val) {
@@ -626,40 +634,61 @@ var midscene_element_inspector = (() => {
       after: afterContent === "none" ? "" : afterContent.replace(/"/g, "")
     };
   }
+  function getRect(el) {
+    if (!(el instanceof HTMLElement)) {
+      const range = document.createRange();
+      range.selectNodeContents(el);
+      return range.getBoundingClientRect();
+    }
+    return el.getBoundingClientRect();
+  }
   function visibleRect(el) {
     if (!el) {
-      logger("Element is not in the DOM hierarchy");
+      logger(el, "Element is not in the DOM hierarchy");
       return false;
     }
-    if (!(el instanceof HTMLElement)) {
-      logger("Element is not in the DOM hierarchy");
+    if (!(el instanceof HTMLElement) && el.nodeType !== Node.TEXT_NODE) {
+      logger(el, "Element is not in the DOM hierarchy");
       return false;
     }
-    const style = window.getComputedStyle(el);
-    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" && el.tagName !== "INPUT") {
-      logger("Element is hidden");
-      return false;
+    if (el instanceof HTMLElement) {
+      const style = window.getComputedStyle(el);
+      if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" && el.tagName !== "INPUT") {
+        logger(el, "Element is hidden");
+        return false;
+      }
     }
-    const rect = el.getBoundingClientRect();
+    const rect = getRect(el);
     if (rect.width === 0 && rect.height === 0) {
-      logger("Element has no size");
+      logger(el, "Element has no size");
       return false;
     }
     const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    const isInViewport = rect.top >= 0 + scrollTop && rect.left >= 0 + scrollLeft && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + scrollTop && rect.right <= (window.innerWidth || document.documentElement.clientWidth) + scrollLeft;
-    if (!isInViewport) {
-      logger("Element is not in the viewport");
-      logger(rect, window.innerHeight, window.innerWidth, scrollTop, scrollLeft);
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    const isPartiallyInViewport = rect.right > 0 && rect.bottom > 0 && rect.left < viewportWidth && rect.top < viewportHeight;
+    if (!isPartiallyInViewport) {
+      logger(el, "Element is completely outside the viewport", {
+        rect,
+        viewportHeight,
+        viewportWidth,
+        scrollTop,
+        scrollLeft
+      });
       return false;
     }
     let parent = el;
     while (parent && parent !== document.body) {
+      if (!(parent instanceof HTMLElement)) {
+        parent = parent.parentElement;
+        continue;
+      }
       const parentStyle = window.getComputedStyle(parent);
       if (parentStyle.overflow === "hidden") {
         const parentRect = parent.getBoundingClientRect();
         const tolerance = 10;
-        if (rect.top < parentRect.top - tolerance || rect.left < parentRect.left - tolerance || rect.bottom > parentRect.bottom + tolerance || rect.right > parentRect.right + tolerance) {
+        if (rect.top < parentRect.top - tolerance && rect.left < parentRect.left - tolerance && rect.bottom > parentRect.bottom + tolerance && rect.right > parentRect.right + tolerance) {
           logger("Element is clipped by an ancestor", parent, rect, parentRect);
           return false;
         }
@@ -673,29 +702,6 @@ var midscene_element_inspector = (() => {
       height: Math.round(rect.height)
     };
   }
-  function validTextNodeContent(node) {
-    if (!node) {
-      return false;
-    }
-    if (node.nodeType !== Node.ELEMENT_NODE && node.nodeType !== Node.TEXT_NODE) {
-      return false;
-    }
-    const everyChildNodeIsText = Array.from(node.childNodes).every((child) => {
-      const tagName = (child.tagName || "").toLowerCase();
-      if (tagName === "script" || tagName === "style" || tagName === "link") {
-        return false;
-      }
-      return true;
-    });
-    if (!everyChildNodeIsText) {
-      return false;
-    }
-    const content = node.textContent || node.innerText;
-    if (content && !/^\s*$/.test(content)) {
-      return content.trim();
-    }
-    return false;
-  }
   function getNodeAttributes(node) {
     if (!node || !(node instanceof HTMLElement) || !node.attributes) {
       return {};
@@ -723,7 +729,8 @@ var midscene_element_inspector = (() => {
   function generateId(numberId) {
     return `${numberId}`;
   }
-  function extractTextWithPosition(initNode = container) {
+  function extractTextWithPosition(initNode = container, debugMode2 = false) {
+    setDebugMode(debugMode2);
     const elementInfoArray = [];
     const nodeMapTree = { node: initNode, children: [] };
     let nodeIndex = 1;
@@ -735,17 +742,22 @@ var midscene_element_inspector = (() => {
       if (parentNode == null ? void 0 : parentNode.children) {
         parentNode.children.push(currentNodeDes);
       }
-      collectElementInfo(node);
+      const shouldContinue = collectElementInfo(node);
+      if (!shouldContinue) {
+        return;
+      }
       for (let i = 0; i < node.childNodes.length; i++) {
         logger("will dfs", node.childNodes[i]);
         dfs(node.childNodes[i], currentNodeDes);
       }
     }
     function collectElementInfo(node) {
+      var _a;
       const rect = visibleRect(node);
+      logger("collectElementInfo", node, node.nodeName, rect);
       if (!rect) {
         logger("Element is not visible", node);
-        return;
+        return true;
       }
       if (isInputElement(node)) {
         const attributes = getNodeAttributes(node);
@@ -756,6 +768,7 @@ var midscene_element_inspector = (() => {
           indexId: generateId(nodeIndex++),
           nodeHashId,
           locator: selector,
+          nodeType: "INPUT Node" /* INPUT */,
           attributes: __spreadProps(__spreadValues({}, attributes), {
             nodeType: "INPUT Node" /* INPUT */
           }),
@@ -764,7 +777,8 @@ var midscene_element_inspector = (() => {
           center: [
             Math.round(rect.left + rect.width / 2),
             Math.round(rect.top + rect.height / 2)
-          ]
+          ],
+          htmlNode: debugMode2 ? node : null
         });
         return;
       }
@@ -778,6 +792,7 @@ var midscene_element_inspector = (() => {
           id: nodeHashId,
           indexId: generateId(nodeIndex++),
           nodeHashId,
+          nodeType: "BUTTON Node" /* BUTTON */,
           locator: selector,
           attributes: __spreadProps(__spreadValues({}, attributes), {
             nodeType: "BUTTON Node" /* BUTTON */
@@ -787,7 +802,8 @@ var midscene_element_inspector = (() => {
           center: [
             Math.round(rect.left + rect.width / 2),
             Math.round(rect.top + rect.height / 2)
-          ]
+          ],
+          htmlNode: debugMode2 ? node : null
         });
         return;
       }
@@ -803,19 +819,20 @@ var midscene_element_inspector = (() => {
           attributes: __spreadProps(__spreadValues({}, attributes), {
             nodeType: "IMG Node" /* IMG */
           }),
+          nodeType: "IMG Node" /* IMG */,
           content: "",
           rect,
           center: [
             Math.round(rect.left + rect.width / 2),
             Math.round(rect.top + rect.height / 2)
-          ]
+          ],
+          htmlNode: debugMode2 ? node : null
         });
         return;
       }
-      const text = validTextNodeContent(node);
-      if (text) {
-        if (rect.width < TEXT_SIZE_THRESHOLD || rect.height < TEXT_SIZE_THRESHOLD) {
-          logger("Element is too small", text);
+      if (isTextElement(node)) {
+        const text = (_a = node.textContent) == null ? void 0 : _a.trim().replace(/\n+/g, " ");
+        if (!text) {
           return;
         }
         const attributes = getNodeAttributes(node);
@@ -825,19 +842,23 @@ var midscene_element_inspector = (() => {
           id: nodeHashId,
           indexId: generateId(nodeIndex++),
           nodeHashId,
+          nodeType: "TEXT Node" /* TEXT */,
+          locator: selector,
           attributes: __spreadProps(__spreadValues({}, attributes), {
             nodeType: "TEXT Node" /* TEXT */
           }),
-          locator: selector,
           center: [
             Math.round(rect.left + rect.width / 2),
             Math.round(rect.top + rect.height / 2)
           ],
           // attributes,
           content: text,
-          rect
+          rect,
+          htmlNode: debugMode2 ? node : null
         });
+        return;
       }
+      return true;
     }
     dfs(initNode, nodeMapTree);
     return elementInfoArray;