browser_click
Interact with web elements by performing single or double clicks using Playwright MCP. Specify target elements and click options like button type for precise browser automation.
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:59-74 (handler)Handler function that performs the click on the target element using a Playwright locator derived from the page snapshot reference. Generates code snippet and executes the action.handle: async (context, params) => { const tab = context.currentTabOrDie(); const locator = tab.snapshotOrDie().refLocator(params); const code = [ `// Click ${params.element}`, `await page.${await generateLocator(locator)}.click();` ]; return { code, action: () => locator.click(), captureSnapshot: true, waitForNetwork: true, }; },
- src/tools/snapshot.ts:51-57 (schema)Tool schema defining name, title, description, input schema reference, and type for the browser_click tool.schema: { name: 'browser_click', title: 'Click', description: 'Perform click on a web page', inputSchema: elementSchema, type: 'destructive', },
- src/tools/snapshot.ts:44-47 (schema)Zod input schema defining 'element' (human-readable description) and 'ref' (exact reference from snapshot) parameters.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'), });
- src/tools.ts:35-50 (registration)Registration of snapshotTools array which includes the browser_click tool via spread of snapshot export.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:56-77 (registration)MCP server request handler for calling tools by name, dispatching to the matching tool's handle function (includes browser_click).server.setRequestHandler(CallToolRequestSchema, async request => { const errorResult = (...messages: string[]) => ({ content: [{ type: 'text', text: messages.join('\n') }], isError: true, }); const tool = tools.find(tool => tool.schema.name === request.params.name); if (!tool) return errorResult(`Tool "${request.params.name}" not found`); const modalStates = context.modalStates().map(state => state.type); if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState)) return errorResult(`The tool "${request.params.name}" can only be used when there is related modal state present.`, ...context.modalStatesMarkdown()); if (!tool.clearsModalState && modalStates.length) return errorResult(`Tool "${request.params.name}" does not handle the modal state.`, ...context.modalStatesMarkdown()); try { return await context.run(tool, request.params.arguments); } catch (error) { return errorResult(String(error)); } });