browser_drag
Execute drag and drop actions between two specified elements on a web page using structured accessibility snapshots. Input includes source and target element references for precise interaction.
Instructions
Perform drag and drop between two elements
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| endElement | Yes | Human-readable target element description used to obtain the permission to interact with the element | |
| endRef | Yes | Exact target element reference from the page snapshot | |
| startElement | Yes | Human-readable source element description used to obtain the permission to interact with the element | |
| startRef | Yes | Exact source element reference from the page snapshot |
Implementation Reference
- src/tools/snapshot.ts:96-109 (handler)The core handler function for the 'browser_drag' tool. It resolves locators for source and target elements from refs, performs the drag operation via waitForCompletion, and generates the equivalent Playwright code snippet for the response.handle: async (tab, params, response) => { response.setIncludeSnapshot(); const [startLocator, endLocator] = await tab.refLocators([ { ref: params.startRef, element: params.startElement }, { ref: params.endRef, element: params.endElement }, ]); await tab.waitForCompletion(async () => { await startLocator.dragTo(endLocator); }); response.addCode(`await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`); },
- src/tools/snapshot.ts:83-94 (schema)Zod schema definition for the 'browser_drag' tool input, specifying start/end element descriptions and refs from snapshot.schema: { name: 'browser_drag', title: 'Drag mouse', description: 'Perform drag and drop between two elements', inputSchema: z.object({ startElement: z.string().describe('Human-readable source element description used to obtain the permission to interact with the element'), startRef: z.string().describe('Exact source element reference from the page snapshot'), endElement: z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'), endRef: z.string().describe('Exact target element reference from the page snapshot'), }), type: 'destructive', },
- src/tools.ts:36-52 (registration)Collection of all tools including 'browser_drag' from snapshot.ts into allTools array, used by browser backend.export const allTools: Tool<any>[] = [ ...common, ...console, ...dialogs, ...evaluate, ...files, ...install, ...keyboard, ...navigate, ...network, ...mouse, ...pdf, ...screenshot, ...snapshot, ...tabs, ...wait, ];
- src/browserServerBackend.ts:76-78 (registration)MCP backend's tools() method exposes schemas of all tools (including browser_drag) to the MCP server for listing.tools(): mcpServer.ToolSchema<any>[] { return this._tools.map(tool => tool.schema); }
- src/browserServerBackend.ts:80-95 (registration)MCP backend's callTool method that invokes the specific tool handler (including browser_drag) by name.async callTool(schema: mcpServer.ToolSchema<any>, parsedArguments: any) { const context = this._context!; const response = new Response(context, schema.name, parsedArguments); const tool = this._tools.find(tool => tool.schema.name === schema.name)!; context.setRunningTool(true); try { await tool.handle(context, parsedArguments, response); await response.finish(); this._sessionLog?.logResponse(response); } catch (error: any) { response.addError(String(error)); } finally { context.setRunningTool(false); } return response.serialize(); }