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

Playwright MCP