print_element
Extract full HTML content from web page elements using CSS selectors to analyze and test consent management interfaces in browser automation workflows.
Instructions
Outputs the full HTML of the given element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector |
Implementation Reference
- src/tools/dom.ts:255-361 (handler)Core handler function that uses Puppeteer to evaluate JavaScript on the page, selecting the element by CSS selector and serializing its full HTML structure recursively, including child elements, text content, shadow DOM, and same-origin iframe contents.export async function printElement( page: Page, selector: string, ): Promise<string> { return await page.evaluate((sel: string) => { function serializeFullElement(element: Element, depth: number = 0): string { const tagName = element.tagName.toLowerCase(); const indent = " ".repeat(depth); // Get attributes let attributes = ""; for (const attr of Array.from(element.attributes)) { attributes += ` ${attr.name}="${attr.value}"`; } const openTag = `${indent}<${tagName}${attributes}>`; let content = ""; // Check if element has shadow DOM or complex content first const hasShadowDOM = !!(element as any).shadowRoot; const hasChildElements = Array.from(element.childNodes).some( (child) => child.nodeType === Node.ELEMENT_NODE, ); // Check if element has only text content (no child elements or shadow DOM) const hasOnlyTextContent = !hasShadowDOM && !hasChildElements && Array.from(element.childNodes).every( (child) => child.nodeType === Node.TEXT_NODE, ); if (hasOnlyTextContent) { // Use inline format for simple text elements const textContent = element.textContent?.trim(); if (textContent) { return `${openTag}${textContent}</${tagName}>`; } else { return `${openTag}</${tagName}>`; } } // Process child nodes with indentation for (const child of Array.from(element.childNodes)) { if (child.nodeType === Node.TEXT_NODE) { const textContent = child.textContent?.trim(); if (textContent) { content += `\n${indent} ${textContent}`; } } else if (child.nodeType === Node.ELEMENT_NODE) { const childElement = child as Element; const serializedChild = serializeFullElement(childElement, depth + 1); if (serializedChild) { content += "\n" + serializedChild; } } } // Handle shadow DOM content if ((element as any).shadowRoot) { const shadowRoot = (element as any).shadowRoot; for (const child of Array.from(shadowRoot.children)) { const serializedChild = serializeFullElement( child as Element, depth + 1, ); if (serializedChild) { content += "\n" + serializedChild; } } } // Handle iframe content if (element.tagName.toLowerCase() === "iframe") { try { const iframeDoc = (element as HTMLIFrameElement).contentDocument; if (iframeDoc && iframeDoc.body) { const serializedIframe = serializeFullElement( iframeDoc.body, depth + 1, ); if (serializedIframe) { content += "\n" + serializedIframe; } } } catch (e) { // Cross-origin iframe, can't access content } } const closeTag = `${indent}</${tagName}>`; if (content) { return `${openTag}${content}\n${closeTag}`; } else { return `${openTag}</${tagName}>`; } } const element = document.querySelector(sel); if (!element) { throw new Error(`Element not found: ${sel}`); } return serializeFullElement(element); }, selector); }
- src/index.ts:117-127 (registration)Tool registration in the TOOLS array, defining the name, description, and input schema (selector: string) for the print_element tool.{ name: "print_element", description: "Outputs the full HTML of the given element", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector" }, }, required: ["selector"], }, },
- src/index.ts:406-428 (handler)Handler dispatch in the main tool call switch statement, invoking the printElement function with page and selector, and formatting the result as MCP CallToolResult.case "print_element": try { const html = await printElement(page, args.selector); return { content: [ { type: "text", text: html, }, ], isError: false, }; } catch (error) { return { content: [ { type: "text", text: `Failed to print element: ${(error as Error).message}`, }, ], isError: true, }; }
- src/index.ts:120-126 (schema)Input schema definition for the print_element tool, specifying a required 'selector' string parameter.inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector" }, }, required: ["selector"], },