playwright_drag
Simulate dragging a web element to a target location using CSS selectors for source and destination, enabling precise browser automation in Playwright MCP Server.
Instructions
Drag an element to a target location
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| sourceSelector | Yes | CSS selector for the element to drag | |
| targetSelector | Yes | CSS selector for the target location |
Implementation Reference
- src/tools/browser/interaction.ts:184-214 (handler)DragTool class containing the execute method that implements the core logic for the playwright_drag tool using Playwright mouse events to drag an element from sourceSelector to targetSelector.export class DragTool extends BrowserToolBase { /** * Execute the drag tool */ async execute(args: any, context: ToolContext): Promise<ToolResponse> { return this.safeExecute(context, async (page) => { const sourceElement = await page.waitForSelector(args.sourceSelector); const targetElement = await page.waitForSelector(args.targetSelector); const sourceBound = await sourceElement.boundingBox(); const targetBound = await targetElement.boundingBox(); if (!sourceBound || !targetBound) { return createErrorResponse("Could not get element positions for drag operation"); } await page.mouse.move( sourceBound.x + sourceBound.width / 2, sourceBound.y + sourceBound.height / 2 ); await page.mouse.down(); await page.mouse.move( targetBound.x + targetBound.width / 2, targetBound.y + targetBound.height / 2 ); await page.mouse.up(); return createSuccessResponse(`Dragged element from ${args.sourceSelector} to ${args.targetSelector}`); }); } }
- src/tools.ts:387-398 (schema)Tool definition including name, description, and input schema for playwright_drag.{ name: "playwright_drag", description: "Drag an element to a target location", inputSchema: { type: "object", properties: { sourceSelector: { type: "string", description: "CSS selector for the element to drag" }, targetSelector: { type: "string", description: "CSS selector for the target location" } }, required: ["sourceSelector", "targetSelector"], }, },
- src/toolHandler.ts:544-545 (registration)Registration in the tool handler switch statement that dispatches playwright_drag calls to the DragTool instance.case "playwright_drag": return await dragTool.execute(args, context);
- src/toolHandler.ts:345-345 (registration)Initialization of the DragTool instance used for handling playwright_drag.if (!dragTool) dragTool = new DragTool(server);
- src/tools.ts:469-469 (registration)Inclusion in BROWSER_TOOLS array for conditional browser launch."playwright_drag",