fill
Type text into input fields or select options from dropdown menus on web pages for browser automation and testing.
Instructions
Type text into a input, text area or select an option from a element.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| uid | Yes | The uid of an element on the page from the page content snapshot | |
| value | Yes | The value to fill in |
Implementation Reference
- src/tools/input.ts:120-136 (handler)Core handler logic for filling form elements. Retrieves element handle, checks if combobox and selects option accordingly, otherwise fills directly.
async function fillFormElement( uid: string, value: string, context: McpContext, ) { const handle = await context.getElementByUid(uid); try { const aXNode = context.getAXNodeByUid(uid); if (aXNode && aXNode.role === 'combobox') { await selectOption(handle, aXNode, value); } else { await handle.asLocator().fill(value); } } finally { void handle.dispose(); } } - src/tools/input.ts:87-118 (helper)Helper function to select an option in a combobox by matching text content and filling with the actual value.
async function selectOption( handle: ElementHandle, aXNode: TextSnapshotNode, value: string, ) { let optionFound = false; for (const child of aXNode.children) { if (child.role === 'option' && child.name === value && child.value) { optionFound = true; const childHandle = await child.elementHandle(); if (childHandle) { try { const childValueHandle = await childHandle.getProperty('value'); try { const childValue = await childValueHandle.jsonValue(); if (childValue) { await handle.asLocator().fill(childValue.toString()); } } finally { void childValueHandle.dispose(); } break; } finally { void childHandle.dispose(); } } } } if (!optionFound) { throw new Error(`Could not find option with text "${value}"`); } } - src/tools/input.ts:145-152 (schema)Zod schema defining input parameters: uid of the element and value to fill.
schema: { uid: z .string() .describe( 'The uid of an element on the page from the page content snapshot', ), value: z.string().describe('The value to fill in'), }, - src/tools/input.ts:153-163 (handler)Tool handler wrapper that performs the fill action within waitForEventsAfterAction and updates response.
handler: async (request, response, context) => { await context.waitForEventsAfterAction(async () => { await fillFormElement( request.params.uid, request.params.value, context as McpContext, ); }); response.appendResponseLine(`Successfully filled out the element`); response.setIncludeSnapshot(true); }, - src/tools/input.ts:138-164 (registration)Registration of the 'fill' tool using defineTool, including name, description, schema, and handler.
export const fill = defineTool({ name: 'fill', description: `Type text into a input, text area or select an option from a <select> element.`, annotations: { category: ToolCategories.INPUT_AUTOMATION, readOnlyHint: false, }, schema: { uid: z .string() .describe( 'The uid of an element on the page from the page content snapshot', ), value: z.string().describe('The value to fill in'), }, handler: async (request, response, context) => { await context.waitForEventsAfterAction(async () => { await fillFormElement( request.params.uid, request.params.value, context as McpContext, ); }); response.appendResponseLine(`Successfully filled out the element`); response.setIncludeSnapshot(true); }, });