chrome-cdp-cli 1.2.2 → 1.3.0

package/dist/handlers/ClickHandler.js

@@ -0,0 +1,241 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickHandler = void 0;
+class ClickHandler {
+    constructor() {
+        this.name = 'click';
+    }
+    async execute(client, args) {
+        const clickArgs = args;
+        if (!clickArgs.selector) {
+            return {
+                success: false,
+                error: 'CSS selector is required for click command'
+            };
+        }
+        if (typeof clickArgs.selector !== 'string') {
+            return {
+                success: false,
+                error: 'CSS selector must be a string'
+            };
+        }
+        try {
+            await client.send('DOM.enable');
+            await client.send('Runtime.enable');
+            const timeout = clickArgs.timeout || 5000;
+            const waitForElement = clickArgs.waitForElement !== false;
+            if (waitForElement) {
+                const elementFound = await this.waitForElement(client, clickArgs.selector, timeout);
+                if (!elementFound) {
+                    return {
+                        success: false,
+                        error: `Element with selector "${clickArgs.selector}" not found within ${timeout}ms`
+                    };
+                }
+            }
+            const cdpResult = await this.clickViaCDP(client, clickArgs.selector);
+            if (cdpResult.success) {
+                return cdpResult;
+            }
+            const evalResult = await this.clickViaEval(client, clickArgs.selector);
+            return evalResult;
+        }
+        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 clickViaCDP(client, selector) {
+        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: `Element with selector "${selector}" not found`
+                };
+            }
+            const objectResponse = await client.send('DOM.resolveNode', {
+                nodeId: queryResponse.nodeId
+            });
+            if (!objectResponse.object?.objectId) {
+                return {
+                    success: false,
+                    error: 'Failed to resolve element to remote object'
+                };
+            }
+            const clickResponse = await client.send('Runtime.callFunctionOn', {
+                objectId: objectResponse.object.objectId,
+                functionDeclaration: `
+          function() {
+            // Scroll element into view if needed
+            this.scrollIntoView({ behavior: 'instant', block: 'center' });
+            
+            // Trigger click event
+            this.click();
+            
+            return {
+              success: true,
+              tagName: this.tagName,
+              id: this.id,
+              className: this.className
+            };
+          }
+        `,
+                returnByValue: true,
+                userGesture: true
+            });
+            if (clickResponse.exceptionDetails) {
+                return {
+                    success: false,
+                    error: `Click execution failed: ${clickResponse.exceptionDetails.exception?.description || clickResponse.exceptionDetails.text}`
+                };
+            }
+            return {
+                success: true,
+                data: {
+                    selector: selector,
+                    element: clickResponse.result.value,
+                    method: 'CDP'
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `CDP click failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    async clickViaEval(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');
+          }
+          
+          // Scroll element into view if needed
+          element.scrollIntoView({ behavior: 'instant', block: 'center' });
+          
+          // Trigger click event
+          element.click();
+          
+          return {
+            success: true,
+            tagName: element.tagName,
+            id: element.id,
+            className: element.className
+          };
+        })()
+      `;
+            const response = await client.send('Runtime.evaluate', {
+                expression: expression,
+                returnByValue: true,
+                userGesture: true
+            });
+            if (response.exceptionDetails) {
+                return {
+                    success: false,
+                    error: response.exceptionDetails.exception?.description || response.exceptionDetails.text
+                };
+            }
+            return {
+                success: true,
+                data: {
+                    selector: selector,
+                    element: response.result.value,
+                    method: 'eval'
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Eval click failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const clickArgs = args;
+        if (!clickArgs.selector || typeof clickArgs.selector !== 'string') {
+            return false;
+        }
+        if (clickArgs.waitForElement !== undefined && typeof clickArgs.waitForElement !== 'boolean') {
+            return false;
+        }
+        if (clickArgs.timeout !== undefined && typeof clickArgs.timeout !== 'number') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+click - Click on an element using CSS selector
+
+Usage:
+  click <selector>
+  click "#submit-button"
+  click ".menu-item" --timeout 10000
+  click "button[type='submit']" --no-wait
+
+Arguments:
+  <selector>              CSS selector for the element to click
+
+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:
+  # Click a button by ID
+  click "#submit-button"
+
+  # Click a link by text content (using CSS selector)
+  click "a[href='/login']"
+
+  # Click with custom timeout
+  click ".slow-loading-button" --timeout 10000
+
+  # Click without waiting (fail immediately if not found)
+  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
+  - Automatically scrolls element into view before clicking
+  - Triggers actual click events that work with event listeners
+`;
+    }
+}
+exports.ClickHandler = ClickHandler;

package/dist/handlers/DragHandler.js

@@ -0,0 +1,267 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragHandler = void 0;
+class DragHandler {
+    constructor() {
+        this.name = 'drag';
+    }
+    async execute(client, args) {
+        const dragArgs = args;
+        if (!dragArgs.sourceSelector) {
+            return {
+                success: false,
+                error: 'Source CSS selector is required for drag command'
+            };
+        }
+        if (typeof dragArgs.sourceSelector !== 'string') {
+            return {
+                success: false,
+                error: 'Source CSS selector must be a string'
+            };
+        }
+        if (!dragArgs.targetSelector) {
+            return {
+                success: false,
+                error: 'Target CSS selector is required for drag command'
+            };
+        }
+        if (typeof dragArgs.targetSelector !== 'string') {
+            return {
+                success: false,
+                error: 'Target CSS selector must be a string'
+            };
+        }
+        try {
+            await client.send('Runtime.enable');
+            const timeout = dragArgs.timeout || 5000;
+            const waitForElement = dragArgs.waitForElement !== false;
+            if (waitForElement) {
+                const sourceFound = await this.waitForElement(client, dragArgs.sourceSelector, timeout);
+                if (!sourceFound) {
+                    return {
+                        success: false,
+                        error: `Source element with selector "${dragArgs.sourceSelector}" not found within ${timeout}ms`
+                    };
+                }
+                const targetFound = await this.waitForElement(client, dragArgs.targetSelector, timeout);
+                if (!targetFound) {
+                    return {
+                        success: false,
+                        error: `Target element with selector "${dragArgs.targetSelector}" not found within ${timeout}ms`
+                    };
+                }
+            }
+            const result = await this.dragViaEval(client, dragArgs.sourceSelector, dragArgs.targetSelector);
+            return result;
+        }
+        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 dragViaEval(client, sourceSelector, targetSelector) {
+        try {
+            const escapedSource = sourceSelector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const escapedTarget = targetSelector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const expression = `
+        (function() {
+          const sourceElement = document.querySelector('${escapedSource}');
+          if (!sourceElement) {
+            throw new Error('Source element with selector "${escapedSource}" not found');
+          }
+          
+          const targetElement = document.querySelector('${escapedTarget}');
+          if (!targetElement) {
+            throw new Error('Target element with selector "${escapedTarget}" not found');
+          }
+          
+          // Get element positions
+          const sourceRect = sourceElement.getBoundingClientRect();
+          const targetRect = targetElement.getBoundingClientRect();
+          
+          // Calculate center positions
+          const sourceX = sourceRect.left + sourceRect.width / 2;
+          const sourceY = sourceRect.top + sourceRect.height / 2;
+          const targetX = targetRect.left + targetRect.width / 2;
+          const targetY = targetRect.top + targetRect.height / 2;
+          
+          // Create and dispatch dragstart event
+          const dragStartEvent = new DragEvent('dragstart', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: sourceX,
+            clientY: sourceY,
+            dataTransfer: new DataTransfer()
+          });
+          sourceElement.dispatchEvent(dragStartEvent);
+          
+          // Create and dispatch dragenter event on target
+          const dragEnterEvent = new DragEvent('dragenter', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: targetX,
+            clientY: targetY,
+            dataTransfer: dragStartEvent.dataTransfer
+          });
+          targetElement.dispatchEvent(dragEnterEvent);
+          
+          // Create and dispatch dragover event on target
+          const dragOverEvent = new DragEvent('dragover', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: targetX,
+            clientY: targetY,
+            dataTransfer: dragStartEvent.dataTransfer
+          });
+          targetElement.dispatchEvent(dragOverEvent);
+          
+          // Create and dispatch drop event on target
+          const dropEvent = new DragEvent('drop', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: targetX,
+            clientY: targetY,
+            dataTransfer: dragStartEvent.dataTransfer
+          });
+          targetElement.dispatchEvent(dropEvent);
+          
+          // Create and dispatch dragend event on source
+          const dragEndEvent = new DragEvent('dragend', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+            clientX: targetX,
+            clientY: targetY,
+            dataTransfer: dragStartEvent.dataTransfer
+          });
+          sourceElement.dispatchEvent(dragEndEvent);
+          
+          return {
+            success: true,
+            source: {
+              tagName: sourceElement.tagName,
+              id: sourceElement.id,
+              className: sourceElement.className,
+              position: { x: sourceX, y: sourceY }
+            },
+            target: {
+              tagName: targetElement.tagName,
+              id: targetElement.id,
+              className: targetElement.className,
+              position: { x: targetX, y: targetY }
+            }
+          };
+        })()
+      `;
+            const response = await client.send('Runtime.evaluate', {
+                expression: expression,
+                returnByValue: true,
+                userGesture: true
+            });
+            if (response.exceptionDetails) {
+                return {
+                    success: false,
+                    error: response.exceptionDetails.exception?.description || response.exceptionDetails.text
+                };
+            }
+            return {
+                success: true,
+                data: {
+                    sourceSelector: sourceSelector,
+                    targetSelector: targetSelector,
+                    result: response.result.value
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Drag operation failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const dragArgs = args;
+        if (!dragArgs.sourceSelector || typeof dragArgs.sourceSelector !== 'string') {
+            return false;
+        }
+        if (!dragArgs.targetSelector || typeof dragArgs.targetSelector !== 'string') {
+            return false;
+        }
+        if (dragArgs.waitForElement !== undefined && typeof dragArgs.waitForElement !== 'boolean') {
+            return false;
+        }
+        if (dragArgs.timeout !== undefined && typeof dragArgs.timeout !== 'number') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+drag - Perform drag and drop operation from source to target element
+
+Usage:
+  drag <sourceSelector> <targetSelector>
+  drag "#draggable" "#dropzone"
+  drag ".item" ".container" --timeout 10000
+  drag "#source" "#target" --no-wait
+
+Arguments:
+  <sourceSelector>        CSS selector for the element to drag
+  <targetSelector>        CSS selector for the drop target
+
+Options:
+  --wait-for-element      Wait for elements to be available (default: true)
+  --no-wait              Don't wait for elements (same as --wait-for-element=false)
+  --timeout <ms>         Timeout for waiting for elements (default: 5000ms)
+
+Examples:
+  # Drag an item to a dropzone
+  drag "#draggable-item" "#drop-zone"
+
+  # Drag a file to upload area
+  drag ".file-item" ".upload-area"
+
+  # Drag with custom timeout
+  drag ".slow-loading-item" ".target" --timeout 10000
+
+  # Drag without waiting (fail immediately if not found)
+  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
+`;
+    }
+}
+exports.DragHandler = DragHandler;