safari_inspect_element

Inspect DOM elements in Safari to retrieve their properties using CSS selectors, enabling browser automation and developer tool access for AI assistants.

Instructions

Inspect a DOM element and get its properties

Input Schema

TableJSON Schema

Name	Required	Description	Default
`sessionId`	Yes	Session identifier
`selector`	Yes	CSS selector for the element

Implementation Reference

src/safari-driver.ts:308-349 (handler)

Core tool handler implementation: Finds DOM element by CSS selector using Selenium WebDriver, retrieves tag name, truncated text, attributes (via executeScript), and bounding rectangle.

async inspectElement(sessionId: string, selector: string): Promise<ElementInspectionResult> {
  const session = this.getSession(sessionId);
  if (!session) {
    throw new Error(`Session ${sessionId} not found`);
  }

  try {
    const element = await session.driver.findElement(By.css(selector));
    
    const [tagName, text, attributes, boundingRect] = await Promise.all([
      element.getTagName(),
      element.getText(),
      session.driver.executeScript(`
        const el = arguments[0];
        const attrs = {};
        for (let attr of el.attributes) {
          attrs[attr.name] = attr.value;
        }
        return attrs;
      `, element),
      session.driver.executeScript(`
        const rect = arguments[0].getBoundingClientRect();
        return {
          x: rect.x,
          y: rect.y,
          width: rect.width,
          height: rect.height
        };
      `, element)
    ]);

    return {
      tagName,
      text: text.substring(0, 500), // Limit text length
      attributes,
      boundingRect
    };
  } catch (error: unknown) {
    const errorMessage = error instanceof Error ? error.message : String(error);
    throw new Error(`Element inspection failed: ${errorMessage}`);
  }
}

src/safari-mcp-server.ts:361-372 (handler)

MCP server tool handler wrapper: Delegates to SafariDriverManager.inspectElement and formats the result as JSON text content.

private async inspectElement(args: Record<string, any>): Promise<Array<{ type: string; text: string }>> {
  const { sessionId, selector } = args;
  
  const elementInfo = await this.driverManager.inspectElement(sessionId, selector);
  
  return [
    {
      type: 'text',
      text: `Element inspection for selector '${selector}':\n\n${JSON.stringify(elementInfo, null, 2)}`
    }
  ];
}

src/safari-mcp-server.ts:164-175 (registration)

Tool registration in the ListTools response, defining name, description, and input schema (requires sessionId and selector).

{
  name: 'safari_inspect_element',
  description: 'Inspect a DOM element and get its properties',
  inputSchema: {
    type: 'object',
    properties: {
      sessionId: { type: 'string', description: 'Session identifier' },
      selector: { type: 'string', description: 'CSS selector for the element' }
    },
    required: ['sessionId', 'selector']
  }
},

src/safari-mcp-server.ts:167-173 (schema)

Input schema definition for the tool: object with sessionId (string) and selector (string), both required.

inputSchema: {
  type: 'object',
  properties: {
    sessionId: { type: 'string', description: 'Session identifier' },
    selector: { type: 'string', description: 'CSS selector for the element' }
  },
  required: ['sessionId', 'selector']

src/safari-mcp-server.ts:249-250 (handler)
Dispatch case in handleToolCall switch statement routing to the inspectElement handler.
```
case 'safari_inspect_element':
  return await this.inspectElement(args);
```

Safari MCP Server