get-element-properties
Retrieve properties and state information from DOM elements using CSS selectors to inspect values, checked status, text content, and other attributes during development.
Instructions
Retrieves properties and state information of a specific element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector of the element to inspect | |
| properties | Yes | Array of property names to retrieve (e.g., ['value', 'checked', 'textContent']) |
Implementation Reference
- src/tools/browser-tools.ts:291-365 (handler)The handler function for the 'get-element-properties' tool. It validates browser context, waits for the element, uses page.evaluate to extract specified properties from the DOM element, and returns a JSON-formatted result with checkpoint ID.
server.tool( 'get-element-properties', 'Retrieves properties and state information of a specific element', { selector: z.string().describe('CSS selector of the element to inspect'), properties: z.array(z.string()).describe("Array of property names to retrieve (e.g., ['value', 'checked', 'textContent'])") }, async ({ selector, properties }) => { try { // Check browser status const browserStatus = getContextForOperation(); if (!browserStatus.isStarted) { return browserStatus.error; } // Get current checkpoint ID const checkpointId = await getCurrentCheckpointId(browserStatus.page); // Check if element exists await browserStatus.page.waitForSelector(selector, { state: 'visible', timeout: 5000 }); // Retrieve element properties const elementProperties = await browserStatus.page.evaluate(({ selector, propertiesToGet }: { selector: string; propertiesToGet: string[] }) => { const element = document.querySelector(selector); if (!element) return null; const result: Record<string, unknown> = {}; propertiesToGet.forEach((prop: string) => { result[prop] = (element as unknown as Record<string, unknown>)[prop]; }); return result; }, { selector, propertiesToGet: properties }); if (!elementProperties) { return { content: [ { type: 'text', text: `Element with selector "${selector}" not found` } ], isError: true }; } // Result message construction const resultMessage = { selector, properties: elementProperties, 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 properties: ${errorMessage}`); return { content: [ { type: 'text', text: `Failed to get element properties: ${errorMessage}` } ], isError: true }; } } ); - src/tools/browser-tools.ts:294-297 (schema)Input schema for the get-element-properties tool using Zod validation: requires 'selector' (CSS selector) and 'properties' (array of property names).
{ selector: z.string().describe('CSS selector of the element to inspect'), properties: z.array(z.string()).describe("Array of property names to retrieve (e.g., ['value', 'checked', 'textContent'])") }, - src/tools/browser-tools.ts:291-365 (registration)Registration of the 'get-element-properties' tool using server.tool() call within registerBrowserTools function, making it available to the MCP server.
server.tool( 'get-element-properties', 'Retrieves properties and state information of a specific element', { selector: z.string().describe('CSS selector of the element to inspect'), properties: z.array(z.string()).describe("Array of property names to retrieve (e.g., ['value', 'checked', 'textContent'])") }, async ({ selector, properties }) => { try { // Check browser status const browserStatus = getContextForOperation(); if (!browserStatus.isStarted) { return browserStatus.error; } // Get current checkpoint ID const checkpointId = await getCurrentCheckpointId(browserStatus.page); // Check if element exists await browserStatus.page.waitForSelector(selector, { state: 'visible', timeout: 5000 }); // Retrieve element properties const elementProperties = await browserStatus.page.evaluate(({ selector, propertiesToGet }: { selector: string; propertiesToGet: string[] }) => { const element = document.querySelector(selector); if (!element) return null; const result: Record<string, unknown> = {}; propertiesToGet.forEach((prop: string) => { result[prop] = (element as unknown as Record<string, unknown>)[prop]; }); return result; }, { selector, propertiesToGet: properties }); if (!elementProperties) { return { content: [ { type: 'text', text: `Element with selector "${selector}" not found` } ], isError: true }; } // Result message construction const resultMessage = { selector, properties: elementProperties, 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 properties: ${errorMessage}`); return { content: [ { type: 'text', text: `Failed to get element properties: ${errorMessage}` } ], isError: true }; } } ); - src/tools/browser-tools.ts:55-95 (helper)Helper utility getContextForOperation used by get-element-properties to retrieve the active browser page context or return an error response if no suitable browser available.
const getContextForOperation = (contextId?: string): BrowserStatus => { let contextInstance; if (contextId) { contextInstance = contextManager.getContext(contextId); if (!contextInstance) { return { isStarted: false, error: { content: [ { type: 'text', text: `Browser '${contextId}' not found. Use 'list-browsers' to see available browsers or 'start-browser' to create one.` } ], isError: true } }; } } else { contextInstance = contextManager.getMostRecentContext(); if (!contextInstance) { return { isStarted: false, error: { content: [ { type: 'text', text: 'No active browsers found. Use \'start-browser\' to create a browser first.' } ], isError: true } }; } } // Note: contextInstance.page is now always defined (never null) return { isStarted: true, page: contextInstance.page }; }; - src/tools/browser-tools.ts:98-104 (helper)Helper utility getCurrentCheckpointId used to extract the current checkpoint ID from a meta tag in the page for including in tool responses.
const getCurrentCheckpointId = async (page: Page) => { const checkpointId = await page.evaluate(() => { const metaTag = document.querySelector('meta[name="__mcp_checkpoint"]'); return metaTag ? metaTag.getAttribute('data-id') : null; }); return checkpointId; };