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';