browser_click
Simulate single or double clicks on web page elements using human-readable descriptions or exact references. Integrates with Playwright for automated browser testing and Cloudflare Workers.
Instructions
Perform click on a web page
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| button | No | Button to click, defaults to left | |
| doubleClick | No | Whether to perform a double click instead of a single click | |
| element | Yes | Human-readable element description used to obtain permission to interact with the element | |
| ref | Yes | Exact target element reference from the page snapshot |
Implementation Reference
- src/tools/snapshot.ts:63-82 (handler)The main handler function that performs the click or double-click action on the target element using Playwright locators derived from the page snapshot. Generates corresponding code snippets and executes the action.handle: async (context, params) => { const tab = context.currentTabOrDie(); const locator = tab.snapshotOrDie().refLocator(params); const code: string[] = []; if (params.doubleClick) { code.push(`// Double click ${params.element}`); code.push(`await page.${await generateLocator(locator)}.dblclick();`); } else { code.push(`// Click ${params.element}`); code.push(`await page.${await generateLocator(locator)}.click();`); } return { code, action: () => params.doubleClick ? locator.dblclick() : locator.click(), captureSnapshot: true, waitForNetwork: true, }; },
- src/tools/snapshot.ts:44-51 (schema)Zod schemas defining the input parameters for the browser_click tool: elementSchema for element description and ref, extended by clickSchema with optional doubleClick boolean.const elementSchema = z.object({ element: z.string().describe('Human-readable element description used to obtain permission to interact with the element'), ref: z.string().describe('Exact target element reference from the page snapshot'), }); const clickSchema = elementSchema.extend({ doubleClick: z.coerce.boolean().optional().describe('Whether to perform a double click instead of a single click'), });
- src/tools/snapshot.ts:53-83 (registration)Tool registration using defineTool, specifying name 'browser_click', schema, capability, and handler. This Tool object is exported and included in snapshotTools for MCP server registration.const click = defineTool({ capability: 'core', schema: { name: 'browser_click', title: 'Click', description: 'Perform click on a web page', inputSchema: clickSchema, type: 'destructive', }, handle: async (context, params) => { const tab = context.currentTabOrDie(); const locator = tab.snapshotOrDie().refLocator(params); const code: string[] = []; if (params.doubleClick) { code.push(`// Double click ${params.element}`); code.push(`await page.${await generateLocator(locator)}.dblclick();`); } else { code.push(`// Click ${params.element}`); code.push(`await page.${await generateLocator(locator)}.click();`); } return { code, action: () => params.doubleClick ? locator.dblclick() : locator.click(), captureSnapshot: true, waitForNetwork: true, }; }, });
- src/tools.ts:35-50 (registration)Collects all snapshot tools including those from snapshot.ts (containing browser_click) into snapshotTools array, used for registration in the MCP connection.export const snapshotTools: Tool<any>[] = [ ...common(true), ...console, ...dialogs(true), ...files(true), ...install, ...keyboard(true), ...navigate(true), ...network, ...pdf, ...screenshot, ...snapshot, ...tabs(true), ...testing, ...wait(true), ];
- src/connection.ts:30-32 (registration)Selects and filters tools including browser_click based on config, passes to Context, and registers handlers for listTools and callTool in the MCP server.const allTools = config.vision ? visionTools : snapshotTools; const tools = allTools.filter(tool => !config.capabilities || tool.capability === 'core' || config.capabilities.includes(tool.capability)); const context = new Context(tools, config, browserContextFactory);