browser_drag_and_drop
Automate drag-and-drop interactions between web elements using Selenium WebDriver for browser automation and testing workflows.
Instructions
Perform drag and drop between two elements
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| by | Yes | Locator strategy to find element | |
| value | Yes | Value for the locator strategy | |
| timeout | No | Maximum time to wait for element in milliseconds | |
| targetBy | Yes | Locator strategy to find target element | |
| targetValue | Yes | Value for the target locator strategy |
Implementation Reference
- src/tools/actionTools.ts:71-89 (handler)MCP tool handler that receives parameters and calls ActionService.dragAndDrop
async ({ by, value, targetBy, targetValue, timeout = 15000 }) => { try { const driver = stateManager.getDriver(); const actionService = new ActionService(driver); await actionService.dragAndDrop({ by, value, timeout }, { by: targetBy, value: targetValue, timeout }); return { content: [{ type: 'text', text: 'Drag and drop completed' }], }; } catch (e) { return { content: [ { type: 'text', text: `Error performing drag and drop: ${(e as Error).message}`, }, ], }; } } - src/tools/actionTools.ts:64-70 (schema)Input schema definition for the browser_drag_and_drop tool using Zod
{ ...locatorSchema, targetBy: z .enum(['id', 'css', 'xpath', 'name', 'tag', 'class', 'link', 'partialLink']) .describe('Locator strategy to find target element'), targetValue: z.string().describe('Value for the target locator strategy'), }, - src/tools/actionTools.ts:61-90 (registration)Registration of the browser_drag_and_drop tool with McpServer
server.tool( 'browser_drag_and_drop', 'Perform drag and drop between two elements', { ...locatorSchema, targetBy: z .enum(['id', 'css', 'xpath', 'name', 'tag', 'class', 'link', 'partialLink']) .describe('Locator strategy to find target element'), targetValue: z.string().describe('Value for the target locator strategy'), }, async ({ by, value, targetBy, targetValue, timeout = 15000 }) => { try { const driver = stateManager.getDriver(); const actionService = new ActionService(driver); await actionService.dragAndDrop({ by, value, timeout }, { by: targetBy, value: targetValue, timeout }); return { content: [{ type: 'text', text: 'Drag and drop completed' }], }; } catch (e) { return { content: [ { type: 'text', text: `Error performing drag and drop: ${(e as Error).message}`, }, ], }; } } ); - src/services/actionService.ts:21-30 (helper)Core implementation of drag and drop using Selenium WebDriver actions
async dragAndDrop(sourceParams: LocatorParams, targetParams: LocatorParams): Promise<void> { const sourceLocator = LocatorFactory.createLocator(sourceParams.by, sourceParams.value); const targetLocator = LocatorFactory.createLocator(targetParams.by, targetParams.value); const sourceElement = await this.driver.wait(until.elementLocated(sourceLocator), sourceParams.timeout || 15000); const targetElement = await this.driver.wait(until.elementLocated(targetLocator), targetParams.timeout || 15000); const actions = this.driver.actions({ bridge: true }); await actions.dragAndDrop(sourceElement, targetElement).perform(); }