browser_drag
Destructive
Drag and drop elements between specified source and target locations on web pages for automation testing and interaction.
Instructions
Perform drag and drop between two elements
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| 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 | |
| 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 |
Implementation Reference
- src/tools/snapshot.ts:96-109 (handler)Handler function for the browser_drag tool. It resolves locators for source and target elements, executes the drag operation using Playwright locators, waits for completion, and adds the equivalent code snippet to 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)Schema definition for the browser_drag tool, including input schema with start/end element descriptions and refs, validated using Zod.
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/snapshot.ts:81-110 (registration)The browser_drag tool is registered using defineTabTool, which defines its capability, schema, and handler.
const drag = defineTabTool({ capability: 'core', 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', }, 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.ts:36-52 (registration)All tools, including browser_drag from snapshot module, are collected in the allTools array for use in the MCP server.
export const allTools: Tool<any>[] = [ ...common, ...console, ...dialogs, ...evaluate, ...files, ...install, ...keyboard, ...navigate, ...network, ...mouse, ...pdf, ...screenshot, ...snapshot, ...tabs, ...wait, ];