get-element-html

Instructions

Implementation Reference

• src/tools/browser-tools.ts:602-604 (registration)

  The tool 'get-element-html' is registered in browser-tools.ts via server.tool() call at line 603.

  // Element HTML content retrieval tool
  server.tool(
    'get-element-html',

• src/tools/browser-tools.ts:606-610 (schema)

  Zod schema defining three input parameters: selector (string, required), includeOuter (boolean, optional, default false), depth (number, optional, default -1).

  {
    selector: z.string().describe('CSS selector of the element to inspect'),
    includeOuter: z.boolean().optional().describe("If true, includes the selected element's outer HTML; otherwise returns only inner HTML (default: false)"),
    depth: z.number().int().min(-1).optional().describe('Control HTML depth limit: -1 = unlimited (default), 0 = text only, 1+ = limited depth with deeper elements shown as <!-- omitted -->')
  },

• src/tools/browser-tools.ts:611-707 (handler)

  The handler function that executes 'get-element-html' logic. It waits for the selector, then evaluates JavaScript in the browser to retrieve HTML content with optional depth control: depth=-1 returns all HTML, depth=0 returns textContent only, depth>=1 limits nesting (replacing deeper elements with '<!-- omitted -->').

    async ({ selector, includeOuter = false, depth = -1 }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        // Check if element exists
        await browserStatus.page.waitForSelector(selector, { state: 'visible', timeout: 5000 });
  
        // Get element's HTML content with depth control
        const htmlContent = await browserStatus.page.evaluate(({ selector, includeOuter, depth }: { selector: string; includeOuter: boolean; depth: number }) => {
          const element = document.querySelector(selector);
          if (!element) return null;
          
          // Handle unlimited depth (backward compatibility)
          if (depth === -1) {
            return includeOuter ? element.outerHTML : element.innerHTML;
          }
          
          // Handle text-only mode
          if (depth === 0) {
            return element.textContent || '';
          }
          
          // Handle depth-limited mode with DOM cloning
          const cloned = element.cloneNode(true) as Element;
          
          function trimDepth(node: Element, currentDepth: number) {
            if (currentDepth >= depth) {
              // Replace content with omitted marker
              node.innerHTML = '<!-- omitted -->';
              return;
            }
            
            // Process child elements
            Array.from(node.children).forEach(child => {
              trimDepth(child, currentDepth + 1);
            });
          }
          
          // Start depth counting from appropriate level
          trimDepth(cloned, includeOuter ? 0 : 1);
          
          return includeOuter ? cloned.outerHTML : cloned.innerHTML;
        }, { selector, includeOuter, depth });
  
        if (htmlContent === null) {
          return {
            content: [
              {
                type: 'text',
                text: `Element with selector "${selector}" not found`
              }
            ],
            isError: true
          };
        }
  
        // Result message construction
        const resultMessage = {
          selector,
          htmlType: depth === 0 ? 'textContent' : (includeOuter ? 'outerHTML' : 'innerHTML'),
          depth,
          depthLimited: depth !== -1,
          length: htmlContent.length,
          checkpointId: await getCurrentCheckpointId(browserStatus.page)
        };
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(resultMessage, null, 2)
            },
            {
              type: 'text',
              text: htmlContent
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to get element HTML: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to get element HTML: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );

• src/index.ts:87-88 (registration)

  Registration of browser tools (including get-element-html) is initiated from the main entry point index.ts.

  registerBrowserTools(
    server,