browser_fill
Automatically populate web form fields using CSS selectors to input specified values during browser automation.
Instructions
Fill out an input field
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for input field | |
| value | Yes | Value to fill |
Implementation Reference
- index.ts:316-355 (handler)Handler implementation for the 'browser_fill' tool. Fills the input field specified by CSS selector with the given value using pressSequentially, includes error handling and retry logic for strict mode violations.
case ToolName.BrowserFill: try { await page.locator(args.selector).pressSequentially(args.value, { delay: 100 }); return { content: [{ type: "text", text: `Filled ${args.selector} with: ${args.value}`, }], isError: false, }; } catch (error) { if((error as Error).message.includes("strict mode violation")) { console.log("Strict mode violation, retrying on first element..."); try { await page.locator(args.selector).first().pressSequentially(args.value, { delay: 100 }); return { content: [{ type: "text", text: `Filled ${args.selector} with: ${args.value}`, }], isError: false, }; } catch (error) { return { content: [{ type: "text", text: `Failed (twice) to fill ${args.selector}: ${(error as Error).message}`, }], isError: true, }; } } return { content: [{ type: "text", text: `Failed to fill ${args.selector}: ${(error as Error).message}`, }], isError: true, }; } - index.ts:83-94 (schema)Input schema definition for the 'browser_fill' tool, specifying selector and value as required string properties.
{ name: ToolName.BrowserFill, description: "Fill out an input field", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for input field" }, value: { type: "string", description: "Value to fill" }, }, required: ["selector", "value"], }, }, - index.ts:36-152 (registration)The TOOLS array where the 'browser_fill' tool is registered with its schema, used in ListToolsRequest handler.
const TOOLS: Tool[] = [ { name: ToolName.BrowserNavigate, description: "Navigate to a URL", inputSchema: { type: "object", properties: { url: { type: "string" }, }, required: ["url"], }, }, { name: ToolName.BrowserScreenshot, description: "Take a screenshot of the current page or a specific element", inputSchema: { type: "object", properties: { name: { type: "string", description: "Name for the screenshot" }, selector: { type: "string", description: "CSS selector for element to screenshot" }, fullPage: { type: "boolean", description: "Take a full page screenshot (default: false)", default: false }, }, required: ["name"], }, }, { name: ToolName.BrowserClick, description: "Click an element on the page using CSS selector", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for element to click" }, }, required: ["selector"], }, }, { name: ToolName.BrowserClickText, description: "Click an element on the page by its text content", inputSchema: { type: "object", properties: { text: { type: "string", description: "Text content of the element to click" }, }, required: ["text"], }, }, { name: ToolName.BrowserFill, description: "Fill out an input field", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for input field" }, value: { type: "string", description: "Value to fill" }, }, required: ["selector", "value"], }, }, { name: ToolName.BrowserSelect, description: "Select an element on the page with Select tag using CSS selector", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for element to select" }, value: { type: "string", description: "Value to select" }, }, required: ["selector", "value"], }, }, { name: ToolName.BrowserSelectText, description: "Select an element on the page with Select tag by its text content", inputSchema: { type: "object", properties: { text: { type: "string", description: "Text content of the element to select" }, value: { type: "string", description: "Value to select" }, }, required: ["text", "value"], }, }, { name: ToolName.BrowserHover, description: "Hover an element on the page using CSS selector", inputSchema: { type: "object", properties: { selector: { type: "string", description: "CSS selector for element to hover" }, }, required: ["selector"], }, }, { name: ToolName.BrowserHoverText, description: "Hover an element on the page by its text content", inputSchema: { type: "object", properties: { text: { type: "string", description: "Text content of the element to hover" }, }, required: ["text"], }, }, { name: ToolName.BrowserEvaluate, description: "Execute JavaScript in the browser console", inputSchema: { type: "object", properties: { script: { type: "string", description: "JavaScript code to execute" }, }, required: ["script"], }, }, ]; - index.ts:22-33 (helper)Enum definition mapping BrowserFill to the tool name string 'browser_fill'.
enum ToolName { BrowserNavigate = "browser_navigate", BrowserScreenshot = "browser_screenshot", BrowserClick = "browser_click", BrowserClickText = "browser_click_text", BrowserFill = "browser_fill", BrowserSelect = "browser_select", BrowserSelectText = "browser_select_text", BrowserHover = "browser_hover", BrowserHoverText = "browser_hover_text", BrowserEvaluate = "browser_evaluate" }