cdp-skill 1.0.7 → 1.0.14

package/src/dom/fill-executor.js

@@ -31,17 +31,59 @@ import {
  * @param {Object} elementLocator - Element locator instance
  * @param {Object} inputEmulator - Input emulator instance
  * @param {Object} [ariaSnapshot] - Optional ARIA snapshot instance
+ * @param {Object} [options] - Configuration options
+ * @param {Function} [options.getFrameContext] - Returns contextId when in a non-main frame
  * @returns {Object} Fill executor interface
  */
-export function createFillExecutor(session, elementLocator, inputEmulator, ariaSnapshot = null) {
+export function createFillExecutor(session, elementLocator, inputEmulator, ariaSnapshot = null, options = {}) {
   if (!session) throw new Error('CDP session is required');
   if (!elementLocator) throw new Error('Element locator is required');
   if (!inputEmulator) throw new Error('Input emulator is required');
 
+  const getFrameContext = options.getFrameContext || null;
   const actionabilityChecker = createActionabilityChecker(session);
   const elementValidator = createElementValidator(session);
   const reactInputFiller = createReactInputFiller(session);
 
+  /**
+   * Build Runtime.evaluate params, injecting contextId when in an iframe.
+   */
+  function evalParams(expression, returnByValue = false) {
+    const params = { expression, returnByValue };
+    if (getFrameContext) {
+      const contextId = getFrameContext();
+      if (contextId) params.contextId = contextId;
+    }
+    return params;
+  }
+
+  /**
+   * Select all and fill with value, handling the empty-string case.
+   * When value is "" and clear is true, presses Delete after selectAll
+   * to actually remove the selected content (insertText("") is a no-op).
+   */
+  async function selectAndFill(value, clear) {
+    if (clear) {
+      await inputEmulator.selectAll();
+    }
+    if (value === '' && clear) {
+      // insertText("") is a no-op in CDP — press Delete to remove selected text
+      await inputEmulator.press('Delete');
+      // Dispatch input/change events so frameworks (React, Vue, etc.) react to the clear
+      await session.send('Runtime.evaluate', evalParams(`
+        (function() {
+          const el = document.activeElement;
+          if (el) {
+            el.dispatchEvent(new Event('input', { bubbles: true, cancelable: true }));
+            el.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+          }
+        })()
+      `, true));
+    } else {
+      await inputEmulator.insertText(String(value));
+    }
+  }
+
   async function fillByRef(ref, value, opts = {}) {
     const { clear = true, react = false } = opts;
 
@@ -62,13 +104,12 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
       throw new Error(`Element ref:${ref} exists but is not visible. It may be hidden or have zero dimensions.`);
     }
 
-    const elementResult = await session.send('Runtime.evaluate', {
-      expression: `(function() {
+    const elementResult = await session.send('Runtime.evaluate',
+      evalParams(`(function() {
         const el = window.__ariaRefs && window.__ariaRefs.get(${JSON.stringify(ref)});
         return el;
-      })()`,
-      returnByValue: false
-    });
+      })()`, false)
+    );
 
     if (!elementResult.result.objectId) {
       throw elementNotFoundError(`ref:${ref}`, 0);
@@ -106,11 +147,7 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
         functionDeclaration: `function() { this.focus(); }`
       });
 
-      if (clear) {
-        await inputEmulator.selectAll();
-      }
-
-      await inputEmulator.insertText(String(value));
+      await selectAndFill(value, clear);
 
       return { filled: true, ref, method: 'insertText' };
     } finally {
@@ -153,11 +190,7 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
         functionDeclaration: `function() { this.focus(); }`
       });
 
-      if (clear) {
-        await inputEmulator.selectAll();
-      }
-
-      await inputEmulator.insertText(String(value));
+      await selectAndFill(value, clear);
 
       return { filled: true, selector, method: 'insertText' };
     } catch (e) {
@@ -277,10 +310,9 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
 
     let result;
     try {
-      result = await session.send('Runtime.evaluate', {
-        expression,
-        returnByValue: false
-      });
+      result = await session.send('Runtime.evaluate',
+        evalParams(expression, false)
+      );
     } catch (error) {
       throw connectionError(error.message, 'Runtime.evaluate (findInputByLabel)');
     }
@@ -383,11 +415,7 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
         functionDeclaration: `function() { this.focus(); }`
       });
 
