Skip to main content
Glama
devskido

Playwright MCP Server

by devskido

playwright_hover

Simulate mouse hover interactions on web elements using CSS selectors for browser automation testing and UI interaction.

Instructions

Hover an element on the page

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for element to hover

Implementation Reference

  • The HoverTool class implements the core logic for the 'playwright_hover' tool. It waits for the selector and performs a hover action using Playwright's page.hover method.
    export class HoverTool extends BrowserToolBase { /** * Execute the hover tool */ async execute(args: any, context: ToolContext): Promise<ToolResponse> { return this.safeExecute(context, async (page) => { await page.waitForSelector(args.selector); await page.hover(args.selector); return createSuccessResponse(`Hovered ${args.selector}`); }); } }
  • Input schema definition for the 'playwright_hover' tool, specifying the required 'selector' parameter.
    { name: "playwright_hover", description: "Hover an element on the page", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for element to hover" }, }, required: ["selector"], }, },
  • Registration and dispatch in the main tool handler switch statement, calling HoverTool.execute for 'playwright_hover'.
    case "playwright_hover": return await hoverTool.execute(args, context);
  • Instantiation of the HoverTool instance in the initializeTools function.
    if (!hoverTool) hoverTool = new HoverTool(server);
  • Code generation helper in PlaywrightGenerator that converts 'playwright_hover' actions to equivalent Playwright test code.
    case 'playwright_hover': return this.generateHoverStep(parameters); case 'playwright_select': return this.generateSelectStep(parameters); case 'playwright_custom_user_agent': return this.generateCustomUserAgentStep(parameters); default: console.warn(`Unsupported tool: ${toolName}`); return null; } } private generateNavigateStep(parameters: Record<string, unknown>): string { const { url, waitUntil } = parameters; const options = waitUntil ? `, { waitUntil: '${waitUntil}' }` : ''; return ` // Navigate to URL await page.goto('${url}'${options});`; } private generateFillStep(parameters: Record<string, unknown>): string { const { selector, value } = parameters; return ` // Fill input field await page.fill('${selector}', '${value}');`; } private generateClickStep(parameters: Record<string, unknown>): string { const { selector } = parameters; return ` // Click element await page.click('${selector}');`; } private generateScreenshotStep(parameters: Record<string, unknown>): string { const { name, fullPage = false, path } = parameters; const options = []; if (fullPage) options.push('fullPage: true'); if (path) options.push(`path: '${path}'`); const optionsStr = options.length > 0 ? `, { ${options.join(', ')} }` : ''; return ` // Take screenshot await page.screenshot({ path: '${name}.png'${optionsStr} });`; } private generateExpectResponseStep(parameters: Record<string, unknown>): string { const { url, id } = parameters; return ` // Wait for response const ${id}Response = page.waitForResponse('${url}');`; } private generateAssertResponseStep(parameters: Record<string, unknown>): string { const { id, value } = parameters; const assertion = value ? `\n const responseText = await ${id}Response.text();\n expect(responseText).toContain('${value}');` : `\n expect(${id}Response.ok()).toBeTruthy();`; return ` // Assert response${assertion}`; } private generateHoverStep(parameters: Record<string, unknown>): string { const { selector } = parameters; return ` // Hover over element await page.hover('${selector}');`; }

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/devskido/customed-playwright'

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