cdp-skill 1.0.8 → 1.0.15

package/src/runner/execute-interaction.js

@@ -70,19 +70,46 @@ export async function clickWithVerification(elementLocator, inputEmulator, x, y,
  * Feature 13: Supports captureResult to detect new visible elements after hover
  */
 export async function executeHover(elementLocator, inputEmulator, ariaSnapshot, params) {
-  const selector = typeof params === 'string' ? params : params.selector;
+  const selector = typeof params === 'string' ? params : (params.selector || null);
   let ref = typeof params === 'object' ? params.ref : null;
+  const text = typeof params === 'object' ? params.text : null;
   const duration = typeof params === 'object' ? (params.duration || 0) : 0;
 
-  // Detect if string selector looks like a ref (e.g., "s1e1", "s2e12")
-  // This allows {"hover": "s1e1"} to work the same as {"hover": {"ref": "s1e1"}}
-  if (!ref && selector && /^s\d+e\d+$/.test(selector)) {
+  // Detect if string selector looks like a ref (e.g., "f0s1e1", "f[frame-top]s2e12")
+  // This allows {"hover": "f0s1e1"} to work the same as {"hover": {"ref": "f0s1e1"}}
+  if (!ref && selector && /^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(selector)) {
     ref = selector;
   }
   const force = typeof params === 'object' && params.force === true;
-  const timeout = typeof params === 'object' ? (params.timeout || 10000) : 10000; // Reduced from 30s to 10s
+  const timeout = typeof params === 'object' ? (params.timeout || 10000) : 10000;
   const captureResult = typeof params === 'object' && params.captureResult === true;
 
+  // Handle coordinate-based hover
+  if (typeof params === 'object' && typeof params.x === 'number' && typeof params.y === 'number' && !ref && !selector && !text) {
+    await inputEmulator.hover(params.x, params.y, { duration });
+    if (captureResult) {
+      await sleep(100);
+      return await captureHoverResult(elementLocator.session, []);
+    }
+    return { hovered: true };
+  }
+
+  // Handle text-based hover
+  if (text && ariaSnapshot) {
+    const refInfo = await ariaSnapshot.findByText(text);
+    if (!refInfo) {
+      throw elementNotFoundError(`text:${text}`, 0);
+    }
+    const x = refInfo.box.x + refInfo.box.width / 2;
+    const y = refInfo.box.y + refInfo.box.height / 2;
+    await inputEmulator.hover(x, y, { duration });
+    if (captureResult) {
+      await sleep(100);
+      return await captureHoverResult(elementLocator.session, []);
+    }
+    return { hovered: true };
+  }
+
   const session = elementLocator.session;
   let visibleElementsBefore = [];
 
@@ -285,7 +312,7 @@ export async function captureHoverResult(session, visibleBefore) {
  * @returns {Promise<Object>} Drag result
  */
 export async function executeDrag(elementLocator, inputEmulator, pageController, ariaSnapshot, params) {
-  const { source, target, steps = 10, delay = 0 } = params;
+  const { source, target, steps = 10, delay = 0, method = 'auto' } = params;
   const session = elementLocator.session;
 
   // Helper to get element bounding box by ref
@@ -305,8 +332,6 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
 
   // Helper to get element bounding box in current frame context
   async function getElementBox(selector) {
-    // Use page controller's frame context if available
-    const contextId = pageController.currentExecutionContextId;
     const evalParams = {
       expression: `
         (function() {
@@ -319,10 +344,8 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
       returnByValue: true
     };
 
-    // Add context ID if we're in a non-main frame
-    if (contextId && pageController.currentFrameId !== pageController.mainFrameId) {
-      evalParams.contextId = contextId;
-    }
+    const contextId = pageController.getFrameContext();
+    if (contextId) evalParams.contextId = contextId;
 
     const result = await session.send('Runtime.evaluate', evalParams);
     if (result.exceptionDetails) {
@@ -360,8 +383,8 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
     // String - could be selector or ref
     const selectorOrRef = spec;
 
-    // Check if it looks like a ref (e.g., "s1e1", "s2e12")
-    if (/^s\d+e\d+$/.test(selectorOrRef)) {
+    // Check if it looks like a ref (e.g., "f0s1e1", "f[frame-top]s2e12")
+    if (/^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(selectorOrRef)) {
       const box = await getRefBox(selectorOrRef);
       return { ...box, offsetX: 0, offsetY: 0 };
     }
@@ -377,7 +400,7 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
   // Helper to resolve selector string for JS execution
   function getSelectorExpression(spec) {
     if (typeof spec === 'string') {
-      if (/^s\d+e\d+$/.test(spec)) {
+      if (/^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(spec)) {
         return `window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(spec)})`;
       }
       return `document.querySelector(${JSON.stringify(spec)})`;
@@ -415,10 +438,10 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
         const targetX = ${targetX};
         const targetY = ${targetY};
         const steps = ${steps};
+        const method = ${JSON.stringify(method)};
 
         // Check if source is an input[type=range] (slider)
         if (sourceEl && sourceEl.tagName === 'INPUT' && sourceEl.type === 'range') {
-          // For range inputs, calculate the value based on target position
           const rect = sourceEl.getBoundingClientRect();
           const percent = Math.max(0, Math.min(1, (targetX - rect.left) / rect.width));
           const min = parseFloat(sourceEl.min) || 0;
@@ -430,130 +453,86 @@ export async function executeDrag(elementLocator, inputEmulator, pageController,
           return { success: true, method: 'range-input', value: newValue };
         }
 
-        // Try HTML5 Drag and Drop API first
-        if (sourceEl && targetEl) {
+        function doMouseDrag() {
+          const sourceElAtPoint = sourceEl || document.elementFromPoint(sourceX, sourceY);
+          if (!sourceElAtPoint) {
+            return { success: false, error: 'No element at source coordinates' };
+          }
+
+          sourceElAtPoint.dispatchEvent(new MouseEvent('mousedown', {
+            bubbles: true, cancelable: true,
+            clientX: sourceX, clientY: sourceY, button: 0, buttons: 1
+          }));
+
+          const deltaX = (targetX - sourceX) / steps;
+          const deltaY = (targetY - sourceY) / steps;
+
+          for (let i = 1; i <= steps; i++) {
+            const currentX = sourceX + deltaX * i;
+            const currentY = sourceY + deltaY * i;
+            const elAtPoint = document.elementFromPoint(currentX, currentY) || sourceElAtPoint;
+            elAtPoint.dispatchEvent(new MouseEvent('mousemove', {
+              bubbles: true, cancelable: true,
+              clientX: currentX, clientY: currentY, button: 0, buttons: 1
+            }));
+          }
+
+          const targetElAtPoint = document.elementFromPoint(targetX, targetY) || sourceElAtPoint;
+          targetElAtPoint.dispatchEvent(new MouseEvent('mouseup', {
+            bubbles: true, cancelable: true,
+            clientX: targetX, clientY: targetY, button: 0, buttons: 0
+          }));
+
+          return { success: true, method: 'mouse-events' };
+        }
+
+        function doHtml5Drag() {
+          if (!sourceEl || !targetEl) {
+            return { success: false, error: 'HTML5 DnD requires both source and target elements' };
+          }
           try {
-            // Create DataTransfer object
             const dataTransfer = new DataTransfer();
             dataTransfer.effectAllowed = 'all';
             dataTransfer.dropEffect = 'move';
 
-            // Dispatch dragstart on source
-            const dragStartEvent = new DragEvent('dragstart', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: sourceX,
-              clientY: sourceY
-            });
-            sourceEl.dispatchEvent(dragStartEvent);
-
-            // Dispatch drag on source
-            const dragEvent = new DragEvent('drag', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: sourceX,
-              clientY: sourceY
-            });
-            sourceEl.dispatchEvent(dragEvent);
-
-            // Dispatch dragenter on target
-            const dragEnterEvent = new DragEvent('dragenter', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: targetX,
-              clientY: targetY
-            });
-            targetEl.dispatchEvent(dragEnterEvent);
-
-            // Dispatch dragover on target
-            const dragOverEvent = new DragEvent('dragover', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: targetX,
-              clientY: targetY
-            });
-            targetEl.dispatchEvent(dragOverEvent);
-
-            // Dispatch drop on target
-            const dropEvent = new DragEvent('drop', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: targetX,
-              clientY: targetY
-            });
-            targetEl.dispatchEvent(dropEvent);
-
-            // Dispatch dragend on source
-            const dragEndEvent = new DragEvent('dragend', {
-              bubbles: true,
-              cancelable: true,
-              dataTransfer: dataTransfer,
-              clientX: targetX,
-              clientY: targetY
-            });
-            sourceEl.dispatchEvent(dragEndEvent);
+            sourceEl.dispatchEvent(new DragEvent('dragstart', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: sourceX, clientY: sourceY
+            }));
+            sourceEl.dispatchEvent(new DragEvent('drag', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: sourceX, clientY: sourceY
+            }));
+            targetEl.dispatchEvent(new DragEvent('dragenter', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: targetX, clientY: targetY
+            }));
+            targetEl.dispatchEvent(new DragEvent('dragover', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: targetX, clientY: targetY
+            }));
+            targetEl.dispatchEvent(new DragEvent('drop', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: targetX, clientY: targetY
+            }));
+            sourceEl.dispatchEvent(new DragEvent('dragend', {
+              bubbles: true, cancelable: true, dataTransfer, clientX: targetX, clientY: targetY
+            }));
 
             return { success: true, method: 'html5-dnd' };
           } catch (e) {
-            // Fall through to mouse events
+            return { success: false, error: e.message };
           }
         }
 
-        // Fallback: Mouse event simulation for non-DnD dragging (e.g., sortable lists, custom drag)
-        const sourceElAtPoint = sourceEl || document.elementFromPoint(sourceX, sourceY);
-        if (!sourceElAtPoint) {
-          return { success: false, error: 'No element at source coordinates' };
-        }
+        if (method === 'mouse') return doMouseDrag();
+        if (method === 'html5') return doHtml5Drag();
+
+        // auto: try mouse first (works for jQuery UI, sortable lists), then HTML5 DnD
+        const mouseResult = doMouseDrag();
+        if (mouseResult.success) return mouseResult;
 
-        // Dispatch mouse events
-        const mouseDown = new MouseEvent('mousedown', {
-          bubbles: true,
-          cancelable: true,
-          clientX: sourceX,
-          clientY: sourceY,
-          button: 0,
-          buttons: 1
-        });
-        sourceElAtPoint.dispatchEvent(mouseDown);
-
-        // Move in steps
-        const deltaX = (targetX - sourceX) / steps;
-        const deltaY = (targetY - sourceY) / steps;
-
-        for (let i = 1; i <= steps; i++) {
-          const currentX = sourceX + deltaX * i;
-          const currentY = sourceY + deltaY * i;
-          const elAtPoint = document.elementFromPoint(currentX, currentY) || sourceElAtPoint;
-
-          const mouseMove = new MouseEvent('mousemove', {
-            bubbles: true,
-            cancelable: true,
-            clientX: currentX,
-            clientY: currentY,
-            button: 0,
-            buttons: 1
-          });
-          elAtPoint.dispatchEvent(mouseMove);
+        if (sourceEl && targetEl) {
+          const html5Result = doHtml5Drag();
+          if (html5Result.success) return html5Result;
         }
 
-        // Release at target
-        const targetElAtPoint = document.elementFromPoint(targetX, targetY) || sourceElAtPoint;
-        const mouseUp = new MouseEvent('mouseup', {
-          bubbles: true,
-          cancelable: true,
-          clientX: targetX,
-          clientY: targetY,
-          button: 0,
-          buttons: 0
-        });
-        targetElAtPoint.dispatchEvent(mouseUp);
-
-        return { success: true, method: 'mouse-events' };
+        return mouseResult;
       })()
     `,
     returnByValue: true,

package/src/runner/execute-navigation.js

@@ -95,44 +95,34 @@ export async function executeScroll(elementLocator, inputEmulator, pageControlle
       throw new Error(`Element ref:${ref} is no longer attached to the DOM. Run 'snapshot' again to get fresh refs.`);
     }
     // Scroll to element using its coordinates
-    await pageController.session.send('Runtime.evaluate', {
-      expression: `
+    await pageController.evaluateInFrame(`
         (function() {
           const el = window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(ref)});
           if (el && el.scrollIntoView) {
             el.scrollIntoView({ block: 'center', behavior: 'smooth' });
           }
         })()
-      `
-    });
+      `);
   }
 
   if (typeof params === 'string') {
     // Direction-based scroll
     switch (params) {
       case 'top':
-        await pageController.session.send('Runtime.evaluate', {
-          expression: 'window.scrollTo(0, 0)'
-        });
+        await pageController.evaluateInFrame('window.scrollTo(0, 0)');
         break;
       case 'bottom':
-        await pageController.session.send('Runtime.evaluate', {
-          expression: 'window.scrollTo(0, document.body.scrollHeight)'
-        });
+        await pageController.evaluateInFrame('window.scrollTo(0, document.body.scrollHeight)');
         break;
       case 'up':
-        await pageController.session.send('Runtime.evaluate', {
-          expression: 'window.scrollBy(0, -300)'
-        });
+        await pageController.evaluateInFrame('window.scrollBy(0, -300)');
         break;
       case 'down':
-        await pageController.session.send('Runtime.evaluate', {
-          expression: 'window.scrollBy(0, 300)'
-        });
+        await pageController.evaluateInFrame('window.scrollBy(0, 300)');
         break;
       default:
-        // Check if it looks like a ref (e.g., "s1e1", "s2e12")
-        if (/^s\d+e\d+$/.test(params)) {
+        // Check if it looks like a ref (e.g., "f0s1e1", "f[frame-top]s2e12")
+        if (/^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(params)) {
           await scrollToRef(params);
         } else {
           // Treat as selector - scroll element into view
@@ -146,7 +136,7 @@ export async function executeScroll(elementLocator, inputEmulator, pageControlle
     }
   } else if (params && typeof params === 'object') {
     // Check for ref first
-    const ref = params.ref || (params.selector && /^s\d+e\d+$/.test(params.selector) ? params.selector : null);
+    const ref = params.ref || (params.selector && /^f(\d+|\[[^\]]+\])s\d+e\d+$/.test(params.selector) ? params.selector : null);
     if (ref) {
       await scrollToRef(ref);
     } else if (params.selector) {
@@ -159,22 +149,17 @@ export async function executeScroll(elementLocator, inputEmulator, pageControlle
       await el.dispose();
     } else if (params.deltaY !== undefined || params.deltaX !== undefined) {
       // Scroll by delta using JavaScript (more reliable than CDP mouse wheel events)
-      await pageController.session.send('Runtime.evaluate', {
-        expression: `window.scrollBy(${params.deltaX || 0}, ${params.deltaY || 0})`
-      });
+      await pageController.evaluateInFrame(`window.scrollBy(${params.deltaX || 0}, ${params.deltaY || 0})`);
     } else if (params.y !== undefined) {
       // Scroll to position
-      await pageController.session.send('Runtime.evaluate', {
-        expression: `window.scrollTo(${params.x || 0}, ${params.y})`
-      });
+      await pageController.evaluateInFrame(`window.scrollTo(${params.x || 0}, ${params.y})`);
     }
   }
 
   // Return current scroll position
-  const posResult = await pageController.session.send('Runtime.evaluate', {
-    expression: '({ scrollX: window.scrollX, scrollY: window.scrollY })',
-    returnByValue: true
-  });
+  const posResult = await pageController.evaluateInFrame(
+    '({ scrollX: window.scrollX, scrollY: window.scrollY })'
+  );
 
   return posResult.result.value;
 }

package/src/runner/execute-query.js

@@ -133,10 +133,11 @@ export async function executeGetDom(pageController, params) {
         };
       })()`;
 
-  const result = await session.send('Runtime.evaluate', {
-    expression,
-    returnByValue: true
-  });
+  const evalArgs = { expression, returnByValue: true };
+  const contextId = pageController.getFrameContext();
+  if (contextId) evalArgs.contextId = contextId;
+
+  const result = await session.send('Runtime.evaluate', evalArgs);
 
   if (result.exceptionDetails) {
     throw new Error(`getDom error: ${result.exceptionDetails.text}`);
@@ -327,9 +328,10 @@ export async function executeRefAt(session, params) {
         }
       }
 
-      // Create new versioned ref: s{snapshotId}e{counter}
+      // Create new versioned ref: f{frameId}s{snapshotId}e{counter}
       window.__ariaRefCounter++;
-      const ref = 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
+      const frameId = window.__ariaFrameIdentifier || 'f0';
+      const ref = frameId + 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
       window.__ariaRefs.set(ref, el);
 
       const rect = el.getBoundingClientRect();
@@ -395,9 +397,10 @@ export async function executeElementsAt(session, coords) {
           }
         }
 
-        // Create new versioned ref: s{snapshotId}e{counter}
+        // Create new versioned ref: f{frameId}s{snapshotId}e{counter}
         window.__ariaRefCounter++;
-        const ref = 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
+        const frameId = window.__ariaFrameIdentifier || 'f0';
+        const ref = frameId + 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
         window.__ariaRefs.set(ref, el);
         return { ref, existing: false };
       }
@@ -539,9 +542,10 @@ export async function executeElementsNear(session, params) {
           }
         }
 
-        // Create new versioned ref: s{snapshotId}e{counter}
+        // Create new versioned ref: f{frameId}s{snapshotId}e{counter}
         window.__ariaRefCounter++;
-        const ref = 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
+        const frameId = window.__ariaFrameIdentifier || 'f0';
+        const ref = frameId + 's' + window.__ariaSnapshotId + 'e' + window.__ariaRefCounter;
         window.__ariaRefs.set(ref, el);
         return { ref, existing: false };
       }
@@ -746,7 +750,9 @@ export async function executeQuery(elementLocator, params) {
  */
 
 export async function executeRoleQuery(elementLocator, params) {
-  const roleQueryExecutor = createRoleQueryExecutor(elementLocator.session, elementLocator);
+  const roleQueryExecutor = createRoleQueryExecutor(elementLocator.session, elementLocator, {
+    getFrameContext: elementLocator.getFrameContext
+  });
   return roleQueryExecutor.execute(params);
 }