cdp-skill 1.0.8 → 1.0.15

package/src/dom/click-executor.js

@@ -14,13 +14,15 @@
 
 import { createActionabilityChecker } from './actionability.js';
 import { createElementValidator } from './element-validator.js';
+import { createLazyResolver } from './LazyResolver.js';
 import {
   sleep,
   elementNotFoundError,
   getCurrentUrl,
   getElementAtPoint,
   detectNavigation,
-  releaseObject
+  releaseObject,
+  isContextDestroyed
 } from '../utils.js';
 
 /**
@@ -36,8 +38,20 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
   if (!elementLocator) throw new Error('Element locator is required');
   if (!inputEmulator) throw new Error('Input emulator is required');
 
+  const getFrameContext = elementLocator.getFrameContext || null;
   const actionabilityChecker = createActionabilityChecker(session);
   const elementValidator = createElementValidator(session);
+  const lazyResolver = createLazyResolver(session, { getFrameContext });
+
+  /** Build Runtime.evaluate params with frame context when in an iframe. */
+  function frameEvalParams(expression, returnByValue = true) {
+    const params = { expression, returnByValue };
+    if (getFrameContext) {
+      const contextId = getFrameContext();
+      if (contextId) params.contextId = contextId;
+    }
+    return params;
+  }
 
   function calculateVisibleCenter(box, viewport = null) {
     let visibleBox = { ...box };
@@ -58,13 +72,10 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
   }
 
   async function getViewportBounds() {
-    const result = await session.send('Runtime.evaluate', {
-      expression: `({
+    const result = await session.send('Runtime.evaluate', frameEvalParams(`({
         width: window.innerWidth || document.documentElement.clientWidth,
         height: window.innerHeight || document.documentElement.clientHeight
-      })`,
-      returnByValue: true
-    });
+      })`, true));
     return result.result.value;
   }
 
@@ -85,8 +96,7 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
 
     const urlBefore = checkNavigation ? await getCurrentUrl(session) : null;
 
-    const result = await session.send('Runtime.evaluate', {
-      expression: `
+    const detectExpr = `
         (function() {
           return new Promise((resolve) => {
             const timeout = ${timeout};
@@ -142,10 +152,10 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
             }, stableTime);
           });
         })()
-      `,
-      returnByValue: true,
-      awaitPromise: true
-    });
+      `;
+    const detectParams = frameEvalParams(detectExpr, true);
+    detectParams.awaitPromise = true;
+    const result = await session.send('Runtime.evaluate', detectParams);
 
     const changeResult = result.result.value || { type: 'none', changeCount: 0 };
 
