Playwright MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:92-108 (handler)

  The handler function that executes the browser_drag tool logic: resolves locators for start and end elements from the page snapshot, generates corresponding Playwright code, and performs the drag-to action.

  handle: async (context, params) => {
    const snapshot = context.currentTabOrDie().snapshotOrDie();
    const startLocator = snapshot.refLocator({ ref: params.startRef, element: params.startElement });
    const endLocator = snapshot.refLocator({ ref: params.endRef, element: params.endElement });
  
    const code = [
      `// Drag ${params.startElement} to ${params.endElement}`,
      `await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`
    ];
  
    return {
      code,
      action: () => startLocator.dragTo(endLocator),
      captureSnapshot: true,
      waitForNetwork: true,
    };
  },

• src/tools/snapshot.ts:78-90 (schema)

  Zod schema defining the input for browser_drag: startElement/startRef for source, endElement/endRef for target.

  capability: 'core',
  schema: {
    name: 'browser_drag',
    title: 'Drag mouse',
    description: 'Perform drag and drop between two elements',
    inputSchema: z.object({
      startElement: z.string().describe('Human-readable source element description used to obtain the permission to interact with the element'),
      startRef: z.string().describe('Exact source element reference from the page snapshot'),
      endElement: z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'),
      endRef: z.string().describe('Exact target element reference from the page snapshot'),
    }),
    type: 'destructive',
  },

• src/tools/snapshot.ts:77-109 (registration)

  The complete definition of the browser_drag tool using defineTool, including schema and handler.

  const drag = defineTool({
    capability: 'core',
    schema: {
      name: 'browser_drag',
      title: 'Drag mouse',
      description: 'Perform drag and drop between two elements',
      inputSchema: z.object({
        startElement: z.string().describe('Human-readable source element description used to obtain the permission to interact with the element'),
        startRef: z.string().describe('Exact source element reference from the page snapshot'),
        endElement: z.string().describe('Human-readable target element description used to obtain the permission to interact with the element'),
        endRef: z.string().describe('Exact target element reference from the page snapshot'),
      }),
      type: 'destructive',
    },
  
    handle: async (context, params) => {
      const snapshot = context.currentTabOrDie().snapshotOrDie();
      const startLocator = snapshot.refLocator({ ref: params.startRef, element: params.startElement });
      const endLocator = snapshot.refLocator({ ref: params.endRef, element: params.endElement });
  
      const code = [
        `// Drag ${params.startElement} to ${params.endElement}`,
        `await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`
      ];
  
      return {
        code,
        action: () => startLocator.dragTo(endLocator),
        captureSnapshot: true,
        waitForNetwork: true,
      };
    },
  });

• src/tools/snapshot.ts:219-226 (registration)

  Registration of browser_drag by including it in the default export array of tools from snapshot.ts.

  export default [
    snapshot,
    click,
    drag,
    hover,
    type,
    selectOption,
  ];