Playwright MCP Server

Instructions

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",