chrome-cdp-cli 1.2.2 → 1.3.0

package/dist/handlers/FillFormHandler.js

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillFormHandler = void 0;
+const FillHandler_1 = require("./FillHandler");
+class FillFormHandler {
+    constructor() {
+        this.name = 'fill_form';
+        this.fillHandler = new FillHandler_1.FillHandler();
+    }
+    async execute(client, args) {
+        const fillFormArgs = args;
+        if (!fillFormArgs.fields) {
+            return {
+                success: false,
+                error: 'Fields array is required for fill_form command'
+            };
+        }
+        if (!Array.isArray(fillFormArgs.fields)) {
+            return {
+                success: false,
+                error: 'Fields must be an array'
+            };
+        }
+        if (fillFormArgs.fields.length === 0) {
+            return {
+                success: false,
+                error: 'At least one field is required'
+            };
+        }
+        for (let i = 0; i < fillFormArgs.fields.length; i++) {
+            const field = fillFormArgs.fields[i];
+            if (!field.selector || typeof field.selector !== 'string') {
+                return {
+                    success: false,
+                    error: `Field ${i}: selector is required and must be a string`
+                };
+            }
+            if (field.value === undefined || field.value === null || typeof field.value !== 'string') {
+                return {
+                    success: false,
+                    error: `Field ${i}: value is required and must be a string`
+                };
+            }
+        }
+        try {
+            await client.send('DOM.enable');
+            await client.send('Runtime.enable');
+            const timeout = fillFormArgs.timeout || 5000;
+            const waitForElements = fillFormArgs.waitForElements !== false;
+            const clearFirst = fillFormArgs.clearFirst !== false;
+            const continueOnError = fillFormArgs.continueOnError !== false;
+            const results = [];
+            let successCount = 0;
+            let errorCount = 0;
+            for (const field of fillFormArgs.fields) {
+                try {
+                    const fillResult = await this.fillHandler.execute(client, {
+                        selector: field.selector,
+                        text: field.value,
+                        waitForElement: waitForElements,
+                        timeout: timeout,
+                        clearFirst: clearFirst
+                    });
+                    const fieldResult = {
+                        selector: field.selector,
+                        value: field.value,
+                        success: fillResult.success,
+                        data: fillResult.data
+                    };
+                    if (fillResult.success) {
+                        successCount++;
+                    }
+                    else {
+                        errorCount++;
+                        fieldResult.error = fillResult.error;
+                        if (!continueOnError) {
+                            results.push(fieldResult);
+                            return {
+                                success: false,
+                                error: `Failed to fill field "${field.selector}": ${fillResult.error}`,
+                                data: {
+                                    results: results,
+                                    summary: {
+                                        total: fillFormArgs.fields.length,
+                                        successful: successCount,
+                                        failed: errorCount,
+                                        processed: results.length
+                                    }
+                                }
+                            };
+                        }
+                    }
+                    results.push(fieldResult);
+                }
+                catch (error) {
+                    errorCount++;
+                    const fieldResult = {
+                        selector: field.selector,
+                        value: field.value,
+                        success: false,
+                        error: error instanceof Error ? error.message : String(error)
+                    };
+                    results.push(fieldResult);
+                    if (!continueOnError) {
+                        return {
+                            success: false,
+                            error: `Failed to fill field "${field.selector}": ${fieldResult.error}`,
+                            data: {
+                                results: results,
+                                summary: {
+                                    total: fillFormArgs.fields.length,
+                                    successful: successCount,
+                                    failed: errorCount,
+                                    processed: results.length
+                                }
+                            }
+                        };
+                    }
+                }
+            }
+            const overallSuccess = errorCount === 0;
+            return {
+                success: overallSuccess,
+                error: overallSuccess ? undefined : `${errorCount} out of ${fillFormArgs.fields.length} fields failed to fill`,
+                data: {
+                    results: results,
+                    summary: {
+                        total: fillFormArgs.fields.length,
+                        successful: successCount,
+                        failed: errorCount,
+                        processed: results.length
+                    }
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: error instanceof Error ? error.message : String(error)
+            };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const fillFormArgs = args;
+        if (!fillFormArgs.fields || !Array.isArray(fillFormArgs.fields)) {
+            return false;
+        }
+        if (fillFormArgs.fields.length === 0) {
+            return false;
+        }
+        for (const field of fillFormArgs.fields) {
+            if (typeof field !== 'object' || field === null) {
+                return false;
+            }
+            if (!field.selector || typeof field.selector !== 'string') {
+                return false;
+            }
+            if (field.value === undefined || field.value === null || typeof field.value !== 'string') {
+                return false;
+            }
+        }
+        if (fillFormArgs.waitForElements !== undefined && typeof fillFormArgs.waitForElements !== 'boolean') {
+            return false;
+        }
+        if (fillFormArgs.timeout !== undefined && typeof fillFormArgs.timeout !== 'number') {
+            return false;
+        }
+        if (fillFormArgs.clearFirst !== undefined && typeof fillFormArgs.clearFirst !== 'boolean') {
+            return false;
+        }
+        if (fillFormArgs.continueOnError !== undefined && typeof fillFormArgs.continueOnError !== 'boolean') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+fill_form - Fill multiple form fields in batch
+
+Usage:
+  fill_form --fields '[{"selector":"#username","value":"john"},{"selector":"#email","value":"john@example.com"}]'
+  fill_form --fields-file form-data.json
+  fill_form --fields '[{"selector":"#name","value":"John Doe"}]' --timeout 10000
+
+Arguments:
+  --fields <json>         JSON array of field objects with selector and value
+  --fields-file <file>    JSON file containing array of field objects
+
+Options:
+  --wait-for-elements     Wait for elements to be available (default: true)
+  --no-wait              Don't wait for elements
+  --timeout <ms>         Timeout for waiting for elements (default: 5000ms)
+  --clear-first          Clear fields before filling (default: true)
+  --no-clear             Don't clear fields before filling
+  --continue-on-error    Continue filling other fields if one fails (default: true)
+  --stop-on-error        Stop filling if any field fails
+
+Field Object Format:
+  {
+    "selector": "CSS selector for the form field",
+    "value": "Text value to fill into the field"
+  }
+
+Examples:
+  # Fill login form
+  fill_form --fields '[
+    {"selector":"#username","value":"john@example.com"},
+    {"selector":"#password","value":"secret123"}
+  ]'
+
+  # Fill registration form from file
+  echo '[
+    {"selector":"#firstName","value":"John"},
+    {"selector":"#lastName","value":"Doe"},
+    {"selector":"#email","value":"john.doe@example.com"},
+    {"selector":"#country","value":"United States"}
+  ]' > form-data.json
+  fill_form --fields-file form-data.json
+
+  # Fill form with custom options
+  fill_form --fields '[
+    {"selector":"#notes","value":"Additional information"}
+  ]' --no-clear --timeout 10000 --stop-on-error
+
+  # Fill select dropdowns
+  fill_form --fields '[
+    {"selector":"#country","value":"US"},
+    {"selector":"#state","value":"California"},
+    {"selector":"#city","value":"San Francisco"}
+  ]'
+
+Note:
+  - Uses the same filling logic as the 'fill' command for each field
+  - Works with input, textarea, and select elements
+  - For select elements, matches by option value first, then by text content
+  - Automatically triggers 'input' and 'change' events for each field
+  - Returns detailed results for each field including success/failure status
+  - By default continues filling other fields even if one fails
+`;
+    }
+}
+exports.FillFormHandler = FillFormHandler;

package/dist/handlers/FillHandler.js

@@ -0,0 +1,354 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FillHandler = void 0;
+class FillHandler {
+    constructor() {
+        this.name = 'fill';
+    }
+    async execute(client, args) {
+        const fillArgs = args;
+        if (!fillArgs.selector) {
+            return {
+                success: false,
+                error: 'CSS selector is required for fill command'
+            };
+        }
+        if (typeof fillArgs.selector !== 'string') {
+            return {
+                success: false,
+                error: 'CSS selector must be a string'
+            };
+        }
+        if (fillArgs.text === undefined || fillArgs.text === null) {
+            return {
+                success: false,
+                error: 'Text value is required for fill command'
+            };
+        }
+        if (typeof fillArgs.text !== 'string') {
+            return {
+                success: false,
+                error: 'Text value must be a string'
+            };
+        }
+        try {
+            await client.send('DOM.enable');
+            await client.send('Runtime.enable');
+            const timeout = fillArgs.timeout || 5000;
+            const waitForElement = fillArgs.waitForElement !== false;
+            if (waitForElement) {
+                const elementFound = await this.waitForElement(client, fillArgs.selector, timeout);
+                if (!elementFound) {
+                    return {
+                        success: false,
+                        error: `Element with selector "${fillArgs.selector}" not found within ${timeout}ms`
+                    };
+                }
+            }
+            const cdpResult = await this.fillViaCDP(client, fillArgs.selector, fillArgs.text, fillArgs.clearFirst);
+            if (cdpResult.success) {
+                return cdpResult;
+            }
+            const evalResult = await this.fillViaEval(client, fillArgs.selector, fillArgs.text, fillArgs.clearFirst);
+            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 fillViaCDP(client, selector, text, clearFirst = true) {
+        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 fillResponse = await client.send('Runtime.callFunctionOn', {
+                objectId: objectResponse.object.objectId,
+                functionDeclaration: `
+          function(text, clearFirst) {
+            // Check if element is a form field
+            const tagName = this.tagName.toLowerCase();
+            const inputType = this.type ? this.type.toLowerCase() : '';
+            
+            if (!['input', 'textarea', 'select'].includes(tagName)) {
+              throw new Error('Element is not a form field (input, textarea, or select)');
+            }
+            
+            // For select elements, try to select by value or text
+            if (tagName === 'select') {
+              // Try to find option by value first
+              let option = Array.from(this.options).find(opt => opt.value === text);
+              
+              // If not found by value, try by text content
+              if (!option) {
+                option = Array.from(this.options).find(opt => opt.textContent.trim() === text);
+              }
+              
+              if (option) {
+                this.value = option.value;
+                this.selectedIndex = option.index;
+              } else {
+                throw new Error('Option not found in select element: ' + text);
+              }
+            } else {
+              // For input and textarea elements
+              if (clearFirst) {
+                this.value = '';
+              }
+              
+              // Set the value
+              this.value = text;
+              
+              // Trigger input events to notify any listeners
+              this.dispatchEvent(new Event('input', { bubbles: true }));
+              this.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+            
+            // Focus the element
+            this.focus();
+            
+            return {
+              success: true,
+              tagName: this.tagName,
+              id: this.id,
+              className: this.className,
+              value: this.value,
+              type: this.type || null
+            };
+          }
+        `,
+                arguments: [
+                    { value: text },
+                    { value: clearFirst }
+                ],
+                returnByValue: true,
+                userGesture: true
+            });
+            if (fillResponse.exceptionDetails) {
+                return {
+                    success: false,
+                    error: `Fill execution failed: ${fillResponse.exceptionDetails.exception?.description || fillResponse.exceptionDetails.text}`
+                };
+            }
+            return {
+                success: true,
+                data: {
+                    selector: selector,
+                    text: text,
+                    element: fillResponse.result.value,
+                    method: 'CDP'
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `CDP fill failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    async fillViaEval(client, selector, text, clearFirst = true) {
+        try {
+            const escapedSelector = selector.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const escapedText = text.replace(/'/g, "\\'").replace(/"/g, '\\"');
+            const expression = `
+        (function() {
+          const element = document.querySelector('${escapedSelector}');
+          if (!element) {
+            throw new Error('Element with selector "${escapedSelector}" not found');
+          }
+          
+          // Check if element is a form field
+          const tagName = element.tagName.toLowerCase();
+          const inputType = element.type ? element.type.toLowerCase() : '';
+          
+          if (!['input', 'textarea', 'select'].includes(tagName)) {
+            throw new Error('Element is not a form field (input, textarea, or select)');
+          }
+          
+          const text = '${escapedText}';
+          const clearFirst = ${clearFirst};
+          
+          // For select elements, try to select by value or text
+          if (tagName === 'select') {
+            // Try to find option by value first
+            let option = Array.from(element.options).find(opt => opt.value === text);
+            
+            // If not found by value, try by text content
+            if (!option) {
+              option = Array.from(element.options).find(opt => opt.textContent.trim() === text);
+            }
+            
+            if (option) {
+              element.value = option.value;
+              element.selectedIndex = option.index;
+            } else {
+              throw new Error('Option not found in select element: ' + text);
+            }
+          } else {
+            // For input and textarea elements
+            if (clearFirst) {
+              element.value = '';
+            }
+            
+            // Set the value
+            element.value = text;
+            
+            // Trigger input events to notify any listeners
+            element.dispatchEvent(new Event('input', { bubbles: true }));
+            element.dispatchEvent(new Event('change', { bubbles: true }));
+          }
+          
+          // Focus the element
+          element.focus();
+          
+          return {
+            success: true,
+            tagName: element.tagName,
+            id: element.id,
+            className: element.className,
+            value: element.value,
+            type: element.type || null
+          };
+        })()
+      `;
+            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,
+                    text: text,
+                    element: response.result.value,
+                    method: 'eval'
+                }
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                error: `Eval fill failed: ${error instanceof Error ? error.message : String(error)}`
+            };
+        }
+    }
+    validateArgs(args) {
+        if (typeof args !== 'object' || args === null) {
+            return false;
+        }
+        const fillArgs = args;
+        if (!fillArgs.selector || typeof fillArgs.selector !== 'string') {
+            return false;
+        }
+        if (fillArgs.text === undefined || fillArgs.text === null || typeof fillArgs.text !== 'string') {
+            return false;
+        }
+        if (fillArgs.waitForElement !== undefined && typeof fillArgs.waitForElement !== 'boolean') {
+            return false;
+        }
+        if (fillArgs.timeout !== undefined && typeof fillArgs.timeout !== 'number') {
+            return false;
+        }
+        if (fillArgs.clearFirst !== undefined && typeof fillArgs.clearFirst !== 'boolean') {
+            return false;
+        }
+        return true;
+    }
+    getHelp() {
+        return `
+fill - Fill a form field with text using CSS selector
+
+Usage:
+  fill <selector> <text>
+  fill "#username" "john@example.com"
+  fill "input[name='password']" "secret123" --timeout 10000
+  fill "#country" "United States" --no-clear
+
+Arguments:
+  <selector>              CSS selector for the form field to fill
+  <text>                  Text to input into the field
+
+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)
+  --clear-first          Clear field before filling (default: true)
+  --no-clear             Don't clear field before filling
+
+Examples:
+  # Fill a text input by ID
+  fill "#username" "john@example.com"
+
+  # Fill a password field
+  fill "input[type='password']" "secret123"
+
+  # Fill a textarea
+  fill "#message" "Hello, this is a test message"
+
+  # Select an option in a dropdown (by value or text)
+  fill "#country" "US"
+  fill "#country" "United States"
+
+  # Fill without clearing existing content
+  fill "#notes" " - Additional note" --no-clear
+
+  # Fill with custom timeout
+  fill ".slow-loading-field" "value" --timeout 10000
+
+Note:
+  - Works with input, textarea, and select elements
+  - For select elements, matches by option value first, then by text content
+  - Automatically triggers 'input' and 'change' events
+  - Uses CDP DOM.querySelector and Runtime.callFunctionOn for precise control
+  - Falls back to JavaScript eval if CDP approach fails
+`;
+    }
+}
+exports.FillHandler = FillHandler;