get-element-dimensions

Instructions

Implementation Reference

• src/tools/browser-tools.ts:445-527 (handler)

  The 'get-element-dimensions' tool handler function. It retrieves dimension and position information (width, height, top, left, bottom, right, x, y, isVisible) of a DOM element using getBoundingClientRect(), registered via server.tool() on the MCP server.

  server.tool(
    'get-element-dimensions',
    'Retrieves dimension and position information of a specific element',
    {
      selector: z.string().describe('CSS selector of the element to inspect')
    },
    async ({ selector }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        // Get current checkpoint ID
        const checkpointId = await getCurrentCheckpointId(browserStatus.page);
  
        // Retrieve element dimensions and position information
        const dimensions = await browserStatus.page.evaluate((selector: string) => {
          const element = document.querySelector(selector);
          if (!element) return null;
  
          const rect = element.getBoundingClientRect();
          return {
            width: rect.width,
            height: rect.height,
            top: rect.top,
            left: rect.left,
            bottom: rect.bottom,
            right: rect.right,
            x: rect.x,
            y: rect.y,
            isVisible: !!(
              rect.width &&
              rect.height &&
              window.getComputedStyle(element).display !== 'none' &&
              window.getComputedStyle(element).visibility !== 'hidden'
            )
          };
        }, selector);
  
        if (!dimensions) {
          return {
            content: [
              {
                type: 'text',
                text: `Element with selector "${selector}" not found`
              }
            ],
            isError: true
          };
        }
  
        // Result message construction
        const resultMessage = {
          selector,
          dimensions,
          checkpointId
        };
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(resultMessage, null, 2)
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to get element dimensions: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to get element dimensions: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );

• src/tools/browser-tools.ts:448-449 (schema)

  Input schema for 'get-element-dimensions': requires a single 'selector' string parameter (CSS selector of the element to inspect), validated with Zod.

  {
    selector: z.string().describe('CSS selector of the element to inspect')

• src/tools/browser-tools.ts:445-527 (registration)

  Tool is registered via server.tool('get-element-dimensions', ...) inside the registerBrowserTools() function in src/tools/browser-tools.ts.

  server.tool(
    'get-element-dimensions',
    'Retrieves dimension and position information of a specific element',
    {
      selector: z.string().describe('CSS selector of the element to inspect')
    },
    async ({ selector }) => {
      try {
        // Check browser status
        const browserStatus = getContextForOperation();
        if (!browserStatus.isStarted) {
          return browserStatus.error;
        }
  
        // Get current checkpoint ID
        const checkpointId = await getCurrentCheckpointId(browserStatus.page);
  
        // Retrieve element dimensions and position information
        const dimensions = await browserStatus.page.evaluate((selector: string) => {
          const element = document.querySelector(selector);
          if (!element) return null;
  
          const rect = element.getBoundingClientRect();
          return {
            width: rect.width,
            height: rect.height,
            top: rect.top,
            left: rect.left,
            bottom: rect.bottom,
            right: rect.right,
            x: rect.x,
            y: rect.y,
            isVisible: !!(
              rect.width &&
              rect.height &&
              window.getComputedStyle(element).display !== 'none' &&
              window.getComputedStyle(element).visibility !== 'hidden'
            )
          };
        }, selector);
  
        if (!dimensions) {
          return {
            content: [
              {
                type: 'text',
                text: `Element with selector "${selector}" not found`
              }
            ],
            isError: true
          };
        }
  
        // Result message construction
        const resultMessage = {
          selector,
          dimensions,
          checkpointId
        };
  
        return {
          content: [
            {
              type: 'text',
              text: JSON.stringify(resultMessage, null, 2)
            }
          ]
        };
      } catch (error) {
        const errorMessage = error instanceof Error ? error.message : String(error);
        Logger.error(`Failed to get element dimensions: ${errorMessage}`);
        return {
          content: [
            {
              type: 'text',
              text: `Failed to get element dimensions: ${errorMessage}`
            }
          ],
          isError: true
        };
      }
    }
  );

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

  The registerBrowserTools function is called in main() of src/index.ts, which wires up the 'get-element-dimensions' tool to the MCP server.

  registerBrowserTools(
    server,
    contextManager,
    lastHMREvents,
    screenshotHelpers
  );