chrome-cdp-cli 1.2.4 → 1.3.0

package/dist/handlers/UploadFileHandler.js

@@ -0,0 +1,325 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadFileHandler = void 0;
+const fs = __importStar(require("fs"));
+const path = __importStar(require("path"));
+class UploadFileHandler {
+    constructor() {
+        this.name = 'upload_file';
+    }
+    async execute(client, args) {
+        const uploadArgs = args;
+        if (!uploadArgs.selector) {
+            return {
+                success: false,
+                error: 'CSS selector is required for upload_file command'
+            };
+        }
+        if (typeof uploadArgs.selector !== 'string') {
+            return {
+                success: false,
+                error: 'CSS selector must be a string'
+            };
+        }
+        if (!uploadArgs.filePath) {
+            return {
+                success: false,
+                error: 'File path is required for upload_file command'
+            };
+        }
+        if (typeof uploadArgs.filePath !== 'string') {
+            return {
+                success: false,
+                error: 'File path must be a string'
+            };
+        }
+        const absoluteFilePath = path.resolve(uploadArgs.filePath);
+        if (!fs.existsSync(absoluteFilePath)) {
+            return {
+                success: false,
+                error: `File not found: ${absoluteFilePath}`
+            };
+        }
+        const stats = fs.statSync(absoluteFilePath);
+        if (!stats.isFile()) {
+            return {
+                success: false,
+                error: `Path is not a file: ${absoluteFilePath}`
+            };
+        }
+        try {
+            await client.send('DOM.enable');
+            await client.send('Runtime.enable');
+            const timeout = uploadArgs.timeout || 5000;
+            const waitForElement = uploadArgs.waitForElement !== false;
+            if (waitForElement) {
+                const elementFound = await this.waitForElement(client, uploadArgs.selector, timeout);
+                if (!elementFound) {
+                    return {
+                        success: false,
+                        error: `Element with selector "${uploadArgs.selector}" not found within ${timeout}ms`
+                    };
+                }
+            }
+            const isFileInput = await this.verifyFileInput(client, uploadArgs.selector);
+            if (!isFileInput.success) {
+                return isFileInput;
+            }
+            const cdpResult = await this.uploadViaCDP(client, uploadArgs.selector, absoluteFilePath);
+            if (cdpResult.success) {
+                return cdpResult;
+            }
+            return {
+                success: false,
+                error: `File upload failed: ${cdpResult.error}. File uploads require CDP support.`
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+    async waitForElement(client, selector, timeout) {
+        const startTime = Date.now();
+        while (Date.now() - startTime < timeout) {
+            try {
+                const result = await client.send('Runtime.evaluate', {
+                    expression: `document.querySelector('${selector.replace(/'/g, "\\'")}') !== null`,
+                    returnByValue: true
+                });
+                if (result.result.value) {
+                    return true;
+                }
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+            catch (error) {
+                await new Promise(resolve => setTimeout(resolve, 100));
+            }
+        }
+        return false;
+    }
+    async verifyFileInput(client, selector) {
+        try {
+            const escapedSelector = selector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const expression = `
+        (function() {
+          const element = document.querySelector('${escapedSelector}');
+          if (!element) {
+            throw new Error('Element with selector "${escapedSelector}" not found');
+          }
+          
+          if (element.tagName.toLowerCase() !== 'input') {
+            throw new Error('Element is not an input element');
+          }
+          
+          if (element.type.toLowerCase() !== 'file') {
+            throw new Error('Element is not a file input (type="file")');
+          }
+          
+          return {
+            success: true,
+            tagName: element.tagName,
+            type: element.type,
+            id: element.id,
+            className: element.className,
+            multiple: element.multiple,
+            accept: element.accept
+          };
+        })()
+      `;
+            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
+                };
+            }
+            return {
+                success: true,
+                data: response.result.value
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `File input verification failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    async uploadViaCDP(client, selector, filePath) {
+        try {
+            const documentResponse = await client.send('DOM.getDocument');
+            const rootNodeId = documentResponse.root.nodeId;
+            const queryResponse = await client.send('DOM.querySelector', {
+                nodeId: rootNodeId,
+                selector: selector
+            });
+            if (!queryResponse.nodeId || queryResponse.nodeId === 0) {
+                return {
+                    success: false,
+                    error: `File input element with selector "${selector}" not found`
+                };
+            }
+            await client.send('DOM.setFileInputFiles', {
+                nodeId: queryResponse.nodeId,
+                files: [filePath]
+            });
+            const changeEventResult = await this.triggerChangeEvent(client, selector, filePath);
+            return {
+                success: true,
+                data: {
+                    selector: selector,
+                    filePath: filePath,
+                    fileName: path.basename(filePath),
+                    fileSize: fs.statSync(filePath).size,
+                    method: 'CDP',
+                    changeEvent: changeEventResult
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `CDP file upload failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    async triggerChangeEvent(client, selector, filePath) {
+        try {
+            const escapedSelector = selector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const fileName = path.basename(filePath);
+            const expression = `
+        (function() {
+          const element = document.querySelector('${escapedSelector}');
+          if (element) {
+            // Trigger change event
+            const changeEvent = new Event('change', { bubbles: true });
+            element.dispatchEvent(changeEvent);
+            
+            // Also trigger input event
+            const inputEvent = new Event('input', { bubbles: true });
+            element.dispatchEvent(inputEvent);
+            
+            return {
+              success: true,
+              fileName: '${fileName}',
+              filesLength: element.files ? element.files.length : 0
+            };
+          }
+          return { success: false, error: 'Element not found' };
+        })()
+      `;
+            const response = await client.send('Runtime.evaluate', {
+                expression: expression,
+                returnByValue: true,
+                userGesture: true
+            });
+            return response.result.value;
+        }
+        catch (error) {
+            return { success: false, error: error instanceof Error ? error.message : String(error) };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const uploadArgs = args;
+        if (!uploadArgs.selector || typeof uploadArgs.selector !== 'string') {
+            return false;
+        }
+        if (!uploadArgs.filePath || typeof uploadArgs.filePath !== 'string') {
+            return false;
+        }
+        if (uploadArgs.waitForElement !== undefined && typeof uploadArgs.waitForElement !== 'boolean') {
+            return false;
+        }
+        if (uploadArgs.timeout !== undefined && typeof uploadArgs.timeout !== 'number') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+upload_file - Upload a file to a file input element
+
+Usage:
+  upload_file <selector> <filePath>
+  upload_file "#file-input" "./document.pdf"
+  upload_file "input[type='file']" "/path/to/image.jpg" --timeout 10000
+
+Arguments:
+  <selector>              CSS selector for the file input element
+  <filePath>              Path to the file to upload (relative or absolute)
+
+Options:
+  --wait-for-element      Wait for element to be available (default: true)
+  --no-wait              Don't wait for element (same as --wait-for-element=false)
+  --timeout <ms>         Timeout for waiting for element (default: 5000ms)
+
+Examples:
+  # Upload a document
+  upload_file "#document-upload" "./contract.pdf"
+
+  # Upload an image
+  upload_file "input[name='avatar']" "/home/user/photo.jpg"
+
+  # Upload with custom timeout
+  upload_file ".file-input" "./large-file.zip" --timeout 15000
+
+  # Upload without waiting (fail immediately if not found)
+  upload_file "#upload" "./file.txt" --no-wait
+
+Requirements:
+  - Target element must be an <input type="file"> element
+  - File must exist and be readable
+  - File path can be relative (to current directory) or absolute
+
+Note:
+  - Uses CDP DOM.setFileInputFiles for reliable file upload
+  - Automatically triggers 'change' and 'input' events after upload
+  - Verifies that target element is a valid file input before upload
+  - Supports both single and multiple file inputs
+  - File path is resolved to absolute path before upload
+`;
+    }
+}
+exports.UploadFileHandler = UploadFileHandler;

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.4",
-  "description": "LLM-first browser automation CLI via Chrome DevTools Protocol. Designed specifically for AI assistants (LLMs) - most commands use eval because LLMs excel at writing JavaScript for rapid script validation. Features: JavaScript execution, screenshots, DOM snapshots, console/network monitoring. Built-in IDE integration: install Cursor commands and Claude skills directly. Perfect for LLM-assisted development workflows where AI writes and tests automation scripts instantly.",
+  "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": {