playwright_drag
Drag an element to a specified target location on a webpage using CSS selectors for both the source element and destination, enabling precise browser automation.
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)The DragTool class containing the execute method that implements the playwright_drag tool logic. It waits for source and target elements, gets their bounding boxes, performs mouse down at source center, moves to target center, and mouse up.
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)The tool definition object including name, description, and inputSchema for validation of parameters sourceSelector and targetSelector.
{ 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)Dispatch registration in the handleToolCall switch statement that routes playwright_drag calls to the dragTool instance's execute method.
case "playwright_drag": return await dragTool.execute(args, context); - src/toolHandler.ts:345-345 (registration)Instantiation of the DragTool instance in the initializeTools function, making it available for execution.
if (!dragTool) dragTool = new DragTool(server); - src/tools.ts:469-469 (registration)Inclusion of "playwright_drag" in the BROWSER_TOOLS array, used for conditional browser launch and tool categorization.
"playwright_drag",