playwright_drag
Use this tool to drag and drop web elements to a target location using CSS selectors for precise interaction within a browser environment.
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:119-149 (handler)The DragTool class and its execute method implement the core logic for the 'playwright_drag' tool, using Playwright to locate elements by selectors, get their bounding boxes, and perform a mouse drag operation from source to target.
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:353-364 (schema)The tool definition object 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:522-523 (registration)Switch case in handleToolCall that registers and dispatches the 'playwright_drag' tool call to dragTool.execute.
case "playwright_drag": return await dragTool.execute(args, context); - src/toolHandler.ts:313-313 (registration)Instantiation of the DragTool instance during tool initialization.
if (!dragTool) dragTool = new DragTool(server); - src/tools.ts:422-422 (registration)Inclusion of 'playwright_drag' in the BROWSER_TOOLS array for conditional browser launching.
"playwright_drag",