browser_drag
Destructive
Enable drag and drop interaction between two web elements using precise references for automated browser testing with Cloudflare Playwright MCP.
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:100-116 (handler)Handler function implementing the browser_drag tool logic: resolves locators from snapshot, generates code snippet, and performs dragTo action.
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:87-98 (schema)Input schema definition for browser_drag tool using Zod, specifying start/end elements 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.ts:46-46 (registration)Registers browser_drag by spreading tools from snapshot.ts into the snapshotTools array.
...snapshot, - src/tools.ts:26-26 (registration)Imports the module containing browser_drag tool definition.
import snapshot from './tools/snapshot.js';