Skip to main content
Glama
nzjami

Playwright MCP

by nzjami

browser_hover

Destructive

Hover over web page elements to trigger interactive features like dropdown menus, tooltips, or hover effects during browser automation with Playwright MCP.

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 for the 'browser_hover' tool. It ensures a snapshot is included in the response, resolves the element locator from the provided ref and element description, generates code for hovering over the element in Playwright, and waits for the hover action to complete on the tab.
    handle: async (tab, params, response) => {
      response.setIncludeSnapshot();
    
      const locator = await tab.refLocator(params);
      response.addCode(`await page.${await generateLocator(locator)}.hover();`);
    
      await tab.waitForCompletion(async () => {
        await locator.hover();
      });
    },
  • The schema definition for the 'browser_hover' tool, specifying its name, title, description, input schema (reusing elementSchema), and readOnly type.
    schema: {
      name: 'browser_hover',
      title: 'Hover mouse',
      description: 'Hover over element on page',
      inputSchema: elementSchema,
      type: 'readOnly',
    },
  • Shared Zod schema for element-based tools like browser_hover, defining 'element' (human-readable description) and 'ref' (exact reference from snapshot).
    export 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 registration using defineTabTool, which wraps the tab-specific handler and schema for MCP compatibility.
    const hover = defineTabTool({
      capability: 'core',
      schema: {
        name: 'browser_hover',
        title: 'Hover mouse',
        description: 'Hover over element on page',
        inputSchema: elementSchema,
        type: 'readOnly',
      },
    
      handle: async (tab, params, response) => {
        response.setIncludeSnapshot();
    
        const locator = await tab.refLocator(params);
        response.addCode(`await page.${await generateLocator(locator)}.hover();`);
    
        await tab.waitForCompletion(async () => {
          await locator.hover();
        });
      },
    });
  • src/tools.ts:27-52 (registration)
    Top-level aggregation and registration of all tools, importing snapshot.ts (containing browser_hover) and including it in the allTools array used for MCP server registration.
    import snapshot from './tools/snapshot.js';
    import tabs from './tools/tabs.js';
    import screenshot from './tools/screenshot.js';
    import wait from './tools/wait.js';
    import mouse from './tools/mouse.js';
    
    import type { Tool } from './tools/tool.js';
    import type { FullConfig } from './config.js';
    
    export const allTools: Tool<any>[] = [
      ...common,
      ...console,
      ...dialogs,
      ...evaluate,
      ...files,
      ...install,
      ...keyboard,
      ...navigate,
      ...network,
      ...mouse,
      ...pdf,
      ...screenshot,
      ...snapshot,
      ...tabs,
      ...wait,
    ];
Behavior4/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations provide readOnlyHint=false, openWorldHint=true, and destructiveHint=true, indicating this is a mutable, open-world, and potentially destructive operation. The description adds value by specifying 'hover over element on page,' which implies mouse interaction that could trigger page changes (consistent with destructiveHint). It doesn't contradict annotations and adds context about the action type, though more detail on effects (e.g., may trigger JavaScript events) would enhance it.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise with 'Hover over element on page,' a single sentence that efficiently conveys the core action without unnecessary words. It is front-loaded with the key verb 'Hover,' making it easy to scan. Every word earns its place, and there is no redundancy or fluff.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's moderate complexity (interactive browser action), annotations cover safety and world hints, and schema fully documents parameters, the description is minimally adequate. However, it lacks details on output (no schema provided), potential side effects (e.g., page state changes), or prerequisites (e.g., needing a page snapshot first). For a destructive tool, more context on behavior would improve completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with clear descriptions for both parameters: 'element' as a human-readable description for permission and 'ref' as an exact target reference. The description adds no additional parameter semantics beyond what the schema provides, such as examples or usage tips. With high schema coverage, the baseline score of 3 is appropriate as the schema carries the burden.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description 'Hover over element on page' clearly states the action (hover) and target (element on page), making the purpose immediately understandable. It distinguishes from siblings like browser_click or browser_type by specifying the hover interaction rather than click or keyboard input. However, it doesn't explicitly differentiate from all siblings (e.g., browser_drag also involves mouse movement).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. It doesn't mention when hovering is appropriate (e.g., to trigger tooltips, dropdowns, or hover effects) versus clicking or other interactions, nor does it reference sibling tools like browser_click for different actions. Usage context is implied but not stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

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/nzjami/mcpPlaywright'

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