browser_select_option
Destructive
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); }