click_element

Instructions

Implementation Reference

• src/tools/click.ts:27-39 (handler)

  The actual handler function for the 'click_element' tool. It receives the validated parameters (target, button, doubleClick, tabId, apiKey) and sends a 'click_element' command via the WebSocket bridge to the Chrome extension. On success, it returns a confirmation message with the target details; on failure, it returns an error message.

    async ({ target, button, doubleClick, tabId, apiKey }) => {
      const result = await bridge.sendCommand({
        command: 'click_element',
        params: { target, button, doubleClick },
        tabId,
        apiKey,
      });
      if (!result.success) {
        return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
      }
      return { content: [{ type: 'text', text: `Clicked on ${target.type === 'coordinates' ? `(${(target.value as any).x}, ${(target.value as any).y})` : target.value}` }] };
    }
  );

• src/tools/click.ts:5-14 (schema)

  The targetSchema defines the input validation for locating elements. It accepts type ('coordinates', 'css', 'xpath') and a value (either a string selector or {x, y} coordinate object).

  const targetSchema = z.object({
    type: z.enum(['coordinates', 'css', 'xpath']).describe('Method to locate the element: "css" (most reliable), "xpath", or "coordinates"'),
    value: z.union([
      z.string().describe('CSS selector (e.g., "#submit-button") or XPath expression'),
      z.object({
        x: z.number().describe('X coordinate in pixels from left of viewport'),
        y: z.number().describe('Y coordinate in pixels from top of viewport'),
      }).describe('Exact pixel coordinates'),
    ]).describe('The selector string or {x, y} coordinates object'),
  });

• src/tools/click.ts:20-26 (schema)

  The tool parameters schema including target, optional button (left/right/middle), optional doubleClick boolean, optional tabId, and optional apiKey.

  {
    target: targetSchema.describe('Target to click - prefer CSS selectors when possible'),
    button: z.enum(['left', 'right', 'middle']).optional().describe('Mouse button: left (default), right (context menu), or middle'),
    doubleClick: z.boolean().optional().describe('Set to true for double-click. Two rapid clicks (~40-100ms apart) are fired at the same position. Useful for opening files, selecting words, or triggering double-click handlers. Does NOT automatically handle focus/select behavior of the element — the element\'s own event handlers determine that.'),
    tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
    apiKey: z.string().optional().describe('API key for authentication if enabled'),
  },

• src/tools/click.ts:16-40 (registration)

  The registration function 'registerClickTools' that registers the 'click_element' tool on the MCP server with its description, schema, and handler.

  export function registerClickTools(server: McpServer, bridge: WebSocketBridge) {
    server.tool(
      'click_element',
      'Click on any element on the page. Use this for buttons, links, checkboxes, dropdowns, or any interactive element. Simulates real human mouse behavior with Bézier curve movement, randomized delays, and natural press/release timing.',
      {
        target: targetSchema.describe('Target to click - prefer CSS selectors when possible'),
        button: z.enum(['left', 'right', 'middle']).optional().describe('Mouse button: left (default), right (context menu), or middle'),
        doubleClick: z.boolean().optional().describe('Set to true for double-click. Two rapid clicks (~40-100ms apart) are fired at the same position. Useful for opening files, selecting words, or triggering double-click handlers. Does NOT automatically handle focus/select behavior of the element — the element\'s own event handlers determine that.'),
        tabId: z.number().optional().describe('Target tab ID (defaults to active tab)'),
        apiKey: z.string().optional().describe('API key for authentication if enabled'),
      },
      async ({ target, button, doubleClick, tabId, apiKey }) => {
        const result = await bridge.sendCommand({
          command: 'click_element',
          params: { target, button, doubleClick },
          tabId,
          apiKey,
        });
        if (!result.success) {
          return { content: [{ type: 'text', text: `Error: ${result.error?.message}` }], isError: true };
        }
        return { content: [{ type: 'text', text: `Clicked on ${target.type === 'coordinates' ? `(${(target.value as any).x}, ${(target.value as any).y})` : target.value}` }] };
      }
    );
  }

• src/tools/index.ts:29-55 (registration)

  The 'registerAllTools' function in the tools index that calls 'registerClickTools' to register the click_element tool on the MCP server.

  export function registerAllTools(server: McpServer, bridge: WebSocketBridge) {
    registerNavigationTools(server, bridge);
    registerTabManagementTools(server, bridge);
    registerKeyboardTools(server, bridge);
    registerScreenshotTools(server, bridge);
    registerClickTools(server, bridge);
    registerInputTools(server, bridge);
    registerDragDropTools(server, bridge);
    registerHoverTools(server, bridge);
  
    registerDevtoolsSourcesTools(server, bridge);
    registerDevtoolsModifyTools(server, bridge);
    registerDevtoolsNetworkTools(server, bridge);
    registerDevtoolsStorageTools(server, bridge);
    registerDevtoolsConsoleTools(server, bridge);
  
    registerAccessibilityTools(server, bridge);
    registerEmulationTools(server, bridge);
    registerElementTools(server, bridge);
    registerAuditTools(server, bridge);
    registerInteractionTools(server, bridge);
    registerMonitoringTools(server, bridge);
    registerQaTools(server, bridge);
    registerGestureTools(server, bridge);
    registerMacroTools(server, bridge);
    registerVisualRegressionTools(server, bridge);
  }