Playwright MCP

Instructions

Implementation Reference

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

  The handle function executes the drag and drop operation by resolving locators from the page snapshot and performing dragTo action on them, while also generating equivalent Playwright code.

  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:79-90 (schema)

  Zod schema defining the input for the browser_drag tool, requiring start/end element descriptions and refs.

  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 defineTool call that defines and registers the browser_drag tool, including its 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)

  Module exports an array of tools including the drag tool for overall registration.

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