docs

Author: OrKoN

README.md

@@ -414,14 +414,15 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
 
 <!-- BEGIN AUTO GENERATED TOOLS -->
 
-- **Input automation** (8 tools)
+- **Input automation** (9 tools)
   - [`click`](docs/tool-reference.md#click)
   - [`drag`](docs/tool-reference.md#drag)
   - [`fill`](docs/tool-reference.md#fill)
   - [`fill_form`](docs/tool-reference.md#fill_form)
   - [`handle_dialog`](docs/tool-reference.md#handle_dialog)
   - [`hover`](docs/tool-reference.md#hover)
   - [`press_key`](docs/tool-reference.md#press_key)
+  - [`type_text`](docs/tool-reference.md#type_text)
   - [`upload_file`](docs/tool-reference.md#upload_file)
 - **Navigation automation** (6 tools)
   - [`close_page`](docs/tool-reference.md#close_page)

docs/tool-reference.md

@@ -1,15 +1,16 @@
 <!-- AUTO GENERATED DO NOT EDIT - run 'npm run docs' to update-->
 
-# Chrome DevTools MCP Tool Reference (~7125 cl100k_base tokens)
+# Chrome DevTools MCP Tool Reference (~7334 cl100k_base tokens)
 
-- **[Input automation](#input-automation)** (8 tools)
+- **[Input automation](#input-automation)** (9 tools)
   - [`click`](#click)
   - [`drag`](#drag)
   - [`fill`](#fill)
   - [`fill_form`](#fill_form)
   - [`handle_dialog`](#handle_dialog)
   - [`hover`](#hover)
   - [`press_key`](#press_key)
+  - [`type_text`](#type_text)
   - [`upload_file`](#upload_file)
 - **[Navigation automation](#navigation-automation)** (6 tools)
   - [`close_page`](#close_page)
@@ -119,6 +120,17 @@
 
 ---
 
+### `type_text`
+
+**Description:** Type text using keyboard into a previously focused input
+
+**Parameters:**
+
+- **text** (string) **(required)**: The text to type
+- **submitKey** (string) _(optional)_: Optional key to press after typing. E.g., "Enter", "Tab", "Escape"
+
+---
+
 ### `upload_file`
 
 **Description:** Upload a file through a provided element.
@@ -196,7 +208,7 @@
 
 **Parameters:**
 
-- **text** (string) **(required)**: Text to appear on the page
+- **text** (array) **(required)**: Non-empty list of texts. Resolves when any value appears on the page.
 - **timeout** (integer) _(optional)_: Maximum wait time in milliseconds. If set to 0, the default timeout will be used.
 
 ---

package-lock.json

@@ -55,7 +55,7 @@
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
-    "chrome-devtools-frontend": "1.0.1583146",
+    "chrome-devtools-frontend": "1.0.1587572",
     "core-js": "3.48.0",
     "debug": "4.4.3",
     "eslint": "^9.35.0",

package.json

@@ -873,15 +873,17 @@ export class McpContext implements Context {
     return this.#networkCollector.getIdForResource(request);
   }
 
-  waitForTextOnPage(text: string, timeout?: number): Promise<Element> {
+  waitForTextOnPage(text: string[], timeout?: number): Promise<Element> {
     const page = this.getSelectedPage();
     const frames = page.frames();
 
     let locator = this.#locatorClass.race(
-      frames.flatMap(frame => [
-        frame.locator(`aria/${text}`),
-        frame.locator(`text/${text}`),
-      ]),
+      frames.flatMap(frame =>
+        text.flatMap(value => [
+          frame.locator(`aria/${value}`),
+          frame.locator(`text/${value}`),
+        ]),
+      ),
     );
 
     if (timeout) {

src/McpContext.ts

@@ -167,7 +167,7 @@ export type Context = Readonly<{
     action: () => Promise<unknown>,
     options?: {timeout?: number},
   ): Promise<void>;
-  waitForTextOnPage(text: string, timeout?: number): Promise<Element>;
+  waitForTextOnPage(text: string[], timeout?: number): Promise<Element>;
   getDevToolsData(): Promise<DevToolsData>;
   /**
    * Returns a reqid for a cdpRequestId.

src/tools/ToolDefinition.ts

@@ -7,7 +7,7 @@
 import {logger} from '../logger.js';
 import type {McpContext, TextSnapshotNode} from '../McpContext.js';
 import {zod} from '../third_party/index.js';
-import type {ElementHandle} from '../third_party/index.js';
+import type {ElementHandle, KeyInput} from '../third_party/index.js';
 import {parseKey} from '../utils/keyboard.js';
 
 import {ToolCategory} from './categories.js';
@@ -23,6 +23,13 @@ const includeSnapshotSchema = zod
   .optional()
   .describe('Whether to include a snapshot in the response. Default is false.');
 
+const submitKeySchema = zod
+  .string()
+  .optional()
+  .describe(
+    'Optional key to press after typing. E.g., "Enter", "Tab", "Escape"',
+  );
+
 function handleActionError(error: unknown, uid: string) {
   logger('failed to act using a locator', error);
   throw new Error(
@@ -239,6 +246,31 @@ export const fill = defineTool({
   },
 });
 
+export const typeText = defineTool({
+  name: 'type_text',
+  description: `Type text using keyboard into a previously focused input`,
+  annotations: {
+    category: ToolCategory.INPUT,
+    readOnlyHint: false,
+  },
+  schema: {
+    text: zod.string().describe('The text to type'),
+    submitKey: submitKeySchema,
+  },
+  handler: async (request, response, context) => {
+    await context.waitForEventsAfterAction(async () => {
+      const page = context.getSelectedPage();
+      await page.keyboard.type(request.params.text);
+      if (request.params.submitKey) {
+        await page.keyboard.press(request.params.submitKey as KeyInput);
+      }
+    });
+    response.appendResponseLine(
+      `Typed text "${request.params.text}${request.params.submitKey ? ` + ${request.params.submitKey}` : ''}"`,
+    );
+  },
+});
+
 export const drag = defineTool({
   name: 'drag',
   description: `Drag an element onto another element`,

src/tools/input.ts

@@ -49,7 +49,12 @@ export const waitFor = defineTool({
     readOnlyHint: true,
   },
   schema: {
-    text: zod.string().describe('Text to appear on the page'),
+    text: zod
+      .array(zod.string())
+      .min(1)
+      .describe(
+        'Non-empty list of texts. Resolves when any value appears on the page.',
+      ),
     ...timeoutSchema,
   },
   handler: async (request, response, context) => {
@@ -59,7 +64,7 @@ export const waitFor = defineTool({
     );
 
     response.appendResponseLine(
-      `Element with text "${request.params.text}" found.`,
+      `Element matching one of ${JSON.stringify(request.params.text)} found.`,
     );
 
     response.includeSnapshot();

src/tools/snapshot.ts

@@ -19,6 +19,7 @@ import {
   uploadFile,
   pressKey,
   clickAt,
+  typeText,
 } from '../../src/tools/input.js';
 import {parseKey} from '../../src/utils/keyboard.js';
 import {serverHooks} from '../server.js';
@@ -355,7 +356,7 @@ describe('input', () => {
     it('fills out a textarea marked as combobox', async () => {
       await withMcpContext(async (response, context) => {
         const page = context.getSelectedPage();
-        await page.setContent(html`<textarea role="combobox" />`);
+        await page.setContent(html`<textarea role="combobox"></textarea>`);
         await context.createTextSnapshot();
         await fill.handler(
           {
@@ -383,7 +384,7 @@ describe('input', () => {
     it('fills out a textarea with long text', async () => {
       await withMcpContext(async (response, context) => {
         const page = context.getSelectedPage();
-        await page.setContent(html`<textarea />`);
+        await page.setContent(html`<textarea></textarea>`);
         await context.createTextSnapshot();
         page.setDefaultTimeout(1000);
         await fill.handler(
@@ -411,6 +412,90 @@ describe('input', () => {
       });
     });
 
+    it('types text', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPage();
+        await page.setContent(html`<textarea></textarea>`);
+        await page.click('textarea');
+        await context.createTextSnapshot();
+        await typeText.handler(
+          {
+            params: {
+              text: 'test',
+            },
+          },
+          response,
+          context,
+        );
+        assert.strictEqual(response.responseLines[0], 'Typed text "test"');
+        assert.strictEqual(
+          await page.evaluate(() => {
+            return document.body.querySelector('textarea')?.value;
+          }),
+          'test',
+        );
+      });
+    });
+
+    it('types text with submit key', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPage();
+        await page.setContent(html`<textarea></textarea>`);
+        await page.click('textarea');
+        await context.createTextSnapshot();
+        await typeText.handler(
+          {
+            params: {
+              text: 'test',
+              submitKey: 'Tab',
+            },
+          },
+          response,
+          context,
+        );
+        assert.strictEqual(
+          response.responseLines[0],
+          'Typed text "test + Tab"',
+        );
+        assert.strictEqual(
+          await page.evaluate(() => {
+            return document.body.querySelector('textarea')?.value;
+          }),
+          'test',
+        );
+        assert.ok(
+          await page.evaluate(() => {
+            return (
+              document.body.querySelector('textarea') !== document.activeElement
+            );
+          }),
+        );
+      });
+    });
+
+    it('errors on invalid submit key', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPage();
+        await page.setContent(html`<textarea></textarea>`);
+        await page.click('textarea');
+        await context.createTextSnapshot();
+        try {
+          await typeText.handler(
+            {
+              params: {
+                text: 'test',
+                submitKey: 'XXX',
+              },
+            },
+            response,
+            context,
+          );
+        } catch (err) {
+          assert.strictEqual(err.message, 'Unknown key: "XXX"');
+        }
+      });
+    });
+
     it('reproduction: fill isolation', async () => {
       await withMcpContext(async (_response, context) => {
         const page = context.getSelectedPage();