Skip to main content
Glama
cloudflare

Cloudflare Playwright MCP

Official
by cloudflare

browser_hover

Simulate hovering over specific webpage elements using Playwright for precise interaction and testing in Cloudflare Workers environments.

Instructions

Hover over element on page

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
elementYesHuman-readable element description used to obtain permission to interact with the element
refYesExact target element reference from the page snapshot

Implementation Reference

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

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/cloudflare/playwright-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server