fill
Enter text into web form fields using CSS selectors to automate data input during browser automation tasks.
Instructions
Fill a text input or textarea with a value
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| selector | Yes | CSS selector for the element | |
| value | Yes | Text value to fill | |
| clearFirst | No | Clear the field before filling | |
| timeout | No | Timeout in milliseconds | |
| tabId | No | Tab ID to operate on (uses active tab if not specified) |
Implementation Reference
- src/tools/interaction.ts:65-97 (handler)The core handler function that executes the 'fill' tool: waits for the element, clears it if requested, types the value using Puppeteer, handles errors.
const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } if (clearFirst ?? true) { // Triple-click to select all, then delete await element.click({ clickCount: 3 }); await page.keyboard.press('Backspace'); } await element.type(value); return handleResult(ok({ filled: true, selector, value })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } } - src/tools/interaction.ts:60-98 (registration)Registration of the 'fill' tool on the MCP server, including name, description, input schema, and inline handler.
server.tool( 'fill', 'Fill a text input or textarea with a value', fillSchema.shape, async ({ selector, value, clearFirst, timeout, tabId }) => { const pageResult = await getPageForOperation(tabId); if (!pageResult.success) { return handleResult(pageResult); } const page = pageResult.data; const timeoutMs = timeout ?? getDefaultTimeout(); try { const element = await page.waitForSelector(selector, { timeout: timeoutMs, }); if (!element) { return handleResult(err(selectorNotFound(selector))); } if (clearFirst ?? true) { // Triple-click to select all, then delete await element.click({ clickCount: 3 }); await page.keyboard.press('Backspace'); } await element.type(value); return handleResult(ok({ filled: true, selector, value })); } catch (error) { if (error instanceof Error && error.message.includes('waiting for selector')) { return handleResult(err(selectorNotFound(selector))); } return handleResult(err(normalizeError(error))); } } ); - src/schemas.ts:60-66 (schema)Zod schema defining the input parameters for the 'fill' tool.
export const fillSchema = z.object({ selector: selectorSchema, value: z.string().describe('Text value to fill'), clearFirst: z.boolean().optional().default(true).describe('Clear the field before filling'), timeout: timeoutSchema, tabId: tabIdSchema, }); - src/server.ts:24-24 (registration)High-level registration call that includes the 'fill' tool among interaction tools.
registerInteractionTools(server);