get-element-properties

Instructions

Implementation Reference

• src/tools/browser-tools.ts:291-293 (registration)

  Registration of the 'get-element-properties' tool via server.tool() call

  server.tool(
    'get-element-properties',
    'Retrieves properties and state information of a specific element',

• src/tools/browser-tools.ts:291-365 (handler)

  Full handler implementation for 'get-element-properties' tool - takes CSS selector and properties array, evaluates in browser via page.evaluate(), returns element properties as JSON

  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)

  Zod input schema for the tool: selector (string) and properties (array of strings)

  {
    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:55-95 (helper)

  Helper function getContextForOperation used by the handler to retrieve browser context

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