browser_select_option
Select values in dropdown menus during browser automation. Specify element references and values to interact with web page select elements programmatically.
Instructions
Select an option in a dropdown
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| element | Yes | Human-readable element description used to obtain permission to interact with the element | |
| ref | Yes | Exact target element reference from the page snapshot | |
| values | Yes | Array of values to select in the dropdown. This can be a single value or multiple values. |
Implementation Reference
- src/tools/snapshot.ts:150-160 (handler)The core handler function for the 'browser_select_option' tool. It resolves the element locator from the provided ref, adds corresponding Playwright code to the response, executes the selectOption action on the locator with the given values, and waits for completion.handle: async (tab, params, response) => { response.setIncludeSnapshot(); const locator = await tab.refLocator(params); response.addCode(`// Select options [${params.values.join(', ')}] in ${params.element}`); response.addCode(`await page.${await generateLocator(locator)}.selectOption(${javascript.formatObject(params.values)});`); await tab.waitForCompletion(async () => { await locator.selectOption(params.values); }); },
- src/tools/snapshot.ts:136-148 (schema)Defines the input schema (extending elementSchema with 'values' array) and the tool schema including name 'browser_select_option', title, description, inputSchema reference, and type.const selectOptionSchema = elementSchema.extend({ values: z.array(z.string()).describe('Array of values to select in the dropdown. This can be a single value or multiple values.'), }); const selectOption = defineTabTool({ capability: 'core', schema: { name: 'browser_select_option', title: 'Select option', description: 'Select an option in a dropdown', inputSchema: selectOptionSchema, type: 'destructive', },
- src/tools.ts:36-52 (registration)Registers the 'browser_select_option' tool by including the snapshot tools module (which exports it) in the central allTools array used by the backend.export const allTools: Tool<any>[] = [ ...common, ...console, ...dialogs, ...evaluate, ...files, ...install, ...keyboard, ...navigate, ...network, ...mouse, ...pdf, ...screenshot, ...snapshot, ...tabs, ...wait, ];
- src/browserServerBackend.ts:48-59 (registration)The BrowserServerBackend provides the tools list to MCP server and dispatches calls to the specific tool handler by name, enabling 'browser_select_option'.tools(): mcpServer.ToolSchema<any>[] { return this._tools.map(tool => tool.schema); } async callTool(schema: mcpServer.ToolSchema<any>, parsedArguments: any) { const response = new Response(this._context, schema.name, parsedArguments); const tool = this._tools.find(tool => tool.schema.name === schema.name)!; await tool.handle(this._context, parsedArguments, response); if (this._sessionLog) await this._sessionLog.log(response); return await response.serialize(); }
- src/browserServerBackend.ts:39-42 (registration)Initializes the backend's _tools array using filteredTools, which includes the 'browser_select_option' tool.constructor(config: FullConfig, browserContextFactory: BrowserContextFactory) { this._tools = filteredTools(config); this._context = new Context(this._tools, config, browserContextFactory); }