fill
Enter text into web form fields by specifying a CSS selector and value. This tool automatically clears existing content before filling to ensure accurate form submission.
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:60-98 (handler)Handler for the 'fill' MCP tool: waits for the selector, optionally clears the input by triple-clicking and backspacing, then types the provided value using Playwright API.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/tools/interaction.ts:60-98 (registration)Registers the 'fill' tool on the MCP server within registerInteractionTools.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))); } } );