browser_drag
Simulate drag and drop actions between specified source and target elements within a web page, enabling precise browser automation without visual models or screenshots.
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:92-108 (handler)The main handler function for the browser_drag tool. It derives locators for the start and end elements from the current page snapshot, generates equivalent Playwright code for the operation, and returns an action that performs the dragTo operation, along with flags for snapshot capture and network waiting.handle: async (context, params) => { const snapshot = context.currentTabOrDie().snapshotOrDie(); const startLocator = snapshot.refLocator({ ref: params.startRef, element: params.startElement }); const endLocator = snapshot.refLocator({ ref: params.endRef, element: params.endElement }); const code = [ `// Drag ${params.startElement} to ${params.endElement}`, `await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});` ]; return { code, action: () => startLocator.dragTo(endLocator), captureSnapshot: true, waitForNetwork: true, }; },
- src/tools/snapshot.ts:79-90 (schema)Zod schema definition for the browser_drag tool, specifying input parameters for start and end elements (human-readable description and exact ref from snapshot), tool metadata, and destructive type.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:219-226 (registration)Local registration: exports the browser_drag tool (as 'drag') in the default array from snapshot.ts for higher-level inclusion.export default [ snapshot, click, drag, hover, type, selectOption, ];
- src/tools.ts:35-50 (registration)Global registration: includes all tools from snapshot.ts (including browser_drag) in the main snapshotTools export array.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), ];