Playwright MCP Server

Instructions

Implementation Reference

• src/tools/browser/interaction.ts:58-69 (handler)

  The SelectTool class provides the core execution logic for the 'playwright_select' tool. It waits for the selector to appear and then uses Playwright's page.selectOption to select the specified value.

  export class SelectTool extends BrowserToolBase {
    /**
     * Execute the select tool
     */
    async execute(args: any, context: ToolContext): Promise<ToolResponse> {
      return this.safeExecute(context, async (page) => {
        await page.waitForSelector(args.selector);
        await page.selectOption(args.selector, args.value);
        return createSuccessResponse(`Selected ${args.selector} with: ${args.value}`);
      });
    }
  }

• src/tools.ts:148-159 (schema)

  Defines the tool metadata including name, description, and input schema validation for 'playwright_select'.

  {
    name: "playwright_select",
    description: "Select an element on the page with Select tag",
    inputSchema: {
      type: "object",
      properties: {
        selector: { type: "string", description: "CSS selector for element to select" },
        value: { type: "string", description: "Value to select" },
      },
      required: ["selector", "value"],
    },
  },

• src/toolHandler.ts:477-478 (registration)

  Dispatches 'playwright_select' tool calls to the SelectTool instance in the main tool handler switch statement.

  case "playwright_select":
    return await selectTool.execute(args, context);

• src/tools.ts:410-411 (registration)

  Includes 'playwright_select' in the BROWSER_TOOLS array used for conditional browser launching and tool categorization.

  "playwright_fill",
  "playwright_select",

• src/tools/codegen/generator.ts:81-152 (helper)

  Generates Playwright test code snippet for 'playwright_select' action during codegen sessions.

      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}');`;
  }
  
  private generateSelectStep(parameters: Record<string, unknown>): string {
    const { selector, value } = parameters;
    return `
    // Select option
    await page.selectOption('${selector}', '${value}');`;