Skip to main content
Glama

hover

Simulate mouse hover interactions on web elements using CSS selectors to trigger dynamic content, dropdown menus, or tooltips during browser automation.

Instructions

Hover over an element on the page

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for the element
timeoutNoTimeout in milliseconds
tabIdNoTab ID to operate on (uses active tab if not specified)

Implementation Reference

  • Registration of the 'hover' MCP tool, including the inline handler function that locates the element via selector on the specified tab, hovers over it using Puppeteer's ElementHandle.hover(), handles errors like selector not found, and returns success result.
    server.tool( 'hover', 'Hover over an element on the page', hoverSchema.shape, async ({ selector, timeout, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.hover(); return handleResult(ok({ hovered: true, selector })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } } );
  • Zod schema defining input parameters for the hover tool: CSS selector for the target element, optional timeout in ms, and optional tabId.
    export const hoverSchema = z.object({ selector: selectorSchema, timeout: timeoutSchema, tabId: tabIdSchema, });
  • TypeScript type definition for hover tool input, inferred from the Zod schema.
    export type HoverInput = z.infer<typeof hoverSchema>;
  • The core handler function for the hover tool, executing the hover action via Puppeteer on the located element.
    async ({ selector, timeout, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } await element.hover(); return handleResult(ok({ hovered: true, selector })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } }

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/andytango/puppeteer-mcp'

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