chrome-cdp-cli 2.0.3 → 2.0.4

package/dist/cli/ArgumentParser.js

@@ -348,13 +348,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 +367,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/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/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.4",
   "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",