chrometools-mcp 3.1.7 → 3.2.6

package/pom/apom-tree-converter.js

@@ -43,6 +43,11 @@ function buildAPOMTree(interactiveOnly = true) {
   // Build tree from body
   result.tree = buildNode(document.body, null, 0, []);
 
+  // Prune empty branches (containers without interactive elements)
+  if (interactiveOnly && result.tree) {
+    result.tree = pruneEmptyBranches(result.tree);
+  }
+
   // Collect radio and checkbox groups for easier agent access
   result.groups = collectInputGroups(result.tree);
 
@@ -102,29 +107,109 @@ function buildAPOMTree(interactiveOnly = true) {
   }
 
   /**
-   * Mark interactive elements and their ancestors
+   * Prune empty branches (containers without interactive elements)
+   * Bottom-up traversal: remove container branches that don't end with interactive leaves
    */
-  function markInteractiveElements(root) {
-    const interactiveTags = new Set([
-      'A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'LABEL', 'FORM'
-    ]);
+  function pruneEmptyBranches(node) {
+    if (!node) return null;
+
+    // Handle compact format containers
+    if (typeof node === 'object' && !node.id && !node.tag) {
+      // Compact format: { "tag_id": [children] }
+      const keys = Object.keys(node);
+      if (keys.length === 1 && Array.isArray(node[keys[0]])) {
+        const key = keys[0];
+        const prunedChildren = node[key]
+          .map(child => pruneEmptyBranches(child))
+          .filter(child => child !== null);
+
+        // If no children left after pruning, remove this container
+        if (prunedChildren.length === 0) {
+          return null;
+        }
+
+        return { [key]: prunedChildren };
+      }
+    }
+
+    // Handle regular format (interactive elements or full-mode containers)
+    if (node.children && Array.isArray(node.children)) {
+      // Prune children recursively
+      node.children = node.children
+        .map(child => pruneEmptyBranches(child))
+        .filter(child => child !== null);
+    }
+
+    // If this is a container (no type = not interactive) with no children, remove it
+    if (!node.type && node.children && node.children.length === 0) {
+      return null;
+    }
 
-    const interactiveRoles = new Set([
-      'button', 'link', 'textbox', 'checkbox', 'radio', 'combobox', 'listbox',
-      'menuitem', 'tab', 'switch', 'slider', 'searchbox'
-    ]);
+    return node;
+  }
+
+  /**
+   * Check if cursor:pointer is explicitly set (not inherited)
+   */
+  function hasCursorPointerExplicit(element) {
+    const computedStyle = window.getComputedStyle(element);
+    if (computedStyle.cursor !== 'pointer') {
+      return false;
+    }
+
+    // Check if cursor is set via inline style
+    if (element.style.cursor === 'pointer') {
+      return true;
+    }
+
+    // Check if cursor is set via CSS class or direct CSS rule (not inherited)
+    // If parent also has cursor:pointer computed, then it's likely inherited
+    const parent = element.parentElement;
+    if (parent) {
+      const parentStyle = window.getComputedStyle(parent);
+      if (parentStyle.cursor === 'pointer') {
+        // Parent has cursor:pointer, so this is inherited
+        return false;
+      }
+    }
+
+    // Element has cursor:pointer but parent doesn't - it's explicitly set
+    return true;
+  }
 
-    // Find all interactive elements
+  /**
+   * Mark interactive elements and their ancestors
+   * NOTE: This function is defined before checkInteractivity,
+   * so we need to inline the checks or move function definitions
+   */
+  function markInteractiveElements(root) {
+    // Find all interactive elements using the same logic as checkInteractivity
     const elements = root.querySelectorAll('*');
     const interactiveList = [];
 
     elements.forEach(el => {
-      const isInteractive =
-        interactiveTags.has(el.tagName) ||
-        interactiveRoles.has(el.getAttribute('role')) ||
+      // Use inline checks (same logic as checkInteractivity)
+      const tag = el.tagName.toLowerCase();
+      const role = el.getAttribute('role');
+
+      const isInteractive = (
+        // Native HTML interactive elements
+        ['a', 'button', 'input', 'select', 'textarea', 'label', 'form'].includes(tag) ||
+        // Interactive ARIA roles
+        (role && ['button', 'link', 'checkbox', 'radio', 'tab', 'menuitem', 'option', 'switch', 'textbox'].includes(role)) ||
+        // onclick attribute
         el.hasAttribute('onclick') ||
-        el.hasAttribute('tabindex') && el.getAttribute('tabindex') !== '-1' ||
-        (el.tagName === 'DIV' && el.getAttribute('contenteditable') === 'true');
+        // onclick property
+        (el.onclick !== null && el.onclick !== undefined) ||
+        // cursor: pointer (only if explicitly set, not inherited)
+        hasCursorPointerExplicit(el) ||
+        // tabindex (except -1)
+        (el.hasAttribute('tabindex') && el.getAttribute('tabindex') !== '-1') ||
+        // contenteditable
+        el.getAttribute('contenteditable') === 'true'
+        // Note: We skip event listener check here for performance
+        // as querySelectorAll can return thousands of elements
+      );
 
       if (isInteractive && isVisible(el)) {
         interactiveList.push(el);
@@ -146,13 +231,26 @@ function buildAPOMTree(interactiveOnly = true) {
 
   /**
    * Check if element is visible
+   * More reliable check that works with position:fixed elements (Angular Material, etc.)
    */
   function isVisible(el) {
-    if (!el.offsetParent && el !== document.body) return false;
+    // Check dimensions first (works for fixed position elements)
+    if (el.offsetWidth === 0 || el.offsetHeight === 0) return false;
+
+    // Check computed styles
     const style = window.getComputedStyle(el);
-    return style.display !== 'none' &&
-           style.visibility !== 'hidden' &&
-           style.opacity !== '0';
+    if (style.display === 'none' ||
+        style.visibility === 'hidden' ||
+        style.opacity === '0') {
+      return false;
+    }
+
+    // For body element, always consider visible if dimensions > 0
+    if (el === document.body) return true;
+
+    // Additional check: element should be in viewport or have offsetParent
+    // This handles elements inside position:fixed containers (Angular Material)
+    return el.offsetParent !== null || style.position === 'fixed' || style.position === 'sticky';
   }
 
   /**
@@ -169,10 +267,17 @@ function buildAPOMTree(interactiveOnly = true) {
       return null;
     }
 
-    // Generate unique ID
+    // Generate unique ID and CSS selector
     const id = generateElementId(element);
+    const selector = generateSelector(element);
     elementIds.set(element, id);
 
+    // Register element in selector resolver (internal only)
+    if (typeof window !== 'undefined' && typeof window.registerElement === 'function') {
+      const tag = element.tagName.toLowerCase();
+      window.registerElement(id, selector, { tag, depth });
+    }
+
     const currentPath = [...path, id];
 
     // Get positioning info
@@ -184,26 +289,47 @@ function buildAPOMTree(interactiveOnly = true) {
     // Build node - minimize non-interactive parents
     const isInteractive = elementType.isInteractive;
 
-    const node = {
-      id,
-      tag: element.tagName.toLowerCase(),
-      selector: generateSelector(element),
-      position,
-      children: []
-    };
+    // Build node structure based on mode
+    let node;
 
-    // Add full info only for interactive elements
     if (isInteractive) {
-      node.type = elementType.type;
-      node.bounds = getBounds(element);
+      // Interactive elements: full structure without selector (unless includeAll)
+      node = {
+        id,
+        tag: element.tagName.toLowerCase(),
+        position,
+        type: elementType.type,
+        children: []
+      };
+
+      // Add selector only in includeAll mode
+      if (!interactiveOnly) {
+        node.selector = selector;
+      }
 
-      // Add metadata based on element type
+      // Add metadata for interactive elements
       if (elementType.metadata) {
         node.metadata = elementType.metadata;
       }
     } else {
-      // For containers (parents), keep it minimal
-      node.type = elementType.type;
+      // Containers: compact format "tag_id": [children] when interactiveOnly
+      // or full format when includeAll
+      if (interactiveOnly) {
+        // Compact format - will be converted after processing children
+        node = {
+          _compact: true,
+          _key: `${element.tagName.toLowerCase()}_${id}`,
+          children: []
+        };
+      } else {
+        // Full format with selector
+        node = {
+          id,
+          tag: element.tagName.toLowerCase(),
+          selector,
+          children: []
+        };
+      }
     }
 
     // Update metadata counters
@@ -231,6 +357,14 @@ function buildAPOMTree(interactiveOnly = true) {
       }
     }
 
+    // Convert compact containers to final format
+    if (node._compact) {
+      // Return compact format: { "tag_id": [children] }
+      const compactNode = {};
+      compactNode[node._key] = node.children;
+      return compactNode;
+    }
+
     return node;
   }
 
@@ -291,6 +425,87 @@ function buildAPOMTree(interactiveOnly = true) {
     };
   }
 
+  /**
+   * Check if element has click event listeners
+   */
+  function hasClickListener(element) {
+    try {
+      // Check for getEventListeners (available in Chrome DevTools context)
+      if (typeof getEventListeners === 'function') {
+        const listeners = getEventListeners(element);
+        return listeners && listeners.click && listeners.click.length > 0;
+      }
+
+      // Fallback: check for common event listener markers
+      // Note: This is not 100% reliable but catches common cases
+      return element._events?.click ||
+             element.__listeners?.click ||
+             element.__eventListeners?.click;
+    } catch (e) {
+      return false;
+    }
+  }
+
+  /**
+   * Check if element is interactive based on various signals
+   */
+  function checkInteractivity(element) {
+    const tag = element.tagName.toLowerCase();
+    const role = element.getAttribute('role');
+
+    // 1. Standard interactive HTML elements
+    const interactiveTags = ['a', 'button', 'input', 'select', 'textarea'];
+    if (interactiveTags.includes(tag)) {
+      return { isInteractive: true, reason: 'native-html' };
+    }
+
+    // 2. Interactive ARIA roles
+    const interactiveRoles = [
+      'button', 'link', 'checkbox', 'radio', 'tab',
+      'menuitem', 'option', 'switch', 'textbox'
+    ];
+    if (role && interactiveRoles.includes(role)) {
+      return { isInteractive: true, reason: 'aria-role' };
+    }
+
+    // 3. Elements with onclick attribute
+    if (element.hasAttribute('onclick')) {
+      return { isInteractive: true, reason: 'onclick-attr' };
+    }
+
+    // 4. Elements with onclick property set via JavaScript
+    if (element.onclick !== null && element.onclick !== undefined) {
+      return { isInteractive: true, reason: 'onclick-prop' };
+    }
+
+    // 5. Elements with cursor: pointer (only if explicitly set, not inherited)
+    if (hasCursorPointerExplicit(element)) {
+      return { isInteractive: true, reason: 'cursor-pointer' };
+    }
+
+    // 6. Elements with click event listeners
+    if (hasClickListener(element)) {
+      return { isInteractive: true, reason: 'event-listener' };
+    }
+
+    // 7. Elements with tabindex (except -1)
+    const tabindex = element.getAttribute('tabindex');
+    if (tabindex !== null && tabindex !== '-1') {
+      return { isInteractive: true, reason: 'tabindex' };
+    }
+
+    // 8. Contenteditable elements
+    if (element.getAttribute('contenteditable') === 'true') {
+      return { isInteractive: true, reason: 'contenteditable' };
+    }
+
+    return { isInteractive: false, reason: null };
+  }
+
+  /**
+   * Detect framework-specific attributes on element
+   * Returns framework info or null
+   */
   /**
    * Determine element type and metadata
    */
@@ -301,14 +516,16 @@ function buildAPOMTree(interactiveOnly = true) {
 
     // Form
     if (tag === 'form') {
+      const metadata = {
+        method: element.method?.toUpperCase() || 'GET',
+        action: element.action || '',
+        name: element.name || null
+      };
+
       return {
         type: 'form',
         isInteractive: true,
-        metadata: {
-          method: element.method?.toUpperCase() || 'GET',
-          action: element.action || '',
-          name: element.name || null
-        }
+        metadata
       };
     }
 
@@ -450,30 +667,58 @@ function buildAPOMTree(interactiveOnly = true) {
 
     // Container with semantic role
     if (role) {
+      const interactivityCheck = checkInteractivity(element);
       return {
         type: role,
-        isInteractive: false,
+        isInteractive: interactivityCheck.isInteractive,
         metadata: {
-          ariaLabel: element.getAttribute('aria-label') || null
+          ariaLabel: element.getAttribute('aria-label') || null,
+          interactivityReason: interactivityCheck.reason || undefined
         }
       };
     }
 
-    // Generic container
+    // Generic container - check for JavaScript interactivity
+    const interactivityCheck = checkInteractivity(element);
     return {
       type: 'container',
-      isInteractive: false,
-      metadata: null
+      isInteractive: interactivityCheck.isInteractive,
+      metadata: interactivityCheck.isInteractive ? {
+        text: element.textContent?.trim().substring(0, 100) || '',
+        interactivityReason: interactivityCheck.reason
+      } : null
     };
   }
 
   /**
    * Generate unique CSS selector
+   * Excludes framework-specific dynamic attributes (React, Vue, Angular)
    */
   function generateSelector(element) {
-    // Use ID if available and unique
-    if (element.id && document.querySelectorAll(`#${element.id}`).length === 1) {
-      return `#${element.id}`;
+    // Use ID if available, valid (not starting with digit), and unique
+    // CSS selectors don't support IDs starting with digits (e.g., #301178 is invalid)
+    if (element.id && !/^[0-9]/.test(element.id)) {
+      try {
+        const selector = `#${CSS.escape(element.id)}`;
+        if (document.querySelectorAll(selector).length === 1) {
+          return selector;
+        }
+      } catch (e) {
+        // Invalid selector, continue to other strategies
+      }
+    }
+
+    // Try to find stable class name (excluding framework-specific dynamic classes)
+    const stableClass = getStableClassName(element);
+    if (stableClass) {
+      const classSelector = `.${stableClass}`;
+      // Verify it's unique within parent context
+      if (element.parentElement) {
+        const matches = element.parentElement.querySelectorAll(classSelector);
+        if (matches.length === 1 && matches[0] === element) {
+          return classSelector;
+        }
+      }
     }
 
     // Build path from parent
@@ -483,6 +728,12 @@ function buildAPOMTree(interactiveOnly = true) {
     while (current && current !== document.body) {
       let selector = current.tagName.toLowerCase();
 
+      // Add stable class if available
+      const stableClass = getStableClassName(current);
+      if (stableClass) {
+        selector += `.${stableClass}`;
+      }
+
       // Add nth-of-type if needed
       if (current.parentElement) {
         const siblings = Array.from(current.parentElement.children).filter(
@@ -500,6 +751,39 @@ function buildAPOMTree(interactiveOnly = true) {
 
     return path.join(' > ');
   }
+
+  /**
+   * Get stable class name excluding framework-specific dynamic classes
+   * Returns first stable class or null
+   */
+  function getStableClassName(element) {
+    if (!element.className || typeof element.className !== 'string') {
+      return null;
+    }
+
+    const classes = element.className.split(/\s+/).filter(c => c);
+
+    // Filter out framework-specific classes
+    const stableClasses = classes.filter(className => {
+      // React: CSS Modules, Styled Components, Emotion
+      if (/^[a-zA-Z0-9_-]+-[a-zA-Z0-9_-]{5,}$/.test(className)) return false;
+      if (/^css-[a-z0-9]+(-[a-z0-9]+)?$/i.test(className)) return false;
+      if (/^sc-[a-z0-9]+-[a-z0-9]+$/i.test(className)) return false;
+
+      // Vue: scoped styles
+      if (/^data-v-[a-f0-9]{8}$/i.test(className)) return false;
+
+      // Angular: component styles (no classes starting with _ng)
+      if (/^_ng/.test(className)) return false;
+
+      // Generic hash patterns
+      if (/^[a-z0-9]{32,}$/i.test(className)) return false;
+
+      return true;
+    });
+
+    return stableClasses.length > 0 ? stableClasses[0] : null;
+  }
 }
 
 // Export for use in both Node.js and browser context