browser_drag
Drag and drop elements between specified source and target locations within web pages using structured accessibility snapshots for precise browser automation.
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:98-111 (handler)Handler function that performs the drag-and-drop action between start and end elements using Playwright locators.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:85-96 (schema)Zod schema defining the input parameters for the browser_drag tool: start/end element descriptions and references.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)Aggregates all tools by importing and spreading module exports; snapshot module includes browser_drag. Used by BrowserServerBackend to provide tools list and dispatch calls.export const allTools: Tool<any>[] = [ ...common, ...console, ...dialogs, ...evaluate, ...files, ...install, ...keyboard, ...navigate, ...network, ...mouse, ...pdf, ...screenshot, ...snapshot, ...tabs, ...wait, ];
- src/tools/snapshot.ts:163-169 (registration)Exports array of tools from snapshot module, including the browser_drag (drag) tool for aggregation in src/tools.ts.export default [ snapshot, click, drag, hover, selectOption, ];
- src/browserServerBackend.ts:48-50 (registration)BrowserServerBackend implements MCP ServerBackend.tools() by mapping schemas from filteredTools (which includes browser_drag).tools(): mcpServer.ToolSchema<any>[] { return this._tools.map(tool => tool.schema); }
- src/browserServerBackend.ts:52-59 (handler)Generic handler in BrowserServerBackend that dispatches to the specific tool.handle by name (browser_drag).async callTool(schema: mcpServer.ToolSchema<any>, parsedArguments: any) { const response = new Response(this._context, schema.name, parsedArguments); const tool = this._tools.find(tool => tool.schema.name === schema.name)!; await tool.handle(this._context, parsedArguments, response); if (this._sessionLog) await this._sessionLog.log(response); return await response.serialize(); }