get-element-properties
Retrieve specific properties and state information from a DOM element using a CSS selector. Integrates with Vite MCP Server for real-time updates.
Instructions
Retrieves properties and state information of a specific element
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| properties | Yes | Array of property names to retrieve (e.g., ['value', 'checked', 'textContent']) | |
| selector | Yes | CSS selector of the element to inspect |
Implementation Reference
- src/tools/browser-tools.ts:298-364 (handler)Handler function that retrieves specified properties from a DOM element using Playwright's page.evaluate. Uses browser context utilities and returns JSON-formatted properties or error.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)Zod input schema defining parameters: selector (string, CSS selector) and properties (array of strings, property names to retrieve).{ 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)MCP server.tool registration for 'get-element-properties' including description, input schema, and handler function.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)Utility function to retrieve the browser Page instance, either by contextId or most recent context, returning status with error if not 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)Utility function to extract the current checkpoint ID from the page's meta tag.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; };