chrome-cdp-cli 2.0.2 → 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
@@ -459,6 +459,17 @@ class CommandSchemaRegistry {
                     description: 'Include text index information',
                     type: 'boolean',
                     default: false
+                },
+                {
+                    name: 'color',
+                    description: 'Enable color output (default: auto-detect)',
+                    type: 'boolean'
+                },
+                {
+                    name: 'no-color',
+                    description: 'Disable color output',
+                    type: 'boolean',
+                    default: false
                 }
             ],
             arguments: []

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/client/CDPClient.js

@@ -141,7 +141,8 @@ class CDPClient {
         }
     }
     async discoverTargets(host, port) {
-        const response = await (0, node_fetch_1.default)(`http://${host}:${port}/json/list`);
+        const normalizedHost = host === 'localhost' ? '127.0.0.1' : host;
+        const response = await (0, node_fetch_1.default)(`http://${normalizedHost}:${port}/json/list`);
         if (!response.ok) {
             throw new Error(`Failed to discover targets: ${response.statusText}`);
         }

package/dist/connection/ConnectionManager.js

@@ -44,7 +44,8 @@ class ConnectionManager {
         this.logger = logger || new logger_1.Logger();
     }
     async discoverTargets(host, port) {
-        const url = `http://${host}:${port}/json/list`;
+        const normalizedHost = host === 'localhost' ? '127.0.0.1' : host;
+        const url = `http://${normalizedHost}:${port}/json/list`;
         try {
             this.logger.debug(`Discovering targets at ${url}`);
             const http = await Promise.resolve().then(() => __importStar(require('http')));

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/dist/handlers/TakeSnapshotHandler.js

@@ -6,9 +6,93 @@ const path_1 = require("path");
 class TakeSnapshotHandler {
     constructor() {
         this.name = 'snapshot';
+        this.colors = {
+            reset: '\x1b[0m',
+            bright: '\x1b[1m',
+            dim: '\x1b[2m',
+            red: '\x1b[31m',
+            green: '\x1b[32m',
+            yellow: '\x1b[33m',
+            blue: '\x1b[34m',
+            magenta: '\x1b[35m',
+            cyan: '\x1b[36m',
+            white: '\x1b[37m',
+            gray: '\x1b[90m',
+        };
+    }
+    shouldUseColors(args) {
+        if (args.color === false) {
+            return false;
+        }
+        if (args.color === true) {
+            return true;
+        }
+        if (process.env.NO_COLOR) {
+            return false;
+        }
+        if (process.env.FORCE_COLOR === '0') {
+            return false;
+        }
+        if (process.env.FORCE_COLOR === '1' || process.env.FORCE_COLOR === 'true') {
+            return true;
+        }
+        if (args.filename) {
+            return false;
+        }
+        return process.stdout.isTTY === true;
+    }
+    colorize(text, color, useColors) {
+        if (!useColors)
+            return text;
+        return `${color}${text}${this.colors.reset}`;
+    }
+    colorTag(tagName, useColors) {
+        if (['button', 'a', 'input', 'textarea', 'select'].includes(tagName.toLowerCase())) {
+            return this.colorize(tagName.toUpperCase(), this.colors.green + this.colors.bright, useColors);
+        }
+        if (['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName.toLowerCase())) {
+            return this.colorize(tagName.toUpperCase(), this.colors.cyan + this.colors.bright, useColors);
+        }
+        if (tagName.toLowerCase() === 'img') {
+            return this.colorize(tagName.toUpperCase(), this.colors.magenta, useColors);
+        }
+        return this.colorize(tagName.toUpperCase(), this.colors.cyan, useColors);
+    }
+    colorId(id, useColors) {
+        return this.colorize(`#${id}`, this.colors.green, useColors);
+    }
+    colorClass(className, useColors) {
+        return this.colorize(`.${className}`, this.colors.yellow, useColors);
+    }
+    colorAttribute(name, value, useColors) {
+        if (name === 'type') {
+            return this.colorize(`[${value}]`, this.colors.magenta, useColors);
+        }
+        if (name === 'name') {
+            return this.colorize(`name="${value}"`, this.colors.magenta, useColors);
+        }
+        return `[${name}="${value}"]`;
+    }
+    colorText(text, useColors) {
+        return this.colorize(`"${text}"`, this.colors.white, useColors);
+    }
+    colorUrl(url, useColors) {
+        return this.colorize(`"${url}"`, this.colors.blue, useColors);
+    }
+    colorSpecial(text, useColors) {
+        return this.colorize(text, this.colors.yellow, useColors);
+    }
+    colorTreeSymbol(symbol, useColors) {
+        return this.colorize(symbol, this.colors.gray, useColors);
+    }
+    colorPageTitle(title, useColors) {
+        return this.colorize(`PAGE: ${title}`, this.colors.cyan + this.colors.bright, useColors);
     }
     async execute(client, args) {
         const snapshotArgs = args;
+        if (snapshotArgs['no-color']) {
+            snapshotArgs.color = false;
+        }
         try {
             await client.send('DOM.enable');
             await client.send('CSS.enable');
@@ -89,7 +173,8 @@ class TakeSnapshotHandler {
             processedSnapshot = htmlResponse.outerHTML;
         }
         else {
-            const textSnapshot = this.buildTextFromDOMNode(docResponse.root, url, title);
+            const useColors = this.shouldUseColors(snapshotArgs);
+            const textSnapshot = this.buildTextFromDOMNode(docResponse.root, url, title, useColors);
             processedSnapshot = {
                 url,
                 title,
@@ -168,7 +253,8 @@ class TakeSnapshotHandler {
                 error: 'No documents found'
             };
         }
-        const textSnapshot = this.createTextSnapshot(doc, response.strings);
+        const useColors = this.shouldUseColors(args);
+        const textSnapshot = this.createTextSnapshot(doc, response.strings, useColors);
         const result = {
             url: doc.documentURL,
             title: doc.title,
@@ -176,21 +262,21 @@ class TakeSnapshotHandler {
         };
         return result;
     }
-    createTextSnapshot(doc, strings) {
+    createTextSnapshot(doc, strings, useColors = true) {
         const nodes = doc.nodes;
         if (!nodes.nodeName || !nodes.nodeType) {
             return 'Empty document';
         }
         const nodeTree = this.buildNodeTree(doc, strings);
-        let output = `PAGE: ${doc.title || 'Untitled'}\n`;
+        let output = this.colorPageTitle(doc.title || 'Untitled', useColors) + '\n';
         const bodyNode = this.findBodyNode(nodeTree);
         if (bodyNode) {
-            output += this.renderNodeAsText(bodyNode, 0);
+            output += this.renderNodeAsText(bodyNode, 0, false, [], useColors);
         }
         else {
             for (const node of nodeTree) {
                 if (this.shouldIncludeNode(node)) {
-                    output += this.renderNodeAsText(node, 0);
+                    output += this.renderNodeAsText(node, 0, false, [], useColors);
                 }
             }
         }
@@ -288,72 +374,78 @@ class TakeSnapshotHandler {
         }
         return true;
     }
-    renderNodeAsText(node, depth, isLast = false, parentIsLast = []) {
+    renderNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeNode(node)) {
             return '';
         }
         let indent = '';
         for (let i = 0; i < parentIsLast.length; i++) {
-            indent += parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
         let output = '';
         if (node.nodeType === 3) {
             if (node.textContent) {
                 const truncatedText = this.truncateText(node.textContent.trim(), 40);
-                output += `${indent}${prefix}"${truncatedText}"\n`;
+                output += `${indent}${prefix}${this.colorText(truncatedText, useColors)}\n`;
             }
         }
         else if (node.nodeType === 1) {
-            const tag = node.nodeName.toUpperCase();
+            const tag = this.colorTag(node.nodeName, useColors);
             let description = tag;
             const attrs = [];
-            if (node.attributes.id)
-                attrs.push(`#${node.attributes.id}`);
+            if (node.attributes.id) {
+                attrs.push(this.colorId(node.attributes.id, useColors));
+            }
             if (node.attributes.class) {
                 const classes = node.attributes.class.split(/\s+/).filter((c) => c.trim().length > 0);
                 classes.forEach((cls) => {
-                    attrs.push(`.${cls.trim()}`);
+                    attrs.push(this.colorClass(cls.trim(), useColors));
                 });
             }
-            if (node.attributes.type)
-                attrs.push(`[${node.attributes.type}]`);
-            if (node.attributes.name)
-                attrs.push(`name="${node.attributes.name}"`);
+            if (node.attributes.type) {
+                attrs.push(this.colorAttribute('type', node.attributes.type, useColors));
+            }
+            if (node.attributes.name) {
+                attrs.push(this.colorAttribute('name', node.attributes.name, useColors));
+            }
             if (attrs.length > 0) {
                 description += `(${attrs.join(' ')})`;
             }
             if (node.nodeName === 'img' && node.attributes.alt) {
                 const altText = this.truncateText(node.attributes.alt, 40);
-                description += `: "${altText}"`;
+                description += `: ${this.colorText(altText, useColors)}`;
             }
             else if (node.nodeName === 'a' && node.attributes.href) {
-                description += `: "${node.attributes.href}"`;
+                description += `: ${this.colorUrl(node.attributes.href, useColors)}`;
             }
             else if (['input', 'textarea'].includes(node.nodeName)) {
                 if (node.attributes.placeholder) {
                     const placeholderText = this.truncateText(node.attributes.placeholder, 40);
-                    description += `: "${placeholderText}"`;
+                    description += `: ${this.colorText(placeholderText, useColors)}`;
                 }
                 else if (node.inputValue) {
                     const inputText = this.truncateText(node.inputValue, 40);
-                    description += `: "${inputText}"`;
+                    description += `: ${this.colorText(inputText, useColors)}`;
                 }
                 else if (node.nodeName === 'textarea') {
                     const textContent = this.extractTextContent(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
-                        description += `: "${truncatedText}"`;
+                        description += `: ${this.colorText(truncatedText, useColors)}`;
                     }
                 }
-                if (node.checked)
-                    description += ' [checked]';
+                if (node.checked) {
+                    description += ` ${this.colorSpecial('[checked]', useColors)}`;
+                }
             }
             else if (node.nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.nodeName)) {
                 const textContent = this.extractTextContent(node);
                 if (textContent) {
                     const truncatedText = this.truncateText(textContent, 40);
-                    description += `: "${truncatedText}"`;
+                    description += `: ${this.colorText(truncatedText, useColors)}`;
                 }
             }
             output += `${indent}${prefix}${description}\n`;
@@ -365,7 +457,8 @@ class TakeSnapshotHandler {
                 const textContent = this.extractTextContent(node);
                 if (textContent && textContent.trim().length > 0) {
                     const truncatedText = this.truncateText(textContent.trim(), 40);
-                    output += `${indent}│   └── "${truncatedText}"\n`;
+                    const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                    output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                     return output;
                 }
                 return output;
@@ -375,7 +468,7 @@ class TakeSnapshotHandler {
                 for (let i = 0; i < meaningfulChildren.length; i++) {
                     const child = meaningfulChildren[i];
                     const childIsLast = i === meaningfulChildren.length - 1;
-                    output += this.renderNodeAsText(child, depth + 1, childIsLast, newParentIsLast);
+                    output += this.renderNodeAsText(child, depth + 1, childIsLast, newParentIsLast, useColors);
                 }
             }
         }
@@ -401,17 +494,17 @@ class TakeSnapshotHandler {
             return text;
         return text.substring(0, maxLength) + '...';
     }
-    buildTextFromDOMNode(root, _url, title) {
-        let output = `PAGE: ${title || 'Untitled'}\n`;
+    buildTextFromDOMNode(root, _url, title, useColors = true) {
+        let output = this.colorPageTitle(title || 'Untitled', useColors) + '\n';
         const bodyNode = this.findBodyInDOMTree(root);
         if (bodyNode) {
-            output += this.renderDOMNodeAsText(bodyNode, 0);
+            output += this.renderDOMNodeAsText(bodyNode, 0, false, [], useColors);
         }
         else {
             if (root.children) {
                 for (const child of root.children) {
                     if (this.shouldIncludeDOMNode(child)) {
-                        output += this.renderDOMNodeAsText(child, 0);
+                        output += this.renderDOMNodeAsText(child, 0, false, [], useColors);
                     }
                 }
             }
@@ -448,25 +541,28 @@ class TakeSnapshotHandler {
         }
         return true;
     }
-    renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = []) {
+    renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeDOMNode(node)) {
             return '';
         }
         let indent = '';
         for (let i = 0; i < parentIsLast.length; i++) {
-            indent += parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefix = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
         let output = '';
         if (node.nodeType === 3) {
             const text = (node.nodeValue || '').trim();
             if (text) {
                 const truncatedText = this.truncateText(text, 40);
-                output += `${indent}${prefix}"${truncatedText}"\n`;
+                output += `${indent}${prefix}${this.colorText(truncatedText, useColors)}\n`;
             }
         }
         else if (node.nodeType === 1) {
-            const tag = (node.nodeName || '').toUpperCase();
+            const nodeName = (node.nodeName || '').toLowerCase();
+            const tag = this.colorTag(nodeName, useColors);
             let description = tag;
             const attrs = [];
             if (node.attributes) {
@@ -474,36 +570,38 @@ class TakeSnapshotHandler {
                     const name = node.attributes[i];
                     const value = node.attributes[i + 1];
                     if (['id', 'class', 'type', 'name', 'href', 'src', 'alt', 'placeholder', 'value', 'title'].includes(name)) {
-                        if (name === 'id')
-                            attrs.push(`#${value}`);
+                        if (name === 'id') {
+                            attrs.push(this.colorId(value, useColors));
+                        }
                         else if (name === 'class') {
                             const classes = value.split(/\s+/).filter((c) => c.trim().length > 0);
                             classes.forEach((cls) => {
-                                attrs.push(`.${cls.trim()}`);
+                                attrs.push(this.colorClass(cls.trim(), useColors));
                             });
                         }
-                        else if (name === 'type')
-                            attrs.push(`[${value}]`);
-                        else
-                            attrs.push(`${name}="${value}"`);
+                        else if (name === 'type') {
+                            attrs.push(this.colorAttribute('type', value, useColors));
+                        }
+                        else {
+                            attrs.push(this.colorAttribute(name, value, useColors));
+                        }
                     }
                 }
             }
             if (attrs.length > 0) {
                 description += `(${attrs.join(' ')})`;
             }
-            const nodeName = (node.nodeName || '').toLowerCase();
             if (nodeName === 'img' && node.attributes) {
                 const altIndex = node.attributes.indexOf('alt');
                 if (altIndex >= 0 && altIndex + 1 < node.attributes.length) {
                     const altText = this.truncateText(node.attributes[altIndex + 1], 40);
-                    description += `: "${altText}"`;
+                    description += `: ${this.colorText(altText, useColors)}`;
                 }
             }
             else if (nodeName === 'a' && node.attributes) {
                 const hrefIndex = node.attributes.indexOf('href');
                 if (hrefIndex >= 0 && hrefIndex + 1 < node.attributes.length) {
-                    description += `: "${node.attributes[hrefIndex + 1]}"`;
+                    description += `: ${this.colorUrl(node.attributes[hrefIndex + 1], useColors)}`;
                 }
             }
             else if (['input', 'textarea'].includes(nodeName)) {
@@ -511,14 +609,14 @@ class TakeSnapshotHandler {
                     const placeholderIndex = node.attributes.indexOf('placeholder');
                     if (placeholderIndex >= 0 && placeholderIndex + 1 < node.attributes.length) {
                         const placeholderText = this.truncateText(node.attributes[placeholderIndex + 1], 40);
-                        description += `: "${placeholderText}"`;
+                        description += `: ${this.colorText(placeholderText, useColors)}`;
                     }
                 }
                 if (nodeName === 'textarea') {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
-                        description += `: "${truncatedText}"`;
+                        description += `: ${this.colorText(truncatedText, useColors)}`;
                     }
                 }
             }
@@ -526,7 +624,7 @@ class TakeSnapshotHandler {
                 const textContent = this.extractTextFromDOMNode(node);
                 if (textContent) {
                     const truncatedText = this.truncateText(textContent, 40);
-                    description += `: "${truncatedText}"`;
+                    description += `: ${this.colorText(truncatedText, useColors)}`;
                 }
             }
             output += `${indent}${prefix}${description}\n`;
@@ -539,7 +637,8 @@ class TakeSnapshotHandler {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent && textContent.trim().length > 0) {
                         const truncatedText = this.truncateText(textContent.trim(), 40);
-                        output += `${indent}│   └── "${truncatedText}"\n`;
+                        const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                        output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                         return output;
                     }
                     return output;
@@ -549,7 +648,7 @@ class TakeSnapshotHandler {
                     for (let i = 0; i < meaningfulChildren.length; i++) {
                         const child = meaningfulChildren[i];
                         const childIsLast = i === meaningfulChildren.length - 1;
-                        output += this.renderDOMNodeAsText(child, depth + 1, childIsLast, newParentIsLast);
+                        output += this.renderDOMNodeAsText(child, depth + 1, childIsLast, newParentIsLast, useColors);
                     }
                 }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-cdp-cli",
-  "version": "2.0.2",
+  "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",