@@ -245,10 +255,7 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
       })()
     `;
 
-    const result = await session.send('Runtime.evaluate', {
-      expression,
-      returnByValue: true
-    });
+    const result = await session.send('Runtime.evaluate', frameEvalParams(expression, true));
 
     if (result.exceptionDetails || !result.result.value) {
       return null;
@@ -301,13 +308,125 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
     return { targetReceived: true };
   }
 
+  /**
+   * Browser-side lazy resolution script that always re-resolves refs from metadata.
+   * This eliminates stale element errors by never relying on cached DOM references.
+   */
+  const LAZY_RESOLVE_SCRIPT = `
+    function lazyResolveRef(ref) {
+      const meta = window.__ariaRefMeta && window.__ariaRefMeta.get(ref);
+      if (!meta) return null;
+
+      // Helper: check if candidate matches role+name from metadata
+      function matchesRoleAndName(candidate) {
+        if (!candidate || !candidate.isConnected) return false;
+        if (!meta.role) return true;
+
+        // Get element's role
+        const explicit = candidate.getAttribute('role');
+        let candidateRole = explicit ? explicit.split(/\\s+/)[0] : null;
+        if (!candidateRole) {
+          const tag = candidate.tagName.toUpperCase();
+          const implicitMap = {
+            'A': 'link', 'BUTTON': 'button', 'SELECT': 'combobox', 'TEXTAREA': 'textbox',
+            'H1': 'heading', 'H2': 'heading', 'H3': 'heading', 'H4': 'heading', 'H5': 'heading', 'H6': 'heading',
+            'NAV': 'navigation', 'MAIN': 'main', 'LI': 'listitem', 'OPTION': 'option'
+          };
+          if (tag === 'INPUT') {
+            const type = (candidate.type || 'text').toLowerCase();
+            const typeMap = { 'checkbox': 'checkbox', 'radio': 'radio', 'range': 'slider', 'number': 'spinbutton', 'search': 'searchbox' };
+            candidateRole = typeMap[type] || 'textbox';
+          } else {
+            candidateRole = implicitMap[tag] || null;
+          }
+        }
+
+        const roleMatch = !meta.role || candidateRole === meta.role;
+        if (!roleMatch) return false;
+        if (!meta.name) return true;
+
+        // Check accessible name
+        const candidateName = (
+          candidate.getAttribute('aria-label') ||
+          candidate.getAttribute('title') ||
+          candidate.getAttribute('placeholder') ||
+          (candidate.textContent || '').replace(/\\s+/g, ' ').trim().substring(0, 200) ||
+          ''
+        );
+        return candidateName.toLowerCase().includes(meta.name.toLowerCase().substring(0, 100));
+      }
+
+      // Helper: resolve through shadow DOM
+      function queryShadow(shadowHostPath, selector) {
+        let root = document;
+        for (const hostSel of shadowHostPath) {
+          try {
+            const host = root.querySelector(hostSel);
+            if (!host || !host.shadowRoot) return null;
+            root = host.shadowRoot;
+          } catch (e) { return null; }
+        }
+        try { return root.querySelector(selector); } catch (e) { return null; }
+      }
+
+      // Strategy 1: Try selector (with shadow path if applicable)
+      if (meta.selector) {
+        const hasShadow = meta.shadowHostPath && meta.shadowHostPath.length > 0;
+        const candidate = hasShadow
+          ? queryShadow(meta.shadowHostPath, meta.selector)
+          : document.querySelector(meta.selector);
+        if (matchesRoleAndName(candidate)) return candidate;
+      }
+
+      // Strategy 2: Role+name search
+      if (meta.role) {
+        const ROLE_SELECTORS = {
+          button: 'button, input[type="button"], input[type="submit"], input[type="reset"], [role="button"]',
+          textbox: 'input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea, [role="textbox"]',
+          checkbox: 'input[type="checkbox"], [role="checkbox"]',
+          link: 'a[href], [role="link"]',
+          heading: 'h1, h2, h3, h4, h5, h6, [role="heading"]',
+          combobox: 'select, [role="combobox"]',
+          radio: 'input[type="radio"], [role="radio"]',
+          tab: '[role="tab"]',
+          menuitem: '[role="menuitem"]',
+          option: 'option, [role="option"]',
+          slider: 'input[type="range"], [role="slider"]',
+          spinbutton: 'input[type="number"], [role="spinbutton"]',
+          searchbox: 'input[type="search"], [role="searchbox"]',
+          switch: '[role="switch"]'
+        };
+        const selectorString = ROLE_SELECTORS[meta.role] || '[role="' + meta.role + '"]';
+        const elements = document.querySelectorAll(selectorString);
+        for (const el of elements) {
+          if (matchesRoleAndName(el)) return el;
+        }
+
+        // Strategy 3: Search in shadow roots
+        const shadowHosts = document.querySelectorAll('*');
+        for (const host of shadowHosts) {
+          if (host.shadowRoot) {
+            const els = host.shadowRoot.querySelectorAll(selectorString);
+            for (const el of els) {
+              if (matchesRoleAndName(el)) return el;
+            }
+          }
+        }
+      }
+
+      return null;
+    }
+  `;
+
   async function executeJsClickOnRef(ref) {
-    const result = await session.send('Runtime.evaluate', {
-      expression: `
+    const result = await session.send('Runtime.evaluate', frameEvalParams(`
         (function() {
-          const el = window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(ref)});
+          ${LAZY_RESOLVE_SCRIPT}
+
+          const el = lazyResolveRef(${JSON.stringify(ref)});
+
           if (!el) {
-            return { success: false, reason: 'ref not found in __ariaRefs' };
+            return { success: false, reason: 'ref could not be resolved - element not found' };
           }
           if (!el.isConnected) {
             return { success: false, reason: 'element is no longer attached to DOM' };
@@ -319,9 +438,7 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
           el.click();
           return { success: true };
         })()
-      `,
-      returnByValue: true
-    });
+      `, true));
 
     const value = result.result.value || {};
     if (!value.success) {
@@ -330,42 +447,87 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
   }
 
   async function clickWithVerification(x, y, targetObjectId) {
+    // Use pointerdown for verification instead of click.
+    // React (and similar frameworks) re-render elements between mousedown and click,
+    // destroying the original DOM node and its event listeners. pointerdown fires
+    // synchronously at the start of the interaction, before any re-render.
+    // Also listen on document (capture phase) as a fallback — if the click target
+    // is the element or a descendant, count it as received.
     await session.send('Runtime.callFunctionOn', {
       objectId: targetObjectId,
       functionDeclaration: `function() {
         this.__clickReceived = false;
-        this.__clickHandler = () => { this.__clickReceived = true; };
-        this.addEventListener('click', this.__clickHandler, { once: true });
+        const self = this;
+        this.__ptrHandler = (e) => { self.__clickReceived = true; };
+        this.addEventListener('pointerdown', this.__ptrHandler, { once: true });
+        // Document-level capture fallback: catch clicks that bubble from descendants
+        this.__docHandler = (e) => {
+          if (self.contains(e.target) || e.target === self) {
+            self.__clickReceived = true;
+          }
+        };
+        document.addEventListener('pointerdown', this.__docHandler, { capture: true, once: true });
       }`
     });
 
-    await inputEmulator.click(x, y);
-    await sleep(50);
+    try {
+      await inputEmulator.click(x, y);
+      await sleep(50);
 
-    const verifyResult = await session.send('Runtime.callFunctionOn', {
-      objectId: targetObjectId,
-      functionDeclaration: `function() {
-        this.removeEventListener('click', this.__clickHandler);
-        const received = this.__clickReceived;
-        delete this.__clickReceived;
-        delete this.__clickHandler;
-        return received;
-      }`,
-      returnByValue: true
-    });
+      let verifyResult;
+      try {
+        verifyResult = await session.send('Runtime.callFunctionOn', {
+          objectId: targetObjectId,
+          functionDeclaration: `function() {
+            this.removeEventListener('pointerdown', this.__ptrHandler);
+            document.removeEventListener('pointerdown', this.__docHandler, { capture: true });
+            const received = this.__clickReceived;
+            delete this.__clickReceived;
+            delete this.__ptrHandler;
+            delete this.__docHandler;
+            return received;
+          }`,
+          returnByValue: true
+        });
+      } catch (verifyError) {
+        // Context destroyed during verification means click likely triggered navigation
+        // Treat as successful click with navigation
+        if (isContextDestroyed(null, verifyError)) {
+          return { targetReceived: true, contextDestroyed: true };
+        }
+        throw verifyError;
+      }
 
-    const targetReceived = verifyResult.result.value === true;
-    const result = { targetReceived };
+      const targetReceived = verifyResult.result.value === true;
+      const result = { targetReceived };
 
-    // If click didn't reach target, get interceptor info
-    if (!targetReceived) {
-      const interceptor = await getInterceptorInfo(x, y, targetObjectId);
-      if (interceptor) {
-        result.interceptedBy = interceptor;
+      // If click didn't reach target, get interceptor info
+      if (!targetReceived) {
+        const interceptor = await getInterceptorInfo(x, y, targetObjectId);
+        if (interceptor) {
+          result.interceptedBy = interceptor;
+        }
       }
-    }
 
-    return result;
+      return result;
+    } finally {
+      // Always cleanup event listeners, even if click fails
+      try {
+        await session.send('Runtime.callFunctionOn', {
+          objectId: targetObjectId,
+          functionDeclaration: `function() {
+            this.removeEventListener('pointerdown', this.__ptrHandler);
+            document.removeEventListener('pointerdown', this.__docHandler, { capture: true });
+            delete this.__clickReceived;
+            delete this.__ptrHandler;
+            delete this.__docHandler;
+          }`,
+          returnByValue: true
+        });
+      } catch (cleanupError) {
+        // Ignore cleanup errors (element may be gone)
+      }
+    }
   }
 
   async function addNavigationAndDebugInfo(result, urlBeforeClick, debugData, opts) {
@@ -436,38 +598,60 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
   }
 
   async function clickWithVerificationByRef(ref, x, y) {
-    // Set up click listener on the ref element
-    await session.send('Runtime.evaluate', {
-      expression: `
+    // Use pointerdown for verification instead of click.
+    // React re-renders between mousedown and click, destroying the original DOM node.
+    // pointerdown fires synchronously before any re-render.
+    // Also uses document-level capture as fallback for descendant hits.
+    // LAZY RESOLUTION: Always resolve ref from metadata, never rely on cached element.
+    await session.send('Runtime.evaluate', frameEvalParams(`
         (function() {
-          const el = window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(ref)});
-          if (el) {
+          ${LAZY_RESOLVE_SCRIPT}
+
+          const el = lazyResolveRef(${JSON.stringify(ref)});
+          if (el && el.isConnected) {
+            // Store resolved element for verification phase
+            window.__clickVerifyEl = el;
             el.__clickReceived = false;
-            el.__clickHandler = () => { el.__clickReceived = true; };
-            el.addEventListener('click', el.__clickHandler, { once: true });
+            el.__ptrHandler = () => { el.__clickReceived = true; };
+            el.addEventListener('pointerdown', el.__ptrHandler, { once: true });
+            el.__docHandler = (e) => {
+              if (el.contains(e.target) || e.target === el) {
+                el.__clickReceived = true;
+              }
+            };
+            document.addEventListener('pointerdown', el.__docHandler, { capture: true, once: true });
           }
         })()
-      `
-    });
+      `, false));
 
     await inputEmulator.click(x, y);
     await sleep(50);
 
-    // Check if click was received
-    const verifyResult = await session.send('Runtime.evaluate', {
-      expression: `
-        (function() {
-          const el = window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(ref)});
-          if (!el) return { targetReceived: false, reason: 'element not found' };
-          el.removeEventListener('click', el.__clickHandler);
-          const received = el.__clickReceived;
-          delete el.__clickReceived;
-          delete el.__clickHandler;
-          return { targetReceived: received };
-        })()
-      `,
-      returnByValue: true
-    });
+    // Check if pointerdown was received
+    let verifyResult;
+    try {
+      verifyResult = await session.send('Runtime.evaluate', frameEvalParams(`
+          (function() {
+            const el = window.__clickVerifyEl;
+            delete window.__clickVerifyEl;
+            if (!el) return { targetReceived: false, reason: 'element not found' };
+            if (el.__ptrHandler) el.removeEventListener('pointerdown', el.__ptrHandler);
+            if (el.__docHandler) document.removeEventListener('pointerdown', el.__docHandler, { capture: true });
+            const received = el.__clickReceived;
+            delete el.__clickReceived;
+            delete el.__ptrHandler;
+            delete el.__docHandler;
+            return { targetReceived: received };
+          })()
+        `, true));
+    } catch (verifyError) {
+      // Context destroyed during verification means click likely triggered navigation
+      // Treat as successful click with navigation
+      if (isContextDestroyed(null, verifyError)) {
+        return { targetReceived: true, contextDestroyed: true };
+      }
+      throw verifyError;
+    }
 
     return verifyResult.result.value || { targetReceived: false };
   }
@@ -475,30 +659,124 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
   async function clickByRef(ref, jsClick = false, opts = {}) {
     const { force = false, debug = false, nativeOnly = false, waitForNavigation, navigationTimeout = 100 } = opts;
 
-    if (!ariaSnapshot) {
-      throw new Error('ariaSnapshot is required for ref-based clicks');
-    }
-
-    const refInfo = await ariaSnapshot.getElementByRef(ref);
-    if (!refInfo) {
+    // LAZY RESOLUTION: Always resolve ref from metadata, never rely on cached element
+    // This eliminates stale element errors entirely
+    const resolved = await lazyResolver.resolveRef(ref);
+    if (!resolved) {
       throw elementNotFoundError(`ref:${ref}`, 0);
     }
 
-    if (refInfo.stale) {
-      return {
-        clicked: false,
-        stale: true,
-        warning: `Element ref:${ref} is no longer attached to the DOM. Page content may have changed. Run 'snapshot' again to get fresh refs.`
-      };
-    }
+    // Get visibility info using the resolved element
+    const visibilityResult = await session.send('Runtime.callFunctionOn', {
+      objectId: resolved.objectId,
+      functionDeclaration: `function() {
+        const style = window.getComputedStyle(this);
+        const rect = this.getBoundingClientRect();
+        return {
+          isVisible: style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' && rect.width > 0 && rect.height > 0,
+          box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+        };
+      }`,
+      returnByValue: true
+    });
+
+    const refInfo = {
+      box: visibilityResult.result?.value?.box || resolved.box,
+      isVisible: visibilityResult.result?.value?.isVisible ?? true,
+      resolvedBy: resolved.resolvedBy
+    };
 
     if (!force && refInfo.isVisible === false) {
+      // Special case: hidden radio/checkbox inputs — try to click associated label
+      // LAZY RESOLUTION: Always resolve ref from metadata
+      const labelResult = await session.send('Runtime.evaluate', frameEvalParams(`
+        (function() {
+          ${LAZY_RESOLVE_SCRIPT}
+
+          const el = lazyResolveRef(${JSON.stringify(ref)});
+          if (!el) return { found: false };
+
+          const tag = el.tagName.toUpperCase();
+          const type = (el.type || '').toLowerCase();
+          if (tag === 'INPUT' && (type === 'radio' || type === 'checkbox')) {
+            // Look for associated label
+            let label = null;
+            if (el.id) {
+              label = document.querySelector('label[for="' + el.id + '"]');
+            }
+            if (!label) {
+              label = el.closest('label');
+            }
+
+            if (label) {
+              const rect = label.getBoundingClientRect();
+              const style = window.getComputedStyle(label);
+              const isVisible = style.display !== 'none' &&
+                                style.visibility !== 'hidden' &&
+                                style.opacity !== '0' &&
+                                rect.width > 0 && rect.height > 0;
+
+              if (isVisible) {
+                return {
+                  found: true,
+                  clickedLabel: true,
+                  box: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+                };
+              }
+            }
+          }
+          return { found: false };
+        })()
+      `, true));
+
+      const labelInfo = labelResult.result?.value || { found: false };
+      if (labelInfo.found && labelInfo.clickedLabel) {
+        // Click the label instead
+        const labelCenter = calculateVisibleCenter(labelInfo.box);
+        const urlBefore = await getCurrentUrl(session);
+        await inputEmulator.click(labelCenter.x, labelCenter.y);
+        const urlAfter = await getCurrentUrl(session);
+        const navigated = urlAfter !== urlBefore;
+
+        return {
+          clicked: true,
+          method: 'label-proxy',
+          ref,
+          warning: `Element ref:${ref} is a hidden radio/checkbox input. Clicked associated label instead.`,
+          navigated
+        };
+      }
+
+      // No label found or element isn't radio/checkbox — return original error
       return {
         clicked: false,
         warning: `Element ref:${ref} exists but is not visible. It may be hidden or have zero dimensions.`
       };
     }
 
+    // If element is outside viewport (e.g., inside an unscrolled container), scroll it into view first
+    // LAZY RESOLUTION: Always resolve ref from metadata for scroll
+    const box = refInfo.box;
+    if (box && (box.x < 0 || box.y < 0 || box.x + box.width > 1920 || box.y + box.height > 1080)) {
+      try {
+        await session.send('Runtime.evaluate', frameEvalParams(`
+          (function() {
+            ${LAZY_RESOLVE_SCRIPT}
+            const el = lazyResolveRef(${JSON.stringify(ref)});
+            if (el) el.scrollIntoView({ block: 'center', inline: 'center', behavior: 'instant' });
+          })()
+        `, true));
+        await sleep(100);
+        // Re-fetch element info after scroll using lazy resolution
+        const updatedResult = await lazyResolver.resolveRef(ref);
+        if (updatedResult && updatedResult.box) {
+          refInfo.box = updatedResult.box;
+        }
+      } catch {
+        // Scroll failed — proceed with original coordinates
+      }
+    }
+
     const urlBeforeClick = await getCurrentUrl(session);
 
     const point = calculateVisibleCenter(refInfo.box);
@@ -880,12 +1158,12 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
     const scrollUntilVisible = typeof params === 'object' && params.scrollUntilVisible === true;
     const scrollOptions = typeof params === 'object' ? params.scrollOptions : {};
 
-    // Detect if string selector looks like a versioned ref (s{N}e{M})
-    // This allows {"click": "s1e1"} to work the same as {"click": {"ref": "s1e1"}}
+    // Detect if string selector looks like a versioned ref (f{frameId}s{N}e{M})
+    // This allows {"click": "f0s1e1"} to work the same as {"click": {"ref": "f0s1e1"}}
     if (!ref && selector) {
-      if (/^s\d+e\d+$/.test(selector)) {
+      if (/^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(selector)) {
         ref = selector;
-      } else if (/^ref=s\d+e\d+$/i.test(selector)) {
+      } else if (/^ref=f(\d+|\[[^\]]+\])s\d+e\d+$/i.test(selector)) {
         ref = selector.slice(4); // Remove "ref=" prefix
       }
     }
@@ -916,12 +1194,6 @@ export function createClickExecutor(session, elementLocator, inputEmulator, aria
       if (!scrollResult.found) {
         throw elementNotFoundError(selector, scrollOptions.timeout || 30000);
       }
-      // Release the objectId from scroll search since clickBySelector will find it again
-      if (scrollResult.objectId) {
-        try {
-          await releaseObject(session, scrollResult.objectId);
-        } catch { /* ignore cleanup errors */ }
-      }
       // Element found, now proceed with normal click
       // The scrollUntilVisible already scrolled it into view, so the actionability check should pass
     }