@midscene/shared 0.17.2 → 0.17.3-beta-20250526042111.0

package/src/extractor/locator.ts

@@ -17,20 +17,6 @@ const getElementIndex = (element: Element): number => {
   return index;
 };
 
-// Find the first ancestor with an ID
-const findFirstAncestorWithId = (element: Element): Element | null => {
-  let current = element;
-
-  while (current?.parentElement) {
-    if (current.id) {
-      return current;
-    }
-    current = current.parentElement;
-  }
-
-  return null;
-};
-
 // Get the index of a text node among its siblings of the same type
 const getTextNodeIndex = (textNode: Node): number => {
   let index = 1;
@@ -54,6 +40,12 @@ const getElementXPath = (element: Node): string => {
     if (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {
       const parentXPath = getElementXPath(parentNode);
       const textIndex = getTextNodeIndex(element);
+      const textContent = element.textContent?.trim();
+
+      // If we have text content, include it in the xpath for better matching
+      if (textContent) {
+        return `${parentXPath}/text()[${textIndex}][normalize-space()="${textContent}"]`;
+      }
       return `${parentXPath}/text()[${textIndex}]`;
     }
     return '';
@@ -72,36 +64,7 @@ const getElementXPath = (element: Node): string => {
     return '/html/body';
   }
 
-  // If this element has an ID, return an XPath with the ID
-  if (el.id) {
-    return `//*[@id="${el.id}"]`;
-  }
-
-  const ancestorWithId = findFirstAncestorWithId(el);
-
-  if (ancestorWithId) {
-    // Start from the ancestor with ID
-    const ancestorPath = `//*[@id="${ancestorWithId.id}"]`;
-
-    // Build the path from the ancestor to this element
-    let current: Element | null = el;
-    const pathParts: string[] = [];
-
-    while (current && current !== ancestorWithId) {
-      const index = getElementIndex(current);
-      const tagName = current.nodeName.toLowerCase();
-      pathParts.unshift(`${tagName}[${index}]`);
-      current = current.parentElement;
-    }
-
-    // Combine the ancestor path with the rest of the path
-    return pathParts.length > 0
-      ? `${ancestorPath}/${pathParts.join('/')}`
-      : ancestorPath;
-  }
-
-  // If no parent node, or we need a full path and haven't returned yet,
-  // start building the full path
+  // If no parent node, return just the tag name
   if (!el.parentNode) {
     return `/${el.nodeName.toLowerCase()}`;
   }
@@ -120,9 +83,9 @@ const getElementXPath = (element: Node): string => {
 function generateXPaths(node: Node | null): string[] {
   if (!node) return [];
 
-  const xPath = getElementXPath(node);
+  const fullXPath = getElementXPath(node);
 
-  return [xPath];
+  return [fullXPath];
 }
 
 export function getXpathsById(id: string): string[] | null {

package/src/extractor/web-extractor.ts

@@ -6,6 +6,7 @@ import {
 import type { WebElementInfo } from '../types';
 import type { Point } from '../types';
 import {
+  isAElement,
   isButtonElement,
   isContainerElement,
   isFormElement,
@@ -126,6 +127,16 @@ export function collectElementInfo(
   }
 
   if (isButtonElement(node)) {
+    const rect = mergeElementAndChildrenRects(
+      node,
+      currentWindow,
+      currentDocument,
+      baseZoom,
+      visibleOnly,
+    );
+    if (!rect) {
+      return null;
+    }
     const attributes = getNodeAttributes(node, currentWindow);
     const pseudo = getPseudoElementContent(node, currentWindow);
     const content = node.innerText || pseudo.before || pseudo.after || '';
@@ -218,6 +229,34 @@ export function collectElementInfo(
     return elementInfo;
   }
 
+  if (isAElement(node)) {
+    const attributes = getNodeAttributes(node, currentWindow);
+    const pseudo = getPseudoElementContent(node, currentWindow);
+    const content = node.innerText || pseudo.before || pseudo.after || '';
+    const nodeHashId = midsceneGenerateHash(node, content, rect);
+    const selector = setDataForNode(node, nodeHashId, false, currentWindow);
+    const elementInfo: WebElementInfo = {
+      id: nodeHashId,
+      indexId: indexId++,
+      nodeHashId,
+      nodeType: NodeType.A,
+      locator: selector,
+      attributes: {
+        ...attributes,
+        htmlTagName: tagNameOfNode(node),
+        nodeType: NodeType.A,
+      },
+      content,
+      rect,
+      center: [
+        Math.round(rect.left + rect.width / 2),
+        Math.round(rect.top + rect.height / 2),
+      ],
+      zoom: rect.zoom,
+    };
+    return elementInfo;
+  }
+
   // else, consider as a container
   if (isContainerElement(node)) {
     const attributes = getNodeAttributes(node, currentWindow);
@@ -329,11 +368,12 @@ export function extractTreeNode(
       node: elementInfo,
       children: [],
     };
-    // stop collecting if the node is a Button/Image/Text/FormItem/Container
+    // stop collecting if the node is a Button/Image/Text/A/FormItem/Container
     if (
       elementInfo?.nodeType === NodeType.BUTTON ||
       elementInfo?.nodeType === NodeType.IMG ||
       elementInfo?.nodeType === NodeType.TEXT ||
+      elementInfo?.nodeType === NodeType.A ||
       elementInfo?.nodeType === NodeType.FORM_ITEM ||
       elementInfo?.nodeType === NodeType.CONTAINER
     ) {
@@ -397,3 +437,56 @@ export function extractTreeNode(
     children: topChildren,
   };
 }
+
+export function mergeElementAndChildrenRects(
+  node: Node,
+  currentWindow: typeof window,
+  currentDocument: typeof document,
+  baseZoom = 1,
+  visibleOnly = true,
+) {
+  const selfRect = elementRect(
+    node,
+    currentWindow,
+    currentDocument,
+    baseZoom,
+    visibleOnly,
+  );
+  if (!selfRect) return null;
+
+  let minLeft = selfRect.left;
+  let minTop = selfRect.top;
+  let maxRight = selfRect.left + selfRect.width;
+  let maxBottom = selfRect.top + selfRect.height;
+
+  function traverse(child: Node) {
+    for (let i = 0; i < child.childNodes.length; i++) {
+      const sub = child.childNodes[i];
+      if (sub.nodeType === 1) {
+        const rect = elementRect(
+          sub,
+          currentWindow,
+          currentDocument,
+          baseZoom,
+          visibleOnly,
+        );
+        if (rect) {
+          minLeft = Math.min(minLeft, rect.left);
+          minTop = Math.min(minTop, rect.top);
+          maxRight = Math.max(maxRight, rect.left + rect.width);
+          maxBottom = Math.max(maxBottom, rect.top + rect.height);
+        }
+        traverse(sub);
+      }
+    }
+  }
+  traverse(node);
+
+  return {
+    ...selfRect,
+    left: minLeft,
+    top: minTop,
+    width: maxRight - minLeft,
+    height: maxBottom - minTop,
+  };
+}

package/src/logger.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import util from 'node:util';
 import debug from 'debug';
-import { isNodeEnv, logDir } from './common';
+import { getMidsceneRunSubDir, isNodeEnv } from './common';
 
 const topicPrefix = 'midscene';
 // Map to store file streams
@@ -12,7 +12,10 @@ const logStreams = new Map<string, fs.WriteStream>();
 function getLogStream(topic: string): fs.WriteStream {
   const topicFileName = topic.replace(/:/g, '-');
   if (!logStreams.has(topicFileName)) {
-    const logFile = path.join(logDir, `${topicFileName}.log`);
+    const logFile = path.join(
+      getMidsceneRunSubDir('log'),
+      `${topicFileName}.log`,
+    );
     const stream = fs.createWriteStream(logFile, { flags: 'a' });
     logStreams.set(topicFileName, stream);
   }