drag

Instructions

Implementation Reference

• src/tools/browser/interaction/drag.ts:24-61 (handler)

  The execute method that performs the drag operation: finds source and target elements via CSS selectors, gets their bounding boxes, and uses Playwright's mouse API (move, down, move, up) to simulate a drag from source to target.

    async execute(args: any, context: ToolContext): Promise<ToolResponse> {
      this.recordInteraction();
      return this.safeExecute(context, async (page) => {
        // Use standard element selection with error on multiple matches
        const sourceLocator = await this.createScopedLocator(page, args.sourceSelector);
        const { element: sourceElement } = await this.selectPreferredLocator(sourceLocator, {
          errorOnMultiple: true,
          originalSelector: args.sourceSelector,
        });
  
        const targetLocator = await this.createScopedLocator(page, args.targetSelector);
        const { element: targetElement } = await this.selectPreferredLocator(targetLocator, {
          errorOnMultiple: true,
          originalSelector: 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/browser/interaction/drag.ts:13-21 (schema)

  Input schema for the drag tool: requires sourceSelector and targetSelector (both strings) to define the element to drag and where to drag it.

    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/tools/browser/register.ts:70-71 (registration)

  Registration of DragTool in the BROWSER_TOOL_CLASSES array, which makes it available as an MCP tool.

  DragTool,
  PressKeyTool,

• src/tools/browser/register.ts:19-19 (registration)

  Import statement for DragTool from the interaction/drag module.

  import { DragTool } from './interaction/drag.js';

• src/tools/browser/interaction/index.ts:6-7 (helper)

  Re-export of DragTool from the interaction barrel index.

  export { DragTool } from './drag.js';
  export { PressKeyTool } from './press_key.js';