Skip to main content
Glama
devskido

Playwright MCP Server

by devskido

playwright_select

Select a specific value from a dropdown or list element on a web page using a CSS selector with this browser automation tool, enabling precise interaction with dynamic web content.

Instructions

Select an element on the page with Select tag

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
selectorYesCSS selector for element to select
valueYesValue to select

Implementation Reference

  • The SelectTool class containing the execute method that implements the playwright_select tool logic using Playwright's page.selectOption.
    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}`); }); } }
  • The input schema definition for the playwright_select tool, specifying selector and value parameters.
    { 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"], }, },
  • Registration and dispatch in the main tool handler switch statement, calling SelectTool.execute for 'playwright_select'.
    case "playwright_select": return await selectTool.execute(args, context);
  • Instantiation of the SelectTool instance in the initializeTools function.
    if (!selectTool) selectTool = new SelectTool(server);
  • Code generation helper in PlaywrightGenerator that converts playwright_select actions to test code using page.selectOption.
    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}');`; }

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