Cloudflare Playwright MCP

Instructions

Implementation Reference

• src/tools/snapshot.ts:129-145 (handler)

  The handler function that implements the browser_hover tool logic: locates the target element from the page snapshot and performs a hover action on it.

    handle: async (context, params) => {
      const snapshot = context.currentTabOrDie().snapshotOrDie();
      const locator = snapshot.refLocator(params);
  
      const code = [
        `// Hover over ${params.element}`,
        `await page.${await generateLocator(locator)}.hover();`
      ];
  
      return {
        code,
        action: () => locator.hover(),
        captureSnapshot: true,
        waitForNetwork: true,
      };
    },
  });

• src/tools/snapshot.ts:121-127 (schema)

  Schema definition for the browser_hover tool, including name, title, description, input schema (elementSchema), and type.

  schema: {
    name: 'browser_hover',
    title: 'Hover mouse',
    description: 'Hover over element on page',
    inputSchema: elementSchema,
    type: 'readOnly',
  },

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

  Shared Zod schema for element parameters (element description and ref), used as inputSchema for browser_hover and other tools.

  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'),
  });

• src/tools/snapshot.ts:119-145 (registration)

  The complete tool definition for browser_hover using defineTool, which registers the tool with its schema and handler.

  const hover = defineTool({
    capability: 'core',
    schema: {
      name: 'browser_hover',
      title: 'Hover mouse',
      description: 'Hover over element on page',
      inputSchema: elementSchema,
      type: 'readOnly',
    },
  
    handle: async (context, params) => {
      const snapshot = context.currentTabOrDie().snapshotOrDie();
      const locator = snapshot.refLocator(params);
  
      const code = [
        `// Hover over ${params.element}`,
        `await page.${await generateLocator(locator)}.hover();`
      ];
  
      return {
        code,
        action: () => locator.hover(),
        captureSnapshot: true,
        waitForNetwork: true,
      };
    },
  });