chrome-cdp-cli 2.0.4 → 2.1.0

package/dist/handlers/TakeSnapshotHandler.js

@@ -5,19 +5,20 @@ const fs_1 = require("fs");
 const path_1 = require("path");
 class TakeSnapshotHandler {
     constructor() {
-        this.name = 'snapshot';
+        this.name = "dom";
+        this.aliases = ["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',
+            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) {
@@ -30,10 +31,10 @@ class TakeSnapshotHandler {
         if (process.env.NO_COLOR) {
             return false;
         }
-        if (process.env.FORCE_COLOR === '0') {
+        if (process.env.FORCE_COLOR === "0") {
             return false;
         }
-        if (process.env.FORCE_COLOR === '1' || process.env.FORCE_COLOR === 'true') {
+        if (process.env.FORCE_COLOR === "1" || process.env.FORCE_COLOR === "true") {
             return true;
         }
         if (args.filename) {
@@ -47,13 +48,13 @@ class TakeSnapshotHandler {
         return `${color}${text}${this.colors.reset}`;
     }
     colorTag(tagName, useColors) {
-        if (['button', 'a', 'input', 'textarea', 'select'].includes(tagName.toLowerCase())) {
+        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())) {
+        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') {
+        if (tagName.toLowerCase() === "img") {
             return this.colorize(tagName.toUpperCase(), this.colors.magenta, useColors);
         }
         return this.colorize(tagName.toUpperCase(), this.colors.cyan, useColors);
@@ -65,10 +66,10 @@ class TakeSnapshotHandler {
         return this.colorize(`.${className}`, this.colors.yellow, useColors);
     }
     colorAttribute(name, value, useColors) {
-        if (name === 'type') {
+        if (name === "type") {
             return this.colorize(`[${value}]`, this.colors.magenta, useColors);
         }
-        if (name === 'name') {
+        if (name === "name") {
             return this.colorize(`name="${value}"`, this.colors.magenta, useColors);
         }
         return `[${name}="${value}"]`;
@@ -90,12 +91,12 @@ class TakeSnapshotHandler {
     }
     async execute(client, args) {
         const snapshotArgs = args;
-        if (snapshotArgs['no-color']) {
+        if (snapshotArgs["no-color"]) {
             snapshotArgs.color = false;
         }
         try {
-            await client.send('DOM.enable');
-            await client.send('CSS.enable');
+            await client.send("DOM.enable");
+            await client.send("CSS.enable");
             try {
                 return await this.captureWithDOMSnapshot(client, snapshotArgs);
             }
@@ -106,16 +107,16 @@ class TakeSnapshotHandler {
         catch (error) {
             return {
                 success: false,
-                error: error instanceof Error ? error.message : String(error)
+                error: error instanceof Error ? error.message : String(error),
             };
         }
     }
     async captureWithDOMSnapshot(client, snapshotArgs) {
-        await client.send('DOMSnapshot.enable');
+        await client.send("DOMSnapshot.enable");
         const params = this.buildSnapshotParams(snapshotArgs);
-        const response = await client.send('DOMSnapshot.captureSnapshot', params);
+        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');
+            throw new Error("Failed to capture DOM snapshot: empty response");
         }
         const processedSnapshot = this.processSnapshot(response, snapshotArgs);
         if (snapshotArgs.filename) {
@@ -125,23 +126,25 @@ class TakeSnapshotHandler {
                 data: {
                     message: `DOM snapshot saved to ${snapshotArgs.filename}`,
                     filename: snapshotArgs.filename,
-                    format: snapshotArgs.format || 'text',
+                    format: snapshotArgs.format || "text",
                     documentsCount: response.documents.length,
-                    nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
-                }
+                    nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0,
+                },
             };
         }
-        if (snapshotArgs.format !== 'html' && typeof processedSnapshot === 'object' && processedSnapshot !== null) {
+        if (snapshotArgs.format !== "html" &&
+            typeof processedSnapshot === "object" &&
+            processedSnapshot !== null) {
             const snapshotObj = processedSnapshot;
-            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === 'string') {
+            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === "string") {
                 return {
                     success: true,
                     data: {
                         snapshot: snapshotObj.snapshot,
-                        format: 'text',
+                        format: "text",
                         documentsCount: response.documents.length,
-                        nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
-                    }
+                        nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0,
+                    },
                 };
             }
         }
@@ -149,26 +152,28 @@ class TakeSnapshotHandler {
             success: true,
             data: {
                 snapshot: processedSnapshot,
-                format: snapshotArgs.format || 'text',
+                format: snapshotArgs.format || "text",
                 documentsCount: response.documents.length,
-                nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0
-            }
+                nodesCount: response.documents[0]?.nodes?.nodeName?.length || 0,
+            },
         };
     }
     async captureWithDOM(client, snapshotArgs) {
-        const docResponse = await client.send('DOM.getDocument', { depth: -1 });
+        const docResponse = (await client.send("DOM.getDocument", {
+            depth: -1,
+        }));
         if (!docResponse || !docResponse.root) {
-            throw new Error('Failed to get document root');
+            throw new Error("Failed to get document root");
         }
         const url = await this.getCurrentURL(client);
         const title = await this.getCurrentTitle(client);
         let processedSnapshot;
-        if (snapshotArgs.format === 'html') {
-            const htmlResponse = await client.send('DOM.getOuterHTML', {
-                nodeId: docResponse.root.nodeId
-            });
+        if (snapshotArgs.format === "html") {
+            const htmlResponse = (await client.send("DOM.getOuterHTML", {
+                nodeId: docResponse.root.nodeId,
+            }));
             if (!htmlResponse || !htmlResponse.outerHTML) {
-                throw new Error('Failed to get document HTML');
+                throw new Error("Failed to get document HTML");
             }
             processedSnapshot = htmlResponse.outerHTML;
         }
@@ -178,7 +183,7 @@ class TakeSnapshotHandler {
             processedSnapshot = {
                 url,
                 title,
-                snapshot: textSnapshot
+                snapshot: textSnapshot,
             };
         }
         if (snapshotArgs.filename) {
@@ -188,19 +193,21 @@ class TakeSnapshotHandler {
                 data: {
                     message: `DOM snapshot saved to ${snapshotArgs.filename}`,
                     filename: snapshotArgs.filename,
-                    format: snapshotArgs.format || 'text'
-                }
+                    format: snapshotArgs.format || "text",
+                },
             };
         }
-        if (snapshotArgs.format !== 'html' && typeof processedSnapshot === 'object' && processedSnapshot !== null) {
+        if (snapshotArgs.format !== "html" &&
+            typeof processedSnapshot === "object" &&
+            processedSnapshot !== null) {
             const snapshotObj = processedSnapshot;
-            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === 'string') {
+            if (snapshotObj.snapshot && typeof snapshotObj.snapshot === "string") {
                 return {
                     success: true,
                     data: {
                         snapshot: snapshotObj.snapshot,
-                        format: 'text'
-                    }
+                        format: "text",
+                    },
                 };
             }
         }
@@ -208,49 +215,49 @@ class TakeSnapshotHandler {
             success: true,
             data: {
                 snapshot: processedSnapshot,
-                format: snapshotArgs.format || 'text'
-            }
+                format: snapshotArgs.format || "text",
+            },
         };
     }
     async getCurrentURL(client) {
         try {
-            const result = await client.send('Runtime.evaluate', {
-                expression: 'window.location.href',
-                returnByValue: true
-            });
-            return result.result?.value || 'unknown';
+            const result = (await client.send("Runtime.evaluate", {
+                expression: "window.location.href",
+                returnByValue: true,
+            }));
+            return result.result?.value || "unknown";
         }
         catch {
-            return 'unknown';
+            return "unknown";
         }
     }
     async getCurrentTitle(client) {
         try {
-            const result = await client.send('Runtime.evaluate', {
-                expression: 'document.title',
-                returnByValue: true
-            });
-            return result.result?.value || 'unknown';
+            const result = (await client.send("Runtime.evaluate", {
+                expression: "document.title",
+                returnByValue: true,
+            }));
+            return result.result?.value || "unknown";
         }
         catch {
-            return 'unknown';
+            return "unknown";
         }
     }
     buildSnapshotParams(args) {
         const params = {};
         if (args.includePaintOrder) {
-            console.log('Paint order requested but not yet supported');
+            console.log("Paint order requested but not yet supported");
         }
         return params;
     }
     processSnapshot(response, args) {
-        if (args.format === 'html') {
+        if (args.format === "html") {
             return this.convertToHTML(response);
         }
         const doc = response.documents[0];
         if (!doc) {
             return {
-                error: 'No documents found'
+                error: "No documents found",
             };
         }
         const useColors = this.shouldUseColors(args);
@@ -258,17 +265,17 @@ class TakeSnapshotHandler {
         const result = {
             url: doc.documentURL,
             title: doc.title,
-            snapshot: textSnapshot
+            snapshot: textSnapshot,
         };
         return result;
     }
     createTextSnapshot(doc, strings, useColors = true) {
         const nodes = doc.nodes;
         if (!nodes.nodeName || !nodes.nodeType) {
-            return 'Empty document';
+            return "Empty document";
         }
         const nodeTree = this.buildNodeTree(doc, strings);
-        let output = this.colorPageTitle(doc.title || 'Untitled', useColors) + '\n';
+        let output = this.colorPageTitle(doc.title || "Untitled", useColors) + "\n";
         const bodyNode = this.findBodyNode(nodeTree);
         if (bodyNode) {
             output += this.renderNodeAsText(bodyNode, 0, false, [], useColors);
@@ -292,8 +299,8 @@ class TakeSnapshotHandler {
                 nodeType: nodes.nodeType[i],
                 nodeName: nodes.nodeName[i].toLowerCase(),
                 children: [],
-                textContent: '',
-                attributes: {}
+                textContent: "",
+                attributes: {},
             };
             if (nodes.nodeValue?.[i]) {
                 node.textContent = nodes.nodeValue[i].trim();
@@ -301,7 +308,7 @@ class TakeSnapshotHandler {
             if (nodes.textValue?.index.includes(i)) {
                 const textIndex = nodes.textValue.index.indexOf(i);
                 const stringIndex = nodes.textValue.value[textIndex];
-                if (typeof stringIndex === 'number' && strings[stringIndex]) {
+                if (typeof stringIndex === "number" && strings[stringIndex]) {
                     node.textContent = strings[stringIndex].trim();
                 }
             }
@@ -310,7 +317,18 @@ class TakeSnapshotHandler {
                 for (let j = 0; j < attrs.length; j += 2) {
                     const name = strings[parseInt(attrs[j])];
                     const value = strings[parseInt(attrs[j + 1])];
-                    if (['id', 'class', 'type', 'name', 'href', 'src', 'alt', 'placeholder', 'value', 'title'].includes(name)) {
+                    if ([
+                        "id",
+                        "class",
+                        "type",
+                        "name",
+                        "href",
+                        "src",
+                        "alt",
+                        "placeholder",
+                        "value",
+                        "title",
+                    ].includes(name)) {
                         node.attributes[name] = value;
                     }
                 }
@@ -318,7 +336,7 @@ class TakeSnapshotHandler {
             if (nodes.inputValue?.index.includes(i)) {
                 const inputIndex = nodes.inputValue.index.indexOf(i);
                 const stringIndex = nodes.inputValue.value[inputIndex];
-                if (typeof stringIndex === 'number') {
+                if (typeof stringIndex === "number") {
                     node.inputValue = strings[stringIndex];
                 }
             }
@@ -361,31 +379,31 @@ class TakeSnapshotHandler {
             }
             return null;
         };
-        return findNode(nodeTree, 'body') || findNode(nodeTree, 'main') || null;
+        return findNode(nodeTree, "body") || findNode(nodeTree, "main") || null;
     }
     shouldIncludeNode(node) {
-        const skipTags = ['script', 'style', 'meta', 'link', 'head', 'noscript'];
+        const skipTags = ["script", "style", "meta", "link", "head", "noscript"];
         if (skipTags.includes(node.nodeName)) {
             return false;
         }
         if (node.nodeType === 3) {
-            const text = (node.textContent || '').trim();
+            const text = (node.textContent || "").trim();
             return text.length > 0;
         }
         return true;
     }
     renderNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeNode(node)) {
-            return '';
+            return "";
         }
-        let indent = '';
+        let indent = "";
         for (let i = 0; i < parentIsLast.length; i++) {
-            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? "    " : "│   ";
             indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? "└── " : "├── ") : "";
         const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
-        let output = '';
+        let output = "";
         if (node.nodeType === 3) {
             if (node.textContent) {
                 const truncatedText = this.truncateText(node.textContent.trim(), 40);
@@ -400,28 +418,30 @@ class TakeSnapshotHandler {
                 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);
+                const classes = node.attributes.class
+                    .split(/\s+/)
+                    .filter((c) => c.trim().length > 0);
                 classes.forEach((cls) => {
                     attrs.push(this.colorClass(cls.trim(), useColors));
                 });
             }
             if (node.attributes.type) {
-                attrs.push(this.colorAttribute('type', node.attributes.type, useColors));
+                attrs.push(this.colorAttribute("type", node.attributes.type, useColors));
             }
             if (node.attributes.name) {
-                attrs.push(this.colorAttribute('name', node.attributes.name, useColors));
+                attrs.push(this.colorAttribute("name", node.attributes.name, useColors));
             }
             if (attrs.length > 0) {
-                description += `(${attrs.join(' ')})`;
+                description += `(${attrs.join(" ")})`;
             }
-            if (node.nodeName === 'img' && node.attributes.alt) {
+            if (node.nodeName === "img" && node.attributes.alt) {
                 const altText = this.truncateText(node.attributes.alt, 40);
                 description += `: ${this.colorText(altText, useColors)}`;
             }
-            else if (node.nodeName === 'a' && node.attributes.href) {
+            else if (node.nodeName === "a" && node.attributes.href) {
                 description += `: ${this.colorUrl(node.attributes.href, useColors)}`;
             }
-            else if (['input', 'textarea'].includes(node.nodeName)) {
+            else if (["input", "textarea"].includes(node.nodeName)) {
                 if (node.attributes.placeholder) {
                     const placeholderText = this.truncateText(node.attributes.placeholder, 40);
                     description += `: ${this.colorText(placeholderText, useColors)}`;
@@ -430,7 +450,7 @@ class TakeSnapshotHandler {
                     const inputText = this.truncateText(node.inputValue, 40);
                     description += `: ${this.colorText(inputText, useColors)}`;
                 }
-                else if (node.nodeName === 'textarea') {
+                else if (node.nodeName === "textarea") {
                     const textContent = this.extractTextContent(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
@@ -438,10 +458,11 @@ class TakeSnapshotHandler {
                     }
                 }
                 if (node.checked) {
-                    description += ` ${this.colorSpecial('[checked]', useColors)}`;
+                    description += ` ${this.colorSpecial("[checked]", useColors)}`;
                 }
             }
-            else if (node.nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(node.nodeName)) {
+            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);
@@ -449,7 +470,7 @@ class TakeSnapshotHandler {
                 }
             }
             output += `${indent}${prefix}${description}\n`;
-            if (node.nodeName === 'textarea') {
+            if (node.nodeName === "textarea") {
                 return output;
             }
             const meaningfulChildren = node.children.filter((child) => this.shouldIncludeNode(child));
@@ -457,7 +478,7 @@ class TakeSnapshotHandler {
                 const textContent = this.extractTextContent(node);
                 if (textContent && textContent.trim().length > 0) {
                     const truncatedText = this.truncateText(textContent.trim(), 40);
-                    const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                    const treeSymbol = this.colorTreeSymbol("│   └── ", useColors);
                     output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                     return output;
                 }
@@ -475,27 +496,27 @@ class TakeSnapshotHandler {
         return output;
     }
     extractTextContent(node) {
-        let text = '';
+        let text = "";
         if (node.nodeType === 3) {
-            return node.textContent || '';
+            return node.textContent || "";
         }
         if (node.textContent) {
-            text += node.textContent + ' ';
+            text += node.textContent + " ";
         }
         for (const child of node.children) {
-            text += this.extractTextContent(child) + ' ';
+            text += this.extractTextContent(child) + " ";
         }
-        return text.trim().replace(/\s+/g, ' ');
+        return text.trim().replace(/\s+/g, " ");
     }
     truncateText(text, maxLength) {
         if (!text)
-            return '';
+            return "";
         if (text.length <= maxLength)
             return text;
-        return text.substring(0, maxLength) + '...';
+        return text.substring(0, maxLength) + "...";
     }
     buildTextFromDOMNode(root, _url, title, useColors = true) {
-        let output = this.colorPageTitle(title || 'Untitled', useColors) + '\n';
+        let output = this.colorPageTitle(title || "Untitled", useColors) + "\n";
         const bodyNode = this.findBodyInDOMTree(root);
         if (bodyNode) {
             output += this.renderDOMNodeAsText(bodyNode, 0, false, [], useColors);
@@ -512,10 +533,10 @@ class TakeSnapshotHandler {
         return output;
     }
     findBodyInDOMTree(node) {
-        if (node.nodeName && node.nodeName.toLowerCase() === 'body') {
+        if (node.nodeName && node.nodeName.toLowerCase() === "body") {
             return node;
         }
-        if (node.nodeName && node.nodeName.toLowerCase() === 'main') {
+        if (node.nodeName && node.nodeName.toLowerCase() === "main") {
             return node;
         }
         if (node.children) {
@@ -530,38 +551,38 @@ class TakeSnapshotHandler {
     shouldIncludeDOMNode(node) {
         if (!node)
             return false;
-        const nodeName = node.nodeName ? node.nodeName.toLowerCase() : '';
-        const skipTags = ['script', 'style', 'meta', 'link', 'head', 'noscript'];
+        const nodeName = node.nodeName ? node.nodeName.toLowerCase() : "";
+        const skipTags = ["script", "style", "meta", "link", "head", "noscript"];
         if (skipTags.includes(nodeName)) {
             return false;
         }
         if (node.nodeType === 3) {
-            const text = node.nodeValue || '';
+            const text = node.nodeValue || "";
             return text.trim().length > 0;
         }
         return true;
     }
     renderDOMNodeAsText(node, depth, isLast = false, parentIsLast = [], useColors = true) {
         if (!this.shouldIncludeDOMNode(node)) {
-            return '';
+            return "";
         }
-        let indent = '';
+        let indent = "";
         for (let i = 0; i < parentIsLast.length; i++) {
-            const symbol = parentIsLast[i] ? '    ' : '│   ';
+            const symbol = parentIsLast[i] ? "    " : "│   ";
             indent += this.colorTreeSymbol(symbol, useColors);
         }
-        const prefixSymbol = depth > 0 ? (isLast ? '└── ' : '├── ') : '';
+        const prefixSymbol = depth > 0 ? (isLast ? "└── " : "├── ") : "";
         const prefix = this.colorTreeSymbol(prefixSymbol, useColors);
-        let output = '';
+        let output = "";
         if (node.nodeType === 3) {
-            const text = (node.nodeValue || '').trim();
+            const text = (node.nodeValue || "").trim();
             if (text) {
                 const truncatedText = this.truncateText(text, 40);
                 output += `${indent}${prefix}${this.colorText(truncatedText, useColors)}\n`;
             }
         }
         else if (node.nodeType === 1) {
-            const nodeName = (node.nodeName || '').toLowerCase();
+            const nodeName = (node.nodeName || "").toLowerCase();
             const tag = this.colorTag(nodeName, useColors);
             let description = tag;
             const attrs = [];
@@ -569,18 +590,31 @@ class TakeSnapshotHandler {
                 for (let i = 0; i < node.attributes.length; i += 2) {
                     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') {
+                    if ([
+                        "id",
+                        "class",
+                        "type",
+                        "name",
+                        "href",
+                        "src",
+                        "alt",
+                        "placeholder",
+                        "value",
+                        "title",
+                    ].includes(name)) {
+                        if (name === "id") {
                             attrs.push(this.colorId(value, useColors));
                         }
-                        else if (name === 'class') {
-                            const classes = value.split(/\s+/).filter((c) => c.trim().length > 0);
+                        else if (name === "class") {
+                            const classes = value
+                                .split(/\s+/)
+                                .filter((c) => c.trim().length > 0);
                             classes.forEach((cls) => {
                                 attrs.push(this.colorClass(cls.trim(), useColors));
                             });
                         }
-                        else if (name === 'type') {
-                            attrs.push(this.colorAttribute('type', value, useColors));
+                        else if (name === "type") {
+                            attrs.push(this.colorAttribute("type", value, useColors));
                         }
                         else {
                             attrs.push(this.colorAttribute(name, value, useColors));
@@ -589,30 +623,31 @@ class TakeSnapshotHandler {
                 }
             }
             if (attrs.length > 0) {
-                description += `(${attrs.join(' ')})`;
+                description += `(${attrs.join(" ")})`;
             }
-            if (nodeName === 'img' && node.attributes) {
-                const altIndex = node.attributes.indexOf('alt');
+            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 += `: ${this.colorText(altText, useColors)}`;
                 }
             }
-            else if (nodeName === 'a' && node.attributes) {
-                const hrefIndex = node.attributes.indexOf('href');
+            else if (nodeName === "a" && node.attributes) {
+                const hrefIndex = node.attributes.indexOf("href");
                 if (hrefIndex >= 0 && hrefIndex + 1 < node.attributes.length) {
                     description += `: ${this.colorUrl(node.attributes[hrefIndex + 1], useColors)}`;
                 }
             }
-            else if (['input', 'textarea'].includes(nodeName)) {
+            else if (["input", "textarea"].includes(nodeName)) {
                 if (node.attributes) {
-                    const placeholderIndex = node.attributes.indexOf('placeholder');
-                    if (placeholderIndex >= 0 && placeholderIndex + 1 < node.attributes.length) {
+                    const placeholderIndex = node.attributes.indexOf("placeholder");
+                    if (placeholderIndex >= 0 &&
+                        placeholderIndex + 1 < node.attributes.length) {
                         const placeholderText = this.truncateText(node.attributes[placeholderIndex + 1], 40);
                         description += `: ${this.colorText(placeholderText, useColors)}`;
                     }
                 }
-                if (nodeName === 'textarea') {
+                if (nodeName === "textarea") {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent) {
                         const truncatedText = this.truncateText(textContent, 40);
@@ -620,7 +655,8 @@ class TakeSnapshotHandler {
                     }
                 }
             }
-            else if (nodeName === 'button' || ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(nodeName)) {
+            else if (nodeName === "button" ||
+                ["h1", "h2", "h3", "h4", "h5", "h6"].includes(nodeName)) {
                 const textContent = this.extractTextFromDOMNode(node);
                 if (textContent) {
                     const truncatedText = this.truncateText(textContent, 40);
@@ -628,7 +664,7 @@ class TakeSnapshotHandler {
                 }
             }
             output += `${indent}${prefix}${description}\n`;
-            if (nodeName === 'textarea') {
+            if (nodeName === "textarea") {
                 return output;
             }
             if (node.children) {
@@ -637,7 +673,7 @@ class TakeSnapshotHandler {
                     const textContent = this.extractTextFromDOMNode(node);
                     if (textContent && textContent.trim().length > 0) {
                         const truncatedText = this.truncateText(textContent.trim(), 40);
-                        const treeSymbol = this.colorTreeSymbol('│   └── ', useColors);
+                        const treeSymbol = this.colorTreeSymbol("│   └── ", useColors);
                         output += `${indent}${treeSymbol}${this.colorText(truncatedText, useColors)}\n`;
                         return output;
                     }
@@ -657,20 +693,20 @@ class TakeSnapshotHandler {
     }
     extractTextFromDOMNode(node) {
         if (node.nodeType === 3) {
-            return (node.nodeValue || '').trim();
+            return (node.nodeValue || "").trim();
         }
-        let text = '';
+        let text = "";
         if (node.children) {
             for (const child of node.children) {
-                text += this.extractTextFromDOMNode(child) + ' ';
+                text += this.extractTextFromDOMNode(child) + " ";
             }
         }
-        return text.trim().replace(/\s+/g, ' ');
+        return text.trim().replace(/\s+/g, " ");
     }
     convertToHTML(response) {
         const doc = response.documents[0];
         if (!doc)
-            return '';
+            return "";
         const tree = this.buildDOMTree(doc, response.strings);
         return this.renderNodeAsHTML(tree[0], 0);
     }
@@ -689,7 +725,7 @@ class TakeSnapshotHandler {
                 nodeName: nodes.nodeName[i],
                 nodeValue: nodes.nodeValue?.[i],
                 backendNodeId: nodes.backendNodeId?.[i],
-                children: []
+                children: [],
             };
             if (nodes.attributes?.[i]) {
                 const attrs = nodes.attributes[i];
@@ -703,14 +739,14 @@ class TakeSnapshotHandler {
             if (nodes.textValue?.index.includes(i)) {
                 const textIndex = nodes.textValue.index.indexOf(i);
                 const stringIndex = nodes.textValue.value[textIndex];
-                if (typeof stringIndex === 'number') {
+                if (typeof stringIndex === "number") {
                     node.textValue = strings[stringIndex];
                 }
             }
             if (nodes.inputValue?.index.includes(i)) {
                 const inputIndex = nodes.inputValue.index.indexOf(i);
                 const stringIndex = nodes.inputValue.value[inputIndex];
-                if (typeof stringIndex === 'number') {
+                if (typeof stringIndex === "number") {
                     node.inputValue = strings[stringIndex];
                 }
             }
@@ -742,14 +778,14 @@ class TakeSnapshotHandler {
     }
     renderNodeAsHTML(node, depth) {
         if (!node)
-            return '';
-        const indent = '  '.repeat(depth);
+            return "";
+        const indent = "  ".repeat(depth);
         if (node.nodeType === 3) {
-            const text = node.nodeValue || node.textValue || '';
-            return text.trim() ? `${indent}${text.trim()}\n` : '';
+            const text = node.nodeValue || node.textValue || "";
+            return text.trim() ? `${indent}${text.trim()}\n` : "";
         }
         if (node.nodeType === 8) {
-            return `${indent}<!-- ${node.nodeValue || ''} -->\n`;
+            return `${indent}<!-- ${node.nodeValue || ""} -->\n`;
         }
         if (node.nodeType === 1) {
             const tagName = node.nodeName.toLowerCase();
@@ -759,14 +795,29 @@ class TakeSnapshotHandler {
                     html += ` ${name}="${value}"`;
                 }
             }
-            const selfClosing = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'param', 'source', 'track', 'wbr'];
+            const selfClosing = [
+                "area",
+                "base",
+                "br",
+                "col",
+                "embed",
+                "hr",
+                "img",
+                "input",
+                "link",
+                "meta",
+                "param",
+                "source",
+                "track",
+                "wbr",
+            ];
             if (selfClosing.includes(tagName)) {
-                html += ' />\n';
+                html += " />\n";
                 return html;
             }
-            html += '>';
+            html += ">";
             if (node.children && node.children.length > 0) {
-                html += '\n';
+                html += "\n";
                 for (const child of node.children) {
                     html += this.renderNodeAsHTML(child, depth + 1);
                 }
@@ -777,27 +828,28 @@ class TakeSnapshotHandler {
             }
             return html;
         }
-        return '';
+        return "";
     }
     async saveSnapshot(snapshotData, filename, format) {
         try {
             const dir = (0, path_1.dirname)(filename);
             await fs_1.promises.mkdir(dir, { recursive: true });
             let content;
-            if (format === 'html') {
+            if (format === "html") {
                 content = snapshotData;
             }
-            else if (format === 'text' || !format) {
-                if (typeof snapshotData === 'object' && snapshotData !== null) {
+            else if (format === "text" || !format) {
+                if (typeof snapshotData === "object" && snapshotData !== null) {
                     const snapshotObj = snapshotData;
-                    if (snapshotObj.snapshot && typeof snapshotObj.snapshot === 'string') {
+                    if (snapshotObj.snapshot &&
+                        typeof snapshotObj.snapshot === "string") {
                         content = snapshotObj.snapshot;
                     }
                     else {
                         content = JSON.stringify(snapshotData, null, 2);
                     }
                 }
-                else if (typeof snapshotData === 'string') {
+                else if (typeof snapshotData === "string") {
                     content = snapshotData;
                 }
                 else {
@@ -807,33 +859,39 @@ class TakeSnapshotHandler {
             else {
                 content = JSON.stringify(snapshotData, null, 2);
             }
-            await fs_1.promises.writeFile(filename, content, 'utf-8');
+            await fs_1.promises.writeFile(filename, content, "utf-8");
         }
         catch (error) {
             throw new Error(`Failed to save DOM snapshot to "${filename}": ${error instanceof Error ? error.message : String(error)}`);
         }
     }
     validateArgs(args) {
-        if (typeof args !== 'object' || args === null) {
+        if (typeof args !== "object" || args === null) {
             return false;
         }
         const snapshotArgs = args;
-        if (snapshotArgs.filename !== undefined && typeof snapshotArgs.filename !== 'string') {
+        if (snapshotArgs.filename !== undefined &&
+            typeof snapshotArgs.filename !== "string") {
             return false;
         }
-        if (snapshotArgs.format !== undefined && !['json', 'html', 'text'].includes(snapshotArgs.format)) {
+        if (snapshotArgs.format !== undefined &&
+            !["json", "html", "text"].includes(snapshotArgs.format)) {
             return false;
         }
-        if (snapshotArgs.includeStyles !== undefined && typeof snapshotArgs.includeStyles !== 'boolean') {
+        if (snapshotArgs.includeStyles !== undefined &&
+            typeof snapshotArgs.includeStyles !== "boolean") {
             return false;
         }
-        if (snapshotArgs.includeAttributes !== undefined && typeof snapshotArgs.includeAttributes !== 'boolean') {
+        if (snapshotArgs.includeAttributes !== undefined &&
+            typeof snapshotArgs.includeAttributes !== "boolean") {
             return false;
         }
-        if (snapshotArgs.includePaintOrder !== undefined && typeof snapshotArgs.includePaintOrder !== 'boolean') {
+        if (snapshotArgs.includePaintOrder !== undefined &&
+            typeof snapshotArgs.includePaintOrder !== "boolean") {
             return false;
         }
-        if (snapshotArgs.includeTextIndex !== undefined && typeof snapshotArgs.includeTextIndex !== 'boolean') {
+        if (snapshotArgs.includeTextIndex !== undefined &&
+            typeof snapshotArgs.includeTextIndex !== "boolean") {
             return false;
         }
         return true;