type
Enter text into labeled input fields on web pages to automate form filling and data entry tasks.
Instructions
Type text into an input field specified by its numbered label from the annotated screenshot. Optionally replace existing text first.
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| label | Yes | The label of the input field | |
| text | Yes | The text to type into the input field | |
| replaceText | No | If true, clears any existing text in the input field before typing the new text. |
Implementation Reference
- src/index.ts:709-776 (handler)The handler function that implements the core logic of the 'type' tool. It selects an input element by its data-label attribute (from page annotations), optionally replaces existing text, sets the new value, and triggers input and change events to simulate user typing.
async function handleType(page: Page, args: any): Promise<CallToolResult> { const { label, text, replaceText = false } = args; if (!label || !text) { return { isError: true, content: [ { type: "text", text: "Both label and text parameters are required for typing", }, ], }; } const selector = `[data-label="${label}"]`; try { await page.waitForSelector(selector, { visible: true }); } catch { return { isError: true, content: [ { type: "text", text: `Could not find input element with label ${label}.`, }, ], }; } // Option A: Directly set the value & dispatch events if (replaceText) { await page.$eval( selector, (el: Element, value: string) => { const input = el as HTMLInputElement; input.value = value; input.dispatchEvent(new Event("input", { bubbles: true })); input.dispatchEvent(new Event("change", { bubbles: true })); }, text ); } else { await page.$eval( selector, (el: Element, value: string) => { const input = el as HTMLInputElement; input.value = (input.value ?? "") + value; input.dispatchEvent(new Event("input", { bubbles: true })); input.dispatchEvent(new Event("change", { bubbles: true })); }, text ); } // Option B (Alternative): Use page.type() to simulate typing // An example if you want to more accurately emulate user typing: // if (replaceText) { // await page.click(selector, { clickCount: 3 }); // highlights existing text // await page.type(selector, text); // } else { // await page.type(selector, text); // } return { isError: false, content: [{ type: "text", text: `Typed '${text}' into label ${label}.` }], }; } - src/index.ts:498-521 (schema)The tool definition including name, description, and input schema for validation of parameters: label (number), text (string, required), replaceText (boolean, optional). This is part of the TOOLS array returned by listTools.
{ name: "type", description: "Type text into an input field specified by its numbered label from the annotated screenshot. Optionally replace existing text first.", inputSchema: { type: "object", properties: { label: { type: "number", description: "The label of the input field", }, text: { type: "string", description: "The text to type into the input field", }, replaceText: { type: "boolean", description: "If true, clears any existing text in the input field before typing the new text.", }, }, required: ["label", "text"], }, }, - src/index.ts:925-927 (registration)The switch case in the main handleToolCall dispatcher that routes 'type' tool calls to the handleType function.
case "type": result = await handleType(page, args); break; - src/index.ts:1069-1070 (registration)The handler for ListToolsRequestSchema returns the TOOLS array, which includes the 'type' tool definition, effectively registering it with the MCP server.
tools: TOOLS, }));