-      if (clear) {
-        await inputEmulator.selectAll();
-      }
-
-      await inputEmulator.insertText(String(value));
+      await selectAndFill(value, clear);
 
       return { filled: true, label, method: 'insertText', foundBy: foundMethod };
     } catch (e) {
@@ -430,7 +458,7 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
 
   async function executeBatch(params) {
     if (!params || typeof params !== 'object') {
-      throw new Error('fillForm requires an object mapping selectors to values');
+      throw new Error('fill batch requires an object mapping selectors to values');
     }
 
     // Support both formats:
@@ -450,7 +478,7 @@ export function createFillExecutor(session, elementLocator, inputEmulator, ariaS
 
     const entries = Object.entries(fields);
     if (entries.length === 0) {
-      throw new Error('fillForm requires at least one field');
+      throw new Error('fill batch requires at least one field');
     }
 
     const results = [];

package/src/page/dialog-handler.js

@@ -0,0 +1,119 @@
+/**
+ * Dialog Handler Module
+ * Handles JavaScript alerts, confirms, and prompts
+ *
+ * PUBLIC EXPORTS:
+ * - createDialogHandler(session) - Factory for dialog handler
+ *
+ * @module cdp-skill/page/dialog-handler
+ */
+
+/**
+ * Create a dialog handler for JavaScript dialogs
+ * @param {import('../types.js').CDPSession} session - CDP session
+ * @returns {Object} Dialog handler interface
+ */
+export function createDialogHandler(session) {
+  let dialogCallback = null;
+  let boundHandler = null;
+  const responseQueue = [];
+
+  function onDialogOpening(params) {
+    const { type, message, defaultPrompt } = params;
+
+    // Default behavior: accept all dialogs
+    let accept = true;
+    let promptText = undefined;
+
+    // Check if there's a queued response
+    if (responseQueue.length > 0) {
+      const queued = responseQueue.shift();
+      accept = queued.accept !== false;
+      promptText = queued.promptText;
+    } else if (dialogCallback) {
+      // If custom callback is set, use it
+      const result = dialogCallback({ type, message, defaultPrompt });
+      accept = result.accept !== false;
+      promptText = result.promptText;
+    } else {
+      // Auto-accept with reasonable defaults for prompts
+      if (type === 'prompt') {
+        // Use defaultPrompt if available
+        // Otherwise, for test automation purposes, use a reasonable default
+        if (defaultPrompt !== undefined && defaultPrompt.length > 0) {
+          promptText = defaultPrompt;
+        } else if (message && message.toLowerCase().includes('prompt')) {
+          // For prompt dialogs asking for input, use a test value
+          promptText = 'Hello CDP';
+        } else {
+          promptText = '';
+        }
+      }
+    }
+
+    // Handle the dialog
+    session.send('Page.handleJavaScriptDialog', {
+      accept,
+      promptText
+    }).catch(err => {
+      // Ignore errors - dialog may have been already handled
+    });
+  }
+
+  /**
+   * Enable dialog handling
+   * @param {Function} [callback] - Optional callback to customize dialog handling
+   * @returns {Promise<void>}
+   */
+  async function enable(callback = null) {
+    dialogCallback = callback;
+
+    if (!boundHandler) {
+      boundHandler = onDialogOpening;
+      session.on('Page.javascriptDialogOpening', boundHandler);
+    }
+
+    // Enable page domain if not already enabled
+    try {
+      await session.send('Page.enable');
+    } catch (err) {
+      // Ignore if already enabled
+    }
+  }
+
+  /**
+   * Disable dialog handling
+   * @returns {Promise<void>}
+   */
+  async function disable() {
+    if (boundHandler) {
+      session.off('Page.javascriptDialogOpening', boundHandler);
+      boundHandler = null;
+    }
+    dialogCallback = null;
+  }
+
+  /**
+   * Set a custom dialog handler
+   * @param {Function} callback - Callback({type, message, defaultPrompt}) => {accept, promptText}
+   */
+  function setHandler(callback) {
+    dialogCallback = callback;
+  }
+
+  /**
+   * Queue a response for the next dialog
+   * @param {boolean} accept - Whether to accept the dialog
+   * @param {string} [promptText] - Text to enter for prompts
+   */
+  function queueResponse(accept, promptText) {
+    responseQueue.push({ accept, promptText });
+  }
+
+  return {
+    enable,
+    disable,
+    setHandler,
+    queueResponse
+  };
+}

package/src/page/page-controller.js

@@ -21,6 +21,7 @@ import {
 } from '../utils.js';
 
 import { TIMEOUTS } from '../constants.js';
+import { createDialogHandler } from './dialog-handler.js';
 
 const MAX_TIMEOUT = TIMEOUTS.MAX;
 
@@ -39,9 +40,13 @@ export const WaitCondition = Object.freeze({
 /**
  * Create a page controller for navigation and lifecycle events
  * @param {import('../types.js').CDPSession} cdpClient - CDP client with send/on/off methods
+ * @param {Object} [options] - Options
+ * @param {function(Object): void} [options.onFrameChanged] - Called when frame context changes (for persistence)
+ * @param {function(): Object|null} [options.getSavedFrameState] - Returns saved frame state (for restoration)
  * @returns {Object} Page controller interface
  */
-export function createPageController(cdpClient) {
+export function createPageController(cdpClient, options = {}) {
+  const { onFrameChanged, getSavedFrameState } = options;
   let mainFrameId = null;
   let currentFrameId = null;
   let currentExecutionContextId = null;
@@ -54,6 +59,7 @@ export function createPageController(cdpClient) {
   const networkIdleDelay = 500;
   let navigationInProgress = false;
   let currentNavigationAbort = null;
+  const dialogHandler = createDialogHandler(cdpClient);
   let currentNavigationUrl = null;
   let pageCrashed = false;
   const crashWaiters = new Set();
@@ -221,6 +227,54 @@ export function createPageController(cdpClient) {
     });
   }
 
+  /**
+   * Best-effort network settle — waits briefly for network to quiet down.
+   * Unlike waitForNetworkQuiet, this NEVER throws on timeout. It resolves
+   * silently so callers (snapshot, post-navigation) don't fail on sites
+   * with persistent connections or long-polling.
+   *
+   * @param {Object} [options]
+   * @param {number} [options.timeout=2000] - Max time to wait
+   * @param {number} [options.idleTime=300] - Idle window to consider settled
+   * @returns {Promise<{settled: boolean, pendingCount: number}>}
+   */
+  function waitForNetworkSettle(options = {}) {
+    const { timeout = 2000, idleTime = 300 } = options;
+
+    return new Promise((resolve) => {
+      // Already idle long enough?
+      if (pendingRequests.size === 0 && (Date.now() - lastNetworkActivity) >= idleTime) {
+        resolve({ settled: true, pendingCount: 0 });
+        return;
+      }
+
+      let resolved = false;
+      let timeoutId = null;
+      let checkInterval = null;
+
+      const finish = (settled) => {
+        if (resolved) return;
+        resolved = true;
+        if (timeoutId) clearTimeout(timeoutId);
+        if (checkInterval) clearInterval(checkInterval);
+        networkIdleWaiters.delete(waiter);
+        resolve({ settled, pendingCount: pendingRequests.size });
+      };
+
+      const waiter = () => finish(true);
+      networkIdleWaiters.add(waiter);
+
+      timeoutId = setTimeout(() => finish(false), timeout);
+
+      checkInterval = setInterval(() => {
+        if (resolved) { clearInterval(checkInterval); return; }
+        if (pendingRequests.size === 0 && (Date.now() - lastNetworkActivity) >= idleTime) {
+          finish(true);
+        }
+      }, 50);
+    });
+  }
+
   /**
    * Get current network status
    * @returns {{pendingCount: number, totalRequests: number, lastActivity: number, isIdle: boolean}}
@@ -360,6 +414,9 @@ export function createPageController(cdpClient) {
       cdpClient.send('Inspector.enable')
     ]);
 
+    // Enable dialog handling for JavaScript alerts, confirms, and prompts
+    await dialogHandler.enable();
+
     const { frameTree } = await cdpClient.send('Page.getFrameTree');
     mainFrameId = frameTree.frame.id;
     currentFrameId = mainFrameId;
@@ -388,6 +445,56 @@ export function createPageController(cdpClient) {
     addListener('Network.loadingFinished', onRequestFinished);
     addListener('Network.loadingFailed', onRequestFinished);
     addListener('Inspector.targetCrashed', onTargetCrashed);
+
+    // Restore persisted frame context from a previous CLI invocation
+    if (getSavedFrameState) {
+      const saved = getSavedFrameState();
+      if (saved && saved.frameId && saved.frameId !== mainFrameId) {
+        // Verify the saved frame still exists in the frame tree
+        function findAllFrames(node) {
+          const frames = [node];
+          if (node.childFrames) {
+            for (const child of node.childFrames) {
+              frames.push(...findAllFrames(child));
+            }
+          }
+          return frames;
+        }
+        const allFrames = findAllFrames(frameTree);
+        const savedFrame = allFrames.find(f => f.frame.id === saved.frameId);
+
+        if (savedFrame) {
+          currentFrameId = saved.frameId;
+          // Try to use the saved contextId if it's still in our context map
+          const knownContextId = frameExecutionContexts.get(saved.frameId);
+          if (knownContextId) {
+            currentExecutionContextId = knownContextId;
+          } else {
+            // Create a fresh isolated world for this frame
+            try {
+              const { executionContextId } = await cdpClient.send('Page.createIsolatedWorld', {
+                frameId: saved.frameId,
+                worldName: 'cdp-automation'
+              });
+              currentExecutionContextId = executionContextId;
+              frameExecutionContexts.set(saved.frameId, executionContextId);
+            } catch {
+              // Frame context restoration failed — fall back to main frame
+              currentFrameId = mainFrameId;
+              currentExecutionContextId = frameExecutionContexts.get(mainFrameId) || null;
+              if (onFrameChanged) {
+                onFrameChanged({ frameId: null, contextId: null });
+              }
+            }
+          }
+        } else {
+          // Frame no longer exists — clear stale state
+          if (onFrameChanged) {
+            onFrameChanged({ frameId: null, contextId: null });
+          }
+        }
+      }
+    }
   }
 
   /**
@@ -670,7 +777,13 @@ export function createPageController(cdpClient) {
   }
 
   /**
-   * Get frame tree with all iframes
+   * Get frame tree with all iframes, including cross-origin ones.
+   *
+   * Page.getFrameTree only returns same-origin frames. Cross-origin iframes
+   * live in separate renderer processes and are invisible to that API.
+   * We supplement the CDP tree by querying the DOM for all <iframe> elements
+   * and merging any that aren't already represented.
+   *
    * @returns {Promise<{mainFrameId: string, currentFrameId: string, frames: Array}>}
    */
   async function getFrameTree() {
@@ -694,10 +807,60 @@ export function createPageController(cdpClient) {
       return frames;
     }
 
+    const frames = flattenFrames(frameTree);
+
+    // Discover cross-origin iframes via DOM query
+    try {
+      const domResult = await cdpClient.send('Runtime.evaluate', {
+        expression: `
+          (function() {
+            const iframes = document.querySelectorAll('iframe');
+            return Array.from(iframes).map(function(el, i) {
+              var src = el.src || el.getAttribute('src') || '';
+              var name = el.name || el.id || '';
+              var crossOrigin = false;
+              try { var _d = el.contentDocument; } catch(e) { crossOrigin = true; }
+              if (!el.contentDocument) crossOrigin = true;
+              return { index: i, src: src, name: name, crossOrigin: crossOrigin };
+            });
+          })()
+        `,
+        returnByValue: true
+      });
+
+      const domIframes = domResult.result?.value;
+      if (Array.isArray(domIframes)) {
+        for (const iframe of domIframes) {
+          if (!iframe.crossOrigin) continue;
+
+          // Check if this iframe is already in the CDP frame tree
+          const alreadyListed = frames.some(f =>
+            f.parentId && (
+              (iframe.src && f.url === iframe.src) ||
+              (iframe.name && f.name === iframe.name)
+            )
+          );
+
+          if (!alreadyListed) {
+            frames.push({
+              frameId: `cross-origin-${iframe.index}`,
+              url: iframe.src || 'about:blank',
+              name: iframe.name || null,
+              parentId: mainFrameId,
+              depth: 1,
+              crossOrigin: true
+            });
+          }
+        }
+      }
+    } catch {
+      // DOM query failed — return CDP-only tree
+    }
+
     return {
       mainFrameId,
       currentFrameId,
-      frames: flattenFrames(frameTree)
+      frames
     };
   }
 
@@ -830,6 +993,11 @@ export function createPageController(cdpClient) {
       result.warning = warning;
     }
 
+    // Persist frame state across CLI invocations
+    if (onFrameChanged) {
+      onFrameChanged({ frameId: currentFrameId, contextId: currentExecutionContextId });
+    }
+
     return result;
   }
 
@@ -841,6 +1009,11 @@ export function createPageController(cdpClient) {
     currentFrameId = mainFrameId;
     currentExecutionContextId = frameExecutionContexts.get(mainFrameId) || null;
 
+    // Clear persisted frame state (back to main)
+    if (onFrameChanged) {
+      onFrameChanged({ frameId: null, contextId: null });
+    }
+
     const { frameTree } = await cdpClient.send('Page.getFrameTree');
 
     return {
@@ -850,6 +1023,18 @@ export function createPageController(cdpClient) {
     };
   }
 
+  /**
+   * Get the current frame execution context ID (if in a non-main frame).
+   * Used for dependency injection into modules that need frame-aware evaluation.
+   * @returns {number|null} contextId for current frame, or null if in main frame
+   */
+  function getFrameContext() {
+    if (currentFrameId !== mainFrameId && currentExecutionContextId) {
+      return currentExecutionContextId;
+    }
+    return null;
+  }
+
   /**
    * Execute code in the current frame context
    * @param {string} expression - JavaScript expression
@@ -1106,8 +1291,10 @@ export function createPageController(cdpClient) {
     waitForNavigationEvent,
     withNavigation,
     waitForNetworkQuiet,
+    waitForNetworkSettle,
     getNetworkStatus,
     searchAllFrames,
+    getFrameContext,
     dispose,
     get mainFrameId() { return mainFrameId; },
     get currentFrameId() { return currentFrameId; },