drag_by_uid_to_uid
Simulate HTML5 drag-and-drop between elements using JavaScript drag events for browser automation testing and web interaction scenarios.
Instructions
Simulate HTML5 drag-and-drop from one UID to another using JS drag events. May not work with all custom libraries.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| fromUid | Yes | The UID of the element to drag | |
| toUid | Yes | The UID of the target element to drop onto |
Implementation Reference
- src/tools/input.ts:219-248 (handler)The main MCP tool handler function that parses arguments, validates UIDs, calls FirefoxClient.dragByUidToUid via getFirefox, handles UID staleness errors, and returns MCP success/error response.export async function handleDragByUidToUid(args: unknown): Promise<McpToolResponse> { try { const { fromUid, toUid } = args as { fromUid: string; toUid: string }; if (!fromUid || typeof fromUid !== 'string') { throw new Error('fromUid parameter is required and must be a string'); } if (!toUid || typeof toUid !== 'string') { throw new Error('toUid parameter is required and must be a string'); } const { getFirefox } = await import('../index.js'); const firefox = await getFirefox(); try { await firefox.dragByUidToUid(fromUid, toUid); return successResponse(`✅ drag ${fromUid}→${toUid}`); } catch (error) { // Check both UIDs for staleness const errorMsg = (error as Error).message; if (errorMsg.includes('stale') || errorMsg.includes('Snapshot') || errorMsg.includes('UID')) { throw new Error(`UIDs stale/invalid. Call take_snapshot first.`); } throw error; } } catch (error) { return errorResponse(error as Error); } }
- src/tools/input.ts:81-98 (schema)Tool schema definition including name, description, and inputSchema specifying required fromUid and toUid string parameters.export const dragByUidToUidTool = { name: 'drag_by_uid_to_uid', description: 'Drag element to another (HTML5 drag events).', inputSchema: { type: 'object', properties: { fromUid: { type: 'string', description: 'Source element UID', }, toUid: { type: 'string', description: 'Target element UID', }, }, required: ['fromUid', 'toUid'], }, };
- src/index.ts:134-134 (registration)Registration of the drag_by_uid_to_uid tool handler in the MCP server's toolHandlers Map, mapping name to handleDragByUidToUid function.['drag_by_uid_to_uid', tools.handleDragByUidToUid],
- src/firefox/dom.ts:189-230 (helper)Core drag-and-drop implementation in DomInteractions class. Resolves UIDs to elements, dispatches HTML5 DragEvents (dragstart, dragenter, etc.) via executeScript for reliable cross-lib compatibility.async dragByUidToUid(fromUid: string, toUid: string): Promise<void> { if (!this.resolveUid) { throw new Error( 'dragByUidToUid: resolveUid callback not set. Ensure snapshot is initialized.' ); } const fromEl = await this.resolveUid(fromUid); const toEl = await this.resolveUid(toUid); // Use JS drag events fallback for compatibility (Actions DnD not used) await this.driver.executeScript( (srcEl: Element, tgtEl: Element) => { if (!srcEl || !tgtEl) { throw new Error('dragAndDrop: element not found'); } function dispatch(type: string, target: Element, dataTransfer?: DataTransfer) { const evt = new DragEvent(type, { bubbles: true, cancelable: true, dataTransfer, } as DragEventInit); return target.dispatchEvent(evt); } // Create DataTransfer if available const dt = typeof DataTransfer !== 'undefined' ? new DataTransfer() : undefined; dispatch('dragstart', srcEl, dt); dispatch('dragenter', tgtEl, dt); dispatch('dragover', tgtEl, dt); dispatch('drop', tgtEl, dt); dispatch('dragend', srcEl, dt); }, fromEl, toEl ); // Wait for events to propagate await this.waitForEventsAfterAction(); }
- src/firefox/index.ts:153-158 (helper)FirefoxClient wrapper method that delegates dragByUidToUid call to the DomInteractions instance, with connection check.async dragByUidToUid(fromUid: string, toUid: string): Promise<void> { if (!this.dom) { throw new Error('Not connected'); } return await this.dom.dragByUidToUid(fromUid, toUid); }