fix(input): stop native select option clicks timing out

Author: cooleryu

docs/tool-reference.md

@@ -1,6 +1,6 @@
 <!-- AUTO GENERATED DO NOT EDIT - run 'npm run gen' to update-->
 
-# Chrome DevTools MCP Tool Reference (~7005 cl100k_base tokens)
+# Chrome DevTools MCP Tool Reference (~7033 cl100k_base tokens)
 
 - **[Input automation](#input-automation)** (9 tools)
   - [`click`](#click)
@@ -49,7 +49,7 @@
 
 ### `click`
 
-**Description:** Clicks on the provided element
+**Description:** Clicks a page element such as a button, link, checkbox, or other interactive control. To choose an option from a native &lt;select&gt; element, use [`fill`](#fill) instead.
 
 **Parameters:**
 

src/bin/cliDefinitions.ts

@@ -24,7 +24,8 @@ export type Commands = Record<
 >;
 export const commands: Commands = {
   click: {
-    description: 'Clicks on the provided element',
+    description:
+      'Clicks a page element such as a button, link, checkbox, or other interactive control. To choose an option from a native <select> element, use fill instead.',
     category: 'Input automation',
     args: {
       uid: {

src/tools/input.ts

@@ -42,9 +42,38 @@ function handleActionError(error: unknown, uid: string) {
   );
 }
 
+async function selectNativeSelectOption(handle: ElementHandle<Element>) {
+  return await handle.evaluate(node => {
+    if (!(node instanceof HTMLOptionElement)) {
+      return false;
+    }
+
+    const select = node.closest('select');
+    if (!select || select.multiple || select.disabled || node.disabled) {
+      return false;
+    }
+
+    const parentElement = node.parentElement;
+    if (
+      parentElement instanceof HTMLOptGroupElement &&
+      parentElement.disabled
+    ) {
+      return false;
+    }
+
+    const wasSelected = node.selected;
+    node.selected = true;
+    if (!wasSelected) {
+      select.dispatchEvent(new Event('input', {bubbles: true}));
+      select.dispatchEvent(new Event('change', {bubbles: true}));
+    }
+    return true;
+  });
+}
+
 export const click = definePageTool({
   name: 'click',
-  description: `Clicks on the provided element`,
+  description: `Clicks a page element such as a button, link, checkbox, or other interactive control. To choose an option from a native <select> element, use fill instead.`,
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,
@@ -61,8 +90,18 @@ export const click = definePageTool({
   handler: async (request, response) => {
     const uid = request.params.uid;
     const handle = await request.page.getElementByUid(uid);
+    const aXNode = request.page.getAXNodeByUid(uid);
+    const shouldSelectNativeOption =
+      !request.params.dblClick && aXNode?.role === 'option';
     try {
       await request.page.waitForEventsAfterAction(async () => {
+        if (
+          shouldSelectNativeOption &&
+          (await selectNativeSelectOption(handle))
+        ) {
+          return;
+        }
+
         await handle.asLocator().click({
           count: request.params.dblClick ? 2 : 1,
         });

tests/tools/input.test.ts

@@ -226,6 +226,145 @@ describe('input', () => {
         assert.notStrictEqual(response.snapshotParams, undefined);
       });
     });
+
+    it('selects a collapsed native select option by option uid', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<select onchange="document.body.dataset.selected = this.value">
+            <option value="v1">one</option>
+            <option value="v2">two</option>
+          </select>`,
+        );
+        const mcpPage = context.getSelectedMcpPage();
+        mcpPage.textSnapshot = await TextSnapshot.create(mcpPage);
+        const optionNode = [...mcpPage.textSnapshot.idToNode.values()].find(
+          node => node.role === 'option' && node.name === 'two',
+        );
+        assert.ok(optionNode);
+
+        await click.handler(
+          {
+            params: {
+              uid: optionNode.id,
+            },
+            page: mcpPage,
+          },
+          response,
+          context,
+        );
+
+        assert.strictEqual(
+          response.responseLines[0],
+          'Successfully clicked on the element',
+        );
+        assert.deepStrictEqual(
+          await page.evaluate(() => {
+            const select = document.querySelector('select');
+            return {
+              selectedValue: select?.value,
+              changeEventValue: document.body.dataset.selected,
+            };
+          }),
+          {
+            selectedValue: 'v2',
+            changeEventValue: 'v2',
+          },
+        );
+      });
+    });
+
+    it('selects a collapsed native optgroup option by option uid', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<select onchange="document.body.dataset.selected = this.value">
+            <optgroup label="Numbers">
+              <option value="v1">one</option>
+              <option value="v2">two</option>
+            </optgroup>
+          </select>`,
+        );
+        const mcpPage = context.getSelectedMcpPage();
+        mcpPage.textSnapshot = await TextSnapshot.create(mcpPage);
+        const optionNode = [...mcpPage.textSnapshot.idToNode.values()].find(
+          node => node.role === 'option' && node.name === 'two',
+        );
+        assert.ok(optionNode);
+
+        await click.handler(
+          {
+            params: {
+              uid: optionNode.id,
+            },
+            page: mcpPage,
+          },
+          response,
+          context,
+        );
+
+        assert.strictEqual(
+          response.responseLines[0],
+          'Successfully clicked on the element',
+        );
+        assert.deepStrictEqual(
+          await page.evaluate(() => {
+            const select = document.querySelector('select');
+            return {
+              selectedValue: select?.value,
+              changeEventValue: document.body.dataset.selected,
+            };
+          }),
+          {
+            selectedValue: 'v2',
+            changeEventValue: 'v2',
+          },
+        );
+      });
+    });
+
+    it('clicks custom ARIA option elements through the normal click path', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<div role="listbox">
+            <div
+              role="option"
+              tabindex="0"
+              onclick="document.body.dataset.clicked = this.textContent.trim()"
+            >
+              custom two
+            </div>
+          </div>`,
+        );
+        const mcpPage = context.getSelectedMcpPage();
+        mcpPage.textSnapshot = await TextSnapshot.create(mcpPage);
+        const optionNode = [...mcpPage.textSnapshot.idToNode.values()].find(
+          node => node.role === 'option' && node.name === 'custom two',
+        );
+        assert.ok(optionNode);
+
+        await click.handler(
+          {
+            params: {
+              uid: optionNode.id,
+            },
+            page: mcpPage,
+          },
+          response,
+          context,
+        );
+
+        assert.strictEqual(
+          response.responseLines[0],
+          'Successfully clicked on the element',
+        );
+        assert.strictEqual(
+          await page.evaluate(() => document.body.dataset.clicked),
+          'custom two',
+        );
+      });
+    });
   });
 
   describe('hover', () => {