chrome-cdp-cli 2.0.3 → 2.0.5

package/dist/cli/ArgumentParser.js

@@ -161,7 +161,8 @@ class ArgumentParser {
             { name: 'quiet', short: 'q', type: 'boolean', description: 'Enable quiet mode', default: false },
             { name: 'timeout', short: 't', type: 'number', description: 'Command timeout in milliseconds', default: 30000 },
             { name: 'debug', short: 'd', type: 'boolean', description: 'Enable debug logging', default: false },
-            { name: 'config', short: 'c', type: 'string', description: 'Configuration file path' }
+            { name: 'config', short: 'c', type: 'string', description: 'Configuration file path' },
+            { name: 'target-index', type: 'number', description: 'Target page index (1-based, excludes DevTools windows)' }
         ];
         while (i < args.length) {
             const arg = args[i];
@@ -348,13 +349,14 @@ class ArgumentParser {
         }
         const stringValue = String(value);
         switch (optionDef.type) {
-            case 'number':
+            case 'number': {
                 const numValue = Number(stringValue);
                 if (isNaN(numValue)) {
                     throw new Error(`Option --${optionDef.name} must be a number, got: ${stringValue}`);
                 }
                 return numValue;
-            case 'boolean':
+            }
+            case 'boolean': {
                 if (typeof value === 'boolean') {
                     return value;
                 }
@@ -366,6 +368,7 @@ class ArgumentParser {
                     return false;
                 }
                 throw new Error(`Option --${optionDef.name} must be a boolean, got: ${stringValue}`);
+            }
             case 'array':
                 if (Array.isArray(value)) {
                     return value;

package/dist/cli/CLIApplication.js

@@ -94,7 +94,12 @@ class CLIApplication {
             await this.ensureProxyReady();
             if (this.needsConnection(command.name)) {
                 this.logger.debug('Command needs connection, ensuring connection...');
-                await this.ensureConnection(command);
+                try {
+                    await this.ensureConnection(command);
+                }
+                catch (connectionError) {
+                    this.logger.debug('Connection failed, will be handled by command router:', connectionError);
+                }
             }
             this.logger.debug('Executing command via CLI interface...');
             const result = await this.cli.execute(command);
@@ -128,6 +133,26 @@ class CLIApplication {
         ];
         return !noConnectionCommands.includes(commandName);
     }
+    isDevToolsWindow(target) {
+        const url = target.url.toLowerCase();
+        const title = target.title.toLowerCase();
+        return url.startsWith('chrome-devtools://') ||
+            url.startsWith('devtools://') ||
+            title.includes('devtools') ||
+            title.includes('chrome devtools');
+    }
+    displayAvailableTargets(targets) {
+        console.log('\nAvailable Chrome pages (excluding DevTools windows):');
+        targets.forEach((target, index) => {
+            const displayUrl = target.url.length > 60 ? target.url.substring(0, 57) + '...' : target.url;
+            console.log(`  [${index + 1}] ${target.title || '(Untitled)'}`);
+            console.log(`      ${displayUrl}`);
+        });
+        console.log('\nOptions:');
+        console.log('  1. Use --target-index <number> to select a specific page');
+        console.log('     Example: chrome-cdp-cli --target-index 1 eval "document.title"');
+        console.log('  2. Close other pages until only one page remains\n');
+    }
     async ensureConnection(command) {
         if (this.client) {
             return;
@@ -138,14 +163,35 @@ class CLIApplication {
                 throw new Error(`No Chrome targets found at ${command.config.host}:${command.config.port}. ` +
                     'Make sure Chrome is running with --remote-debugging-port=9222');
             }
-            const pageTarget = targets.find(target => target.type === 'page');
-            if (!pageTarget) {
-                throw new Error('No page targets available. Open a tab in Chrome.');
+            const pageTargets = targets.filter(target => target.type === 'page');
+            const nonDevToolsTargets = pageTargets.filter(target => !this.isDevToolsWindow(target));
+            if (nonDevToolsTargets.length === 0) {
+                throw new Error('No page targets available (excluding DevTools windows). Open a tab in Chrome.');
             }
-            this.client = await this.connectionManager.connectToTarget(pageTarget);
+            let selectedTarget;
+            if (command.config.targetIndex !== undefined) {
+                const index = command.config.targetIndex - 1;
+                if (index < 0 || index >= nonDevToolsTargets.length) {
+                    this.displayAvailableTargets(nonDevToolsTargets);
+                    throw new Error(`Invalid target index: ${command.config.targetIndex}. ` +
+                        `Please choose a number between 1 and ${nonDevToolsTargets.length}.`);
+                }
+                selectedTarget = nonDevToolsTargets[index];
+            }
+            else {
+                if (nonDevToolsTargets.length === 1) {
+                    selectedTarget = nonDevToolsTargets[0];
+                }
+                else {
+                    this.displayAvailableTargets(nonDevToolsTargets);
+                    throw new Error(`Multiple Chrome pages found (${nonDevToolsTargets.length}). ` +
+                        'Please specify --target-index <number> to select a page, or close other pages until only one remains.');
+                }
+            }
+            this.client = await this.connectionManager.connectToTarget(selectedTarget);
             this.cli.setClient(this.client);
             if (command.config.verbose) {
-                this.logger.info(`Connected to Chrome target: ${pageTarget.title} (${pageTarget.url})`);
+                this.logger.info(`Connected to Chrome target: ${selectedTarget.title} (${selectedTarget.url})`);
             }
         }
         catch (error) {
@@ -208,6 +254,11 @@ class CLIApplication {
             else if (arg === '--debug' || arg === '-d') {
                 options.debug = true;
             }
+            else if (arg === '--target-index') {
+                if (i + 1 < args.length) {
+                    options.targetIndex = parseInt(args[i + 1], 10);
+                }
+            }
         }
         return options;
     }

package/dist/cli/CommandSchemaRegistry.js

@@ -281,13 +281,13 @@ class CommandSchemaRegistry {
             options: [],
             arguments: [
                 {
-                    name: 'fromSelector',
+                    name: 'sourceSelector',
                     description: 'CSS selector for element to drag from',
                     type: 'string',
                     required: true
                 },
                 {
-                    name: 'toSelector',
+                    name: 'targetSelector',
                     description: 'CSS selector for element to drag to',
                     type: 'string',
                     required: true

package/dist/cli/EnhancedCLIInterface.js

@@ -72,7 +72,8 @@ class EnhancedCLIInterface {
             verbose: globalOptions.verbose || CLIInterface_1.DEFAULT_CLI_CONFIG.verbose,
             quiet: globalOptions.quiet || CLIInterface_1.DEFAULT_CLI_CONFIG.quiet,
             timeout: globalOptions.timeout || CLIInterface_1.DEFAULT_CLI_CONFIG.timeout,
-            debug: globalOptions.debug || CLIInterface_1.DEFAULT_CLI_CONFIG.debug
+            debug: globalOptions.debug || CLIInterface_1.DEFAULT_CLI_CONFIG.debug,
+            targetIndex: globalOptions['target-index'] !== undefined ? globalOptions['target-index'] : undefined
         };
     }
     buildCommandArguments(parseResult) {

package/dist/cli/OutputFormatter.js

@@ -17,7 +17,7 @@ class OutputFormatter {
             return this.formatErrorOutput(result, options);
         }
         if (options.template) {
-            return this.applyTemplate(result, options.template, options);
+            return this.applyTemplate(result, options.template);
         }
         switch (options.format) {
             case 'json':
@@ -167,7 +167,7 @@ class OutputFormatter {
             if (obj.type && obj.text !== undefined && obj.timestamp) {
                 const timestamp = new Date(obj.timestamp).toISOString();
                 const typeIcon = this.getConsoleTypeIcon(obj.type);
-                let output = `${timestamp} ${typeIcon} ${obj.text}`;
+                const output = `${timestamp} ${typeIcon} ${obj.text}`;
                 return output;
             }
             if (obj.requestId && obj.url && obj.method) {
@@ -234,7 +234,7 @@ class OutputFormatter {
         }
         return output;
     }
-    applyTemplate(result, templateName, _options) {
+    applyTemplate(result, templateName) {
         const template = this.templates.get(templateName);
         if (!template) {
             throw new Error(`Unknown template: ${templateName}`);

package/dist/handlers/ClickHandler.js

@@ -33,6 +33,10 @@ class ClickHandler {
                     };
                 }
             }
+            const inputResult = await this.clickViaInput(client, clickArgs.selector);
+            if (inputResult.success) {
+                return inputResult;
+            }
             const cdpResult = await this.clickViaCDP(client, clickArgs.selector);
             if (cdpResult.success) {
                 return cdpResult;
@@ -66,6 +70,87 @@ class ClickHandler {
         }
         return false;
     }
+    async clickViaInput(client, selector) {
+        try {
+            const escapedSelector = selector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const getCoordsExpression = `
+        (function() {
+          const element = document.querySelector('${escapedSelector}');
+          if (!element) {
+            return null;
+          }
+          
+          // Scroll element into view if needed
+          element.scrollIntoView({ behavior: 'instant', block: 'center' });
+          
+          // Get bounding box
+          const rect = element.getBoundingClientRect();
+          const x = rect.left + rect.width / 2;
+          const y = rect.top + rect.height / 2;
+          
+          return {
+            x: Math.round(x),
+            y: Math.round(y),
+            tagName: element.tagName,
+            id: element.id,
+            className: element.className
+          };
+        })()
+      `;
+            const coordsResponse = await client.send('Runtime.evaluate', {
+                expression: getCoordsExpression,
+                returnByValue: true
+            });
+            if (coordsResponse.exceptionDetails) {
+                return {
+                    success: false,
+                    error: `Failed to get element coordinates: ${coordsResponse.exceptionDetails.exception?.description || coordsResponse.exceptionDetails.text}`
+                };
+            }
+            const coords = coordsResponse.result.value;
+            if (!coords) {
+                return {
+                    success: false,
+                    error: `Element with selector "${selector}" not found`
+                };
+            }
+            await client.send('Input.dispatchMouseEvent', {
+                type: 'mousePressed',
+                x: coords.x,
+                y: coords.y,
+                button: 'left',
+                clickCount: 1
+            });
+            await new Promise(resolve => setTimeout(resolve, 10));
+            await client.send('Input.dispatchMouseEvent', {
+                type: 'mouseReleased',
+                x: coords.x,
+                y: coords.y,
+                button: 'left',
+                clickCount: 1
+            });
+            return {
+                success: true,
+                data: {
+                    selector: selector,
+                    element: {
+                        success: true,
+                        tagName: coords.tagName,
+                        id: coords.id,
+                        className: coords.className
+                    },
+                    method: 'Input.dispatchMouseEvent',
+                    coordinates: { x: coords.x, y: coords.y }
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Input click failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
     async clickViaCDP(client, selector) {
         try {
             const documentResponse = await client.send('DOM.getDocument');
@@ -231,10 +316,11 @@ Examples:
   click "#optional-element" --no-wait
 
 Note:
-  - Uses CDP DOM.querySelector and Runtime.callFunctionOn for precise control
-  - Falls back to JavaScript eval if CDP approach fails
+  - Uses CDP Input.dispatchMouseEvent for most reliable click simulation
+  - Falls back to Runtime.callFunctionOn and JavaScript eval if Input fails
   - Automatically scrolls element into view before clicking
-  - Triggers actual click events that work with event listeners
+  - Triggers complete mouse event sequence (mousePressed, mouseReleased)
+  - Works with all event listeners including React/Vue handlers
 `;
     }
 }

package/dist/handlers/DragHandler.js

@@ -33,6 +33,7 @@ class DragHandler {
         }
         try {
             await client.send('Runtime.enable');
+            await client.send('DOM.enable');
             const timeout = dragArgs.timeout || 5000;
             const waitForElement = dragArgs.waitForElement !== false;
             if (waitForElement) {
@@ -51,6 +52,10 @@ class DragHandler {
                     };
                 }
             }
+            const inputResult = await this.dragViaInput(client, dragArgs.sourceSelector, dragArgs.targetSelector);
+            if (inputResult.success) {
+                return inputResult;
+            }
             const result = await this.dragViaEval(client, dragArgs.sourceSelector, dragArgs.targetSelector);
             return result;
         }
@@ -80,6 +85,133 @@ class DragHandler {
         }
         return false;
     }
+    async dragViaInput(client, sourceSelector, targetSelector) {
+        try {
+            const escapedSource = sourceSelector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const escapedTarget = targetSelector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const getCoordsExpression = `
+        (function() {
+          const sourceElement = document.querySelector('${escapedSource}');
+          if (!sourceElement) {
+            return null;
+          }
+          
+          const targetElement = document.querySelector('${escapedTarget}');
+          if (!targetElement) {
+            return null;
+          }
+          
+          // Scroll elements into view if needed
+          sourceElement.scrollIntoView({ behavior: 'instant', block: 'center' });
+          targetElement.scrollIntoView({ behavior: 'instant', block: 'center' });
+          
+          // Get bounding boxes
+          const sourceRect = sourceElement.getBoundingClientRect();
+          const targetRect = targetElement.getBoundingClientRect();
+          
+          // Calculate center positions
+          const sourceX = Math.round(sourceRect.left + sourceRect.width / 2);
+          const sourceY = Math.round(sourceRect.top + sourceRect.height / 2);
+          const targetX = Math.round(targetRect.left + targetRect.width / 2);
+          const targetY = Math.round(targetRect.top + targetRect.height / 2);
+          
+          return {
+            source: {
+              x: sourceX,
+              y: sourceY,
+              tagName: sourceElement.tagName,
+              id: sourceElement.id,
+              className: sourceElement.className
+            },
+            target: {
+              x: targetX,
+              y: targetY,
+              tagName: targetElement.tagName,
+              id: targetElement.id,
+              className: targetElement.className
+            }
+          };
+        })()
+      `;
+            const coordsResponse = await client.send('Runtime.evaluate', {
+                expression: getCoordsExpression,
+                returnByValue: true
+            });
+            if (coordsResponse.exceptionDetails) {
+                return {
+                    success: false,
+                    error: `Failed to get element coordinates: ${coordsResponse.exceptionDetails.exception?.description || coordsResponse.exceptionDetails.text}`
+                };
+            }
+            const coords = coordsResponse.result.value;
+            if (!coords) {
+                return {
+                    success: false,
+                    error: `Source or target element not found`
+                };
+            }
+            const steps = 10;
+            const dx = (coords.target.x - coords.source.x) / steps;
+            const dy = (coords.target.y - coords.source.y) / steps;
+            await client.send('Input.dispatchMouseEvent', {
+                type: 'mousePressed',
+                x: coords.source.x,
+                y: coords.source.y,
+                button: 'left',
+                clickCount: 1
+            });
+            await new Promise(resolve => setTimeout(resolve, 50));
+            for (let i = 1; i <= steps; i++) {
+                const currentX = Math.round(coords.source.x + dx * i);
+                const currentY = Math.round(coords.source.y + dy * i);
+                await client.send('Input.dispatchMouseEvent', {
+                    type: 'mouseMoved',
+                    x: currentX,
+                    y: currentY,
+                    button: 'left',
+                    buttons: 1
+                });
+                await new Promise(resolve => setTimeout(resolve, 10));
+            }
+            await new Promise(resolve => setTimeout(resolve, 50));
+            await client.send('Input.dispatchMouseEvent', {
+                type: 'mouseReleased',
+                x: coords.target.x,
+                y: coords.target.y,
+                button: 'left',
+                clickCount: 1
+            });
+            return {
+                success: true,
+                data: {
+                    sourceSelector: sourceSelector,
+                    targetSelector: targetSelector,
+                    result: {
+                        success: true,
+                        source: {
+                            tagName: coords.source.tagName,
+                            id: coords.source.id,
+                            className: coords.source.className,
+                            position: { x: coords.source.x, y: coords.source.y }
+                        },
+                        target: {
+                            tagName: coords.target.tagName,
+                            id: coords.target.id,
+                            className: coords.target.className,
+                            position: { x: coords.target.x, y: coords.target.y }
+                        }
+                    },
+                    method: 'Input.dispatchMouseEvent'
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Input drag failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
     async dragViaEval(client, sourceSelector, targetSelector) {
         try {
             const escapedSource = sourceSelector.replace(/'/g, "\\'").replace(/"/g, '\\"');
@@ -257,10 +389,11 @@ Examples:
   drag "#source" "#target" --no-wait
 
 Note:
-  - Uses JavaScript DragEvent simulation for drag and drop
-  - Dispatches all standard drag events: dragstart, dragenter, dragover, drop, dragend
-  - Automatically calculates element center positions for drag coordinates
-  - Works with HTML5 drag and drop API event listeners
+  - Uses CDP Input.dispatchMouseEvent for most reliable drag simulation
+  - Falls back to JavaScript DragEvent simulation if Input fails
+  - Simulates complete mouse sequence: mousePressed → mouseMoved → mouseReleased
+  - Automatically calculates element center positions and smooth movement path
+  - Works with all drag and drop implementations including React/Vue libraries
 `;
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-cdp-cli",
-  "version": "2.0.3",
+  "version": "2.0.5",
   "description": "Browser automation CLI via Chrome DevTools Protocol. Designed for developers and AI assistants - combines dedicated commands for common tasks with flexible JavaScript execution for complex scenarios. Features: 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",