chrome-cdp-cli 1.2.2 → 1.3.0

package/dist/handlers/WaitForHandler.js

@@ -0,0 +1,331 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WaitForHandler = void 0;
+class WaitForHandler {
+    constructor() {
+        this.name = 'wait_for';
+    }
+    async execute(client, args) {
+        const waitArgs = args;
+        if (!waitArgs.selector) {
+            return {
+                success: false,
+                error: 'CSS selector is required for wait_for command'
+            };
+        }
+        if (typeof waitArgs.selector !== 'string') {
+            return {
+                success: false,
+                error: 'CSS selector must be a string'
+            };
+        }
+        try {
+            await client.send('Runtime.enable');
+            const timeout = waitArgs.timeout || 10000;
+            const condition = waitArgs.condition || (waitArgs.visible ? 'visible' : 'exists');
+            const pollInterval = waitArgs.pollInterval || 100;
+            const result = await this.waitForCondition(client, waitArgs.selector, condition, timeout, pollInterval);
+            return result;
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+    async waitForCondition(client, selector, condition, timeout, pollInterval) {
+        const startTime = Date.now();
+        let lastError = null;
+        while (Date.now() - startTime < timeout) {
+            try {
+                const checkResult = await this.checkCondition(client, selector, condition);
+                if (checkResult.success && checkResult.data) {
+                    return {
+                        success: true,
+                        data: {
+                            selector: selector,
+                            condition: condition,
+                            waitTime: Date.now() - startTime,
+                            element: checkResult.data
+                        }
+                    };
+                }
+                lastError = checkResult.error || 'Condition not met';
+                await new Promise(resolve => setTimeout(resolve, pollInterval));
+            }
+            catch (error) {
+                lastError = error instanceof Error ? error.message : String(error);
+                await new Promise(resolve => setTimeout(resolve, pollInterval));
+            }
+        }
+        return {
+            success: false,
+            error: `Timeout after ${timeout}ms waiting for element "${selector}" to be ${condition}. Last error: ${lastError}`
+        };
+    }
+    async checkCondition(client, selector, condition) {
+        try {
+            const escapedSelector = selector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            let expression;
+            switch (condition) {
+                case 'exists':
+                    expression = `
+            (function() {
+              const element = document.querySelector('${escapedSelector}');
+              if (element) {
+                return {
+                  success: true,
+                  tagName: element.tagName,
+                  id: element.id,
+                  className: element.className,
+                  condition: 'exists'
+                };
+              }
+              return { success: false, error: 'Element does not exist' };
+            })()
+          `;
+                    break;
+                case 'visible':
+                    expression = `
+            (function() {
+              const element = document.querySelector('${escapedSelector}');
+              if (!element) {
+                return { success: false, error: 'Element does not exist' };
+              }
+              
+              // Check if element is visible
+              const rect = element.getBoundingClientRect();
+              const style = window.getComputedStyle(element);
+              
+              const isVisible = (
+                rect.width > 0 && 
+                rect.height > 0 && 
+                style.visibility !== 'hidden' && 
+                style.display !== 'none' &&
+                style.opacity !== '0'
+              );
+              
+              if (isVisible) {
+                return {
+                  success: true,
+                  tagName: element.tagName,
+                  id: element.id,
+                  className: element.className,
+                  condition: 'visible',
+                  rect: { width: rect.width, height: rect.height, x: rect.x, y: rect.y }
+                };
+              }
+              
+              return { success: false, error: 'Element exists but is not visible' };
+            })()
+          `;
+                    break;
+                case 'hidden':
+                    expression = `
+            (function() {
+              const element = document.querySelector('${escapedSelector}');
+              if (!element) {
+                return {
+                  success: true,
+                  condition: 'hidden',
+                  reason: 'Element does not exist (considered hidden)'
+                };
+              }
+              
+              // Check if element is hidden
+              const rect = element.getBoundingClientRect();
+              const style = window.getComputedStyle(element);
+              
+              const isHidden = (
+                rect.width === 0 || 
+                rect.height === 0 || 
+                style.visibility === 'hidden' || 
+                style.display === 'none' ||
+                style.opacity === '0'
+              );
+              
+              if (isHidden) {
+                return {
+                  success: true,
+                  tagName: element.tagName,
+                  id: element.id,
+                  className: element.className,
+                  condition: 'hidden'
+                };
+              }
+              
+              return { success: false, error: 'Element exists and is visible' };
+            })()
+          `;
+                    break;
+                case 'enabled':
+                    expression = `
+            (function() {
+              const element = document.querySelector('${escapedSelector}');
+              if (!element) {
+                return { success: false, error: 'Element does not exist' };
+              }
+              
+              // Check if element is enabled (not disabled)
+              const isEnabled = !element.disabled && !element.hasAttribute('disabled');
+              
+              if (isEnabled) {
+                return {
+                  success: true,
+                  tagName: element.tagName,
+                  id: element.id,
+                  className: element.className,
+                  condition: 'enabled',
+                  disabled: element.disabled
+                };
+              }
+              
+              return { success: false, error: 'Element exists but is disabled' };
+            })()
+          `;
+                    break;
+                case 'disabled':
+                    expression = `
+            (function() {
+              const element = document.querySelector('${escapedSelector}');
+              if (!element) {
+                return { success: false, error: 'Element does not exist' };
+              }
+              
+              // Check if element is disabled
+              const isDisabled = element.disabled || element.hasAttribute('disabled');
+              
+              if (isDisabled) {
+                return {
+                  success: true,
+                  tagName: element.tagName,
+                  id: element.id,
+                  className: element.className,
+                  condition: 'disabled',
+                  disabled: element.disabled
+                };
+              }
+              
+              return { success: false, error: 'Element exists but is enabled' };
+            })()
+          `;
+                    break;
+                default:
+                    return {
+                        success: false,
+                        error: `Unknown condition: ${condition}. Supported conditions: exists, visible, hidden, enabled, disabled`
+                    };
+            }
+            const response = await client.send('Runtime.evaluate', {
+                expression: expression,
+                returnByValue: true
+            });
+            if (response.exceptionDetails) {
+                return {
+                    success: false,
+                    error: response.exceptionDetails.exception?.description || response.exceptionDetails.text
+                };
+            }
+            const result = response.result.value;
+            if (result.success) {
+                return {
+                    success: true,
+                    data: result
+                };
+            }
+            else {
+                return {
+                    success: false,
+                    error: result.error || 'Condition check failed'
+                };
+            }
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Condition check failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const waitArgs = args;
+        if (!waitArgs.selector || typeof waitArgs.selector !== 'string') {
+            return false;
+        }
+        if (waitArgs.timeout !== undefined && typeof waitArgs.timeout !== 'number') {
+            return false;
+        }
+        if (waitArgs.visible !== undefined && typeof waitArgs.visible !== 'boolean') {
+            return false;
+        }
+        if (waitArgs.condition !== undefined &&
+            !['exists', 'visible', 'hidden', 'enabled', 'disabled'].includes(waitArgs.condition)) {
+            return false;
+        }
+        if (waitArgs.pollInterval !== undefined && typeof waitArgs.pollInterval !== 'number') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+wait_for - Wait for an element to appear or meet specific conditions
+
+Usage:
+  wait_for <selector>
+  wait_for <selector> --condition visible
+  wait_for <selector> --timeout 15000
+  wait_for "#button" --condition enabled --timeout 5000
+
+Arguments:
+  <selector>              CSS selector for the element to wait for
+
+Options:
+  --timeout <ms>         Maximum time to wait (default: 10000ms)
+  --condition <type>     Condition to wait for (default: exists)
+  --visible              Wait for element to be visible (same as --condition visible)
+  --poll-interval <ms>   Polling interval (default: 100ms)
+
+Conditions:
+  exists                 Element exists in DOM (default)
+  visible                Element exists and is visible (not hidden, has dimensions)
+  hidden                 Element is hidden or does not exist
+  enabled                Element exists and is not disabled
+  disabled               Element exists and is disabled
+
+Examples:
+  # Wait for element to exist
+  wait_for "#loading-spinner"
+
+  # Wait for element to be visible
+  wait_for "#modal" --condition visible
+
+  # Wait for button to be enabled
+  wait_for "#submit-btn" --condition enabled
+
+  # Wait for element to be hidden
+  wait_for "#loading" --condition hidden
+
+  # Wait with custom timeout
+  wait_for ".slow-element" --timeout 30000
+
+  # Wait with custom polling interval
+  wait_for "#element" --poll-interval 500
+
+  # Legacy syntax (still supported)
+  wait_for "#modal" --visible
+
+Note:
+  - Polls the condition at regular intervals until met or timeout
+  - Returns immediately when condition is satisfied
+  - For 'visible' condition, checks dimensions, display, visibility, and opacity
+  - For 'enabled/disabled' conditions, works with form elements
+  - Useful for waiting for dynamic content, AJAX responses, or animations
+`;
+    }
+}
+exports.WaitForHandler = WaitForHandler;

package/dist/handlers/index.js

@@ -23,3 +23,12 @@ __exportStar(require("./GetNetworkRequestHandler"), exports);
 __exportStar(require("./ListNetworkRequestsHandler"), exports);
 __exportStar(require("./InstallCursorCommandHandler"), exports);
 __exportStar(require("./InstallClaudeSkillHandler"), exports);
+__exportStar(require("./ClickHandler"), exports);
+__exportStar(require("./HoverHandler"), exports);
+__exportStar(require("./FillHandler"), exports);
+__exportStar(require("./FillFormHandler"), exports);
+__exportStar(require("./DragHandler"), exports);
+__exportStar(require("./PressKeyHandler"), exports);
+__exportStar(require("./UploadFileHandler"), exports);
+__exportStar(require("./WaitForHandler"), exports);
+__exportStar(require("./HandleDialogHandler"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "chrome-cdp-cli",
-  "version": "1.2.2",
-  "description": "Command-line tool for controlling Chrome browser via Chrome DevTools Protocol. Features: JavaScript execution, screenshots, DOM snapshots, console/network monitoring, IDE integration (Cursor commands & Claude skills). Install IDE tools with --force option for directory validation bypass.",
+  "version": "1.3.0",
+  "description": "LLM-first browser automation CLI via Chrome DevTools Protocol. Eval-first design optimized for AI assistants - LLMs write JavaScript scripts for rapid validation. Features: JavaScript execution, element interaction, screenshots, DOM snapshots, console/network monitoring. Built-in IDE integration for Cursor and Claude.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "bin": {