browser_select_option
Destructive
Select options in dropdown menus during web automation by specifying element references and desired values to interact with web page controls.
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:148-157 (handler)The core handler function for the 'browser_select_option' tool. It captures a page snapshot, locates the target dropdown element using a reference from a prior snapshot, generates equivalent Playwright code for the action, and executes the selection of one or more options.
handle: async (tab, params, response) => { response.setIncludeSnapshot(); const locator = await tab.refLocator(params); 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:140-146 (schema)The tool schema defining the name, title, description, input schema (element ref + values array), and type as destructive.
schema: { name: 'browser_select_option', title: 'Select option', description: 'Select an option in a dropdown', inputSchema: selectOptionSchema, type: 'destructive', }, - src/tools/snapshot.ts:134-136 (schema)Zod schema for inputs: extends elementSchema (element description + ref) with 'values' array of strings.
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.'), }); - src/tools.ts:36-52 (registration)The 'snapshot' module (containing browser_select_option) is imported and registered by inclusion in the 'allTools' array, which provides tools to the MCP backend.
export const allTools: Tool<any>[] = [ ...common, ...console, ...dialogs, ...evaluate, ...files, ...install, ...keyboard, ...navigate, ...network, ...mouse, ...pdf, ...screenshot, ...snapshot, ...tabs, ...wait, ]; - src/tools/tool.ts:56-70 (helper)The defineTabTool helper wraps the raw tab handler, adding context.currentTabOrDie(), modal state checks, and delegates to the tab-specific handle.
export function defineTabTool<Input extends z.Schema>(tool: TabTool<Input>): Tool<Input> { return { ...tool, handle: async (context, params, response) => { const tab = context.currentTabOrDie(); const modalStates = tab.modalStates().map(state => state.type); if (tool.clearsModalState && !modalStates.includes(tool.clearsModalState)) response.addError(`Error: The tool "${tool.schema.name}" can only be used when there is related modal state present.\n` + tab.modalStatesMarkdown().join('\n')); else if (!tool.clearsModalState && modalStates.length) response.addError(`Error: Tool "${tool.schema.name}" does not handle the modal state.\n` + tab.modalStatesMarkdown().join('\n')); else return tool.handle(tab, params, response); }, }; }