Chrome DevTools MCP

Instructions

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);
    },
  });