Playwright MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:83-112 (handler)

  Full definition of the browser_drag tool including its handler. The handler resolves locators for source and target elements using tab.refLocators, executes the drag operation inside waitForCompletion, sets snapshot inclusion, and adds the generated Playwright code to the response.

  const drag = defineTabTool({
    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 (tab, params, response) => {
      response.setIncludeSnapshot();
  
      const [startLocator, endLocator] = await tab.refLocators([
        { ref: params.startRef, element: params.startElement },
        { ref: params.endRef, element: params.endElement },
      ]);
  
      await tab.waitForCompletion(async () => {
        await startLocator.dragTo(endLocator);
      });
  
      response.addCode(`await page.${await generateLocator(startLocator)}.dragTo(page.${await generateLocator(endLocator)});`);
    },
  });

• src/tools/snapshot.ts:85-96 (schema)

  Input/output schema (using Zod) for the browser_drag tool, defining parameters for start and end elements.

  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.ts:36-52 (registration)

  Central registration of all tools by importing and spreading modules like snapshot (which exports browser_drag) into the allTools array. filteredTools is used by backends to get available tools.

  export const allTools: Tool<any>[] = [
    ...common,
    ...console,
    ...dialogs,
    ...evaluate,
    ...files,
    ...install,
    ...keyboard,
    ...navigate,
    ...network,
    ...mouse,
    ...pdf,
    ...screenshot,
    ...snapshot,
    ...tabs,
    ...wait,
  ];

• src/browserServerBackend.ts:48-59 (registration)

  MCP ServerBackend implementation that uses filteredTools to set available tools, exposes their schemas via tools(), and dispatches to individual tool.handle in callTool.

  tools(): mcpServer.ToolSchema<any>[] {
    return this._tools.map(tool => tool.schema);
  }
  
  async callTool(schema: mcpServer.ToolSchema<any>, parsedArguments: any) {
    const response = new Response(this._context, schema.name, parsedArguments);
    const tool = this._tools.find(tool => tool.schema.name === schema.name)!;
    await tool.handle(this._context, parsedArguments, response);
    if (this._sessionLog)
      await this._sessionLog.log(response);
    return await response.serialize();
  }