chrome-cdp-cli 1.2.2 → 1.3.0

package/dist/handlers/TakeSnapshotHandler.js

@@ -10,59 +10,131 @@ class TakeSnapshotHandler {
     async execute(client, args) {
         const snapshotArgs = args;
         try {
-            await client.send('DOMSnapshot.enable');
             await client.send('DOM.enable');
             await client.send('CSS.enable');
-            const params = this.buildSnapshotParams(snapshotArgs);
-            const response = await client.send('DOMSnapshot.captureSnapshot', params);
-            if (!response || !response.documents || response.documents.length === 0) {
-                return {
-                    success: false,
-                    error: 'Failed to capture DOM snapshot: empty response'
-                };
+            try {
+                return await this.captureWithDOMSnapshot(client, snapshotArgs);
             }
-            const processedSnapshot = this.processSnapshot(response, snapshotArgs);
-            if (snapshotArgs.filename) {
-                await this.saveSnapshot(processedSnapshot, snapshotArgs.filename, snapshotArgs.format);
-                return {
-                    success: true,
-                    data: {
-                        message: `DOM snapshot saved to ${snapshotArgs.filename}`,
-                        filename: snapshotArgs.filename,
-                        format: snapshotArgs.format || 'json',
-                        documentsCount: response.documents.length,
-                        nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
-                    }
-                };
+            catch (domSnapshotError) {
+                return await this.captureWithDOM(client, snapshotArgs);
             }
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+    async captureWithDOMSnapshot(client, snapshotArgs) {
+        await client.send('DOMSnapshot.enable');
+        const params = this.buildSnapshotParams(snapshotArgs);
+        const response = await client.send('DOMSnapshot.captureSnapshot', params);
+        if (!response || !response.documents || response.documents.length === 0) {
+            throw new Error('Failed to capture DOM snapshot: empty response');
+        }
+        const processedSnapshot = this.processSnapshot(response, snapshotArgs);
+        if (snapshotArgs.filename) {
+            await this.saveSnapshot(processedSnapshot, snapshotArgs.filename, snapshotArgs.format);
             return {
                 success: true,
                 data: {
-                    snapshot: processedSnapshot,
+                    message: `DOM snapshot saved to ${snapshotArgs.filename}`,
+                    filename: snapshotArgs.filename,
                     format: snapshotArgs.format || 'json',
                     documentsCount: response.documents.length,
                     nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
                 }
             };
         }
-        catch (error) {
+        return {
+            success: true,
+            data: {
+                snapshot: processedSnapshot,
+                format: snapshotArgs.format || 'json',
+                documentsCount: response.documents.length,
+                nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
+            }
+        };
+    }
+    async captureWithDOM(client, snapshotArgs) {
+        const docResponse = await client.send('DOM.getDocument', { depth: -1 });
+        if (!docResponse || !docResponse.root) {
+            throw new Error('Failed to get document root');
+        }
+        const htmlResponse = await client.send('DOM.getOuterHTML', {
+            nodeId: docResponse.root.nodeId
+        });
+        if (!htmlResponse || !htmlResponse.outerHTML) {
+            throw new Error('Failed to get document HTML');
+        }
+        let processedSnapshot;
+        if (snapshotArgs.format === 'html') {
+            processedSnapshot = htmlResponse.outerHTML;
+        }
+        else {
+            processedSnapshot = {
+                metadata: {
+                    captureTime: new Date().toISOString(),
+                    method: 'DOM.getOuterHTML',
+                    documentsCount: 1
+                },
+                documents: [{
+                        url: await this.getCurrentURL(client),
+                        title: await this.getCurrentTitle(client),
+                        html: htmlResponse.outerHTML,
+                        domTree: docResponse.root
+                    }]
+            };
+        }
+        if (snapshotArgs.filename) {
+            await this.saveSnapshot(processedSnapshot, snapshotArgs.filename, snapshotArgs.format);
             return {
-                success: false,
-                error: error instanceof Error ? error.message : String(error)
+                success: true,
+                data: {
+                    message: `DOM snapshot saved to ${snapshotArgs.filename}`,
+                    filename: snapshotArgs.filename,
+                    format: snapshotArgs.format || 'json'
+                }
             };
         }
+        return {
+            success: true,
+            data: {
+                snapshot: processedSnapshot,
+                format: snapshotArgs.format || 'json'
+            }
+        };
+    }
+    async getCurrentURL(client) {
+        try {
+            const result = await client.send('Runtime.evaluate', {
+                expression: 'window.location.href',
+                returnByValue: true
+            });
+            return result.result?.value || 'unknown';
+        }
+        catch {
+            return 'unknown';
+        }
+    }
+    async getCurrentTitle(client) {
+        try {
+            const result = await client.send('Runtime.evaluate', {
+                expression: 'document.title',
+                returnByValue: true
+            });
+            return result.result?.value || 'unknown';
+        }
+        catch {
+            return 'unknown';
+        }
     }
     buildSnapshotParams(args) {
         const params = {};
-        params.computedStyles = args.includeStyles !== false;
-        params.includeDOMRects = args.includeAttributes !== false;
         if (args.includePaintOrder) {
-            params.includePaintOrder = true;
-        }
-        if (args.includeTextIndex) {
-            params.includeTextIndex = true;
+            console.log('Paint order requested but not yet supported');
         }
-        params.computedStyleWhitelist = [];
         return params;
     }
     processSnapshot(response, args) {

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;