mcp-playwright

Instructions

Implementation Reference

• src/tools/browser/interaction.ts:104-118 (handler)

  The SelectTool.execute method implements the core logic of the playwright_select tool, waiting for the selector and calling page.selectOption with the provided value.

  /**
   * Tool for selecting options from dropdown menus
   */
  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:162-172 (schema)

  The tool definition including name, description, and input schema (selector and value) 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:496-497 (registration)

  Switch case in handleToolCall that dispatches to the SelectTool handler for "playwright_select".

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

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

  Initialization of the SelectTool instance used for handling playwright_select.

  if (!selectTool) selectTool = new SelectTool(server);

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

  Code generation helper that produces Playwright test code for the select action.

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