browser_drag
Destructive
Drag elements between two specified locations on web pages for browser 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:92-108 (handler)The handle function executes the drag and drop operation by resolving locators from the page snapshot and performing dragTo action on them, while also generating equivalent Playwright code.
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 defining the input for the browser_drag tool, requiring start/end element descriptions and refs.
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:77-109 (registration)The defineTool call that defines and registers the browser_drag tool, including its schema and handler.
const drag = defineTool({ 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 (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:219-226 (registration)Module exports an array of tools including the drag tool for overall registration.
export default [ snapshot, click, drag, hover, type, selectOption, ];