Playwright MCP Server

Instructions

Implementation Reference

• src/tools/browser/interaction.ts:123-134 (handler)

  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}`);
      });
    }
  }

• src/tools.ts:173-183 (schema)

  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"],
    },
  },

• src/toolHandler.ts:499-500 (registration)

  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);

• src/toolHandler.ts:326-326 (registration)

  Instantiation of the HoverTool instance in the initializeTools function.

  if (!hoverTool) hoverTool = new HoverTool(server);

• src/tools/codegen/generator.ts:79-146 (helper)

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