get-element-dimensions

Retrieve dimension and position data for web elements using CSS selectors to inspect layout and spacing in real-time development environments.

Instructions

Retrieves dimension and position information of a specific element

Input Schema

TableJSON Schema

Name	Required	Description	Default
`selector`	Yes	CSS selector of the element to inspect

Implementation Reference

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

Registration of the 'get-element-dimensions' MCP tool using server.tool, including description, input schema, and handler function.

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:451-527 (handler)

The core handler logic: validates browser context, evaluates getBoundingClientRect() on the element to get dimensions and position, checks visibility, and formats the response with checkpoint ID.

  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-450 (schema)
Input schema validation using Zod: requires a single 'selector' parameter (CSS selector).
```
{
  selector: z.string().describe('CSS selector of the element to inspect')
},
```
src/tools/index.ts:1-2 (registration)
Re-export of browser-tools module, making the get-element-dimensions tool available for import and registration.
```
export * from './browser-tools.js';
export * from './log-manager.js';
```

Vite MCP Server