Cloudflare Playwright MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:63-82 (handler)

  The main handler function that performs the click or double-click action on the target element using Playwright locators derived from the page snapshot. Generates corresponding code snippets and executes the action.

  handle: async (context, params) => {
    const tab = context.currentTabOrDie();
    const locator = tab.snapshotOrDie().refLocator(params);
  
    const code: string[] = [];
    if (params.doubleClick) {
      code.push(`// Double click ${params.element}`);
      code.push(`await page.${await generateLocator(locator)}.dblclick();`);
    } else {
      code.push(`// Click ${params.element}`);
      code.push(`await page.${await generateLocator(locator)}.click();`);
    }
  
    return {
      code,
      action: () => params.doubleClick ? locator.dblclick() : locator.click(),
      captureSnapshot: true,
      waitForNetwork: true,
    };
  },

• src/tools/snapshot.ts:44-51 (schema)

  Zod schemas defining the input parameters for the browser_click tool: elementSchema for element description and ref, extended by clickSchema with optional doubleClick boolean.

  const elementSchema = z.object({
    element: z.string().describe('Human-readable element description used to obtain permission to interact with the element'),
    ref: z.string().describe('Exact target element reference from the page snapshot'),
  });
  
  const clickSchema = elementSchema.extend({
    doubleClick: z.coerce.boolean().optional().describe('Whether to perform a double click instead of a single click'),
  });

• src/tools/snapshot.ts:53-83 (registration)

  Tool registration using defineTool, specifying name 'browser_click', schema, capability, and handler. This Tool object is exported and included in snapshotTools for MCP server registration.

  const click = defineTool({
    capability: 'core',
    schema: {
      name: 'browser_click',
      title: 'Click',
      description: 'Perform click on a web page',
      inputSchema: clickSchema,
      type: 'destructive',
    },
  
    handle: async (context, params) => {
      const tab = context.currentTabOrDie();
      const locator = tab.snapshotOrDie().refLocator(params);
  
      const code: string[] = [];
      if (params.doubleClick) {
        code.push(`// Double click ${params.element}`);
        code.push(`await page.${await generateLocator(locator)}.dblclick();`);
      } else {
        code.push(`// Click ${params.element}`);
        code.push(`await page.${await generateLocator(locator)}.click();`);
      }
  
      return {
        code,
        action: () => params.doubleClick ? locator.dblclick() : locator.click(),
        captureSnapshot: true,
        waitForNetwork: true,
      };
    },
  });

• src/tools.ts:35-50 (registration)

  Collects all snapshot tools including those from snapshot.ts (containing browser_click) into snapshotTools array, used for registration in the MCP connection.

  export const snapshotTools: Tool<any>[] = [
    ...common(true),
    ...console,
    ...dialogs(true),
    ...files(true),
    ...install,
    ...keyboard(true),
    ...navigate(true),
    ...network,
    ...pdf,
    ...screenshot,
    ...snapshot,
    ...tabs(true),
    ...testing,
    ...wait(true),
  ];

• src/connection.ts:30-32 (registration)

  Selects and filters tools including browser_click based on config, passes to Context, and registers handlers for listTools and callTool in the MCP server.

  const allTools = config.vision ? visionTools : snapshotTools;
  const tools = allTools.filter(tool => !config.capabilities || tool.capability === 'core' || config.capabilities.includes(tool.capability));
  const context = new Context(tools, config, browserContextFactory);