Skip to main content
Glama

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
NameRequiredDescriptionDefault
selectorYesCSS selector

Implementation Reference

  • 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"], }, },
  • 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, }; }
  • 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"], },

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/noisysocks/autoconsent-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server