fix: Make fill_form more appealing when filling forms with checkboxes

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 (~7014 cl100k_base tokens)
 
 - **[Input automation](#input-automation)** (9 tools)
   - [`click`](#click)
@@ -85,7 +85,7 @@
 
 ### `fill_form`
 
-**Description:** [`Fill`](#fill) out multiple form elements at once
+**Description:** [`Fill`](#fill) out multiple form elements at once. To set checkboxes [`fill`](#fill) them with 'true'
 
 **Parameters:**
 

src/tools/input.ts

@@ -204,11 +204,33 @@ async function fillFormElement(
     if (aXNode && aXNode.role === 'combobox' && hasOptionChildren(aXNode)) {
       await selectOption(handle, aXNode, value);
     } else {
-      // Increase timeout for longer input values.
-      const timeoutPerChar = 10; // ms
-      const fillTimeout =
-        page.pptrPage.getDefaultTimeout() + value.length * timeoutPerChar;
-      await handle.asLocator().setTimeout(fillTimeout).fill(value);
+      const isToggle = await handle.evaluate(el => {
+        if (el instanceof HTMLInputElement) {
+          return el.type === 'checkbox' || el.type === 'radio';
+        }
+        const role = el.getAttribute('role');
+        return role === 'checkbox' || role === 'radio' || role === 'switch';
+      });
+
+      if (isToggle) {
+        const shouldBeChecked = value.toLowerCase() === 'true';
+        const isChecked = await handle.evaluate(el => {
+          if (el instanceof HTMLInputElement) {
+            return el.checked;
+          }
+          return el.getAttribute('aria-checked') === 'true';
+        });
+
+        if (isChecked !== shouldBeChecked) {
+          await handle.asLocator().click();
+        }
+      } else {
+        // Increase timeout for longer input values.
+        const timeoutPerChar = 10; // ms
+        const fillTimeout =
+          page.pptrPage.getDefaultTimeout() + value.length * timeoutPerChar;
+        await handle.asLocator().setTimeout(fillTimeout).fill(value);
+      }
     }
   } catch (error) {
     handleActionError(error, uid);
@@ -313,7 +335,7 @@ export const drag = definePageTool({
 
 export const fillForm = definePageTool({
   name: 'fill_form',
-  description: `Fill out multiple form elements at once`,
+  description: `Fill out multiple form elements at once. To set checkboxes fill them with 'true'`,
   annotations: {
     category: ToolCategory.INPUT,
     readOnlyHint: false,

tests/tools/input.test.ts

@@ -622,6 +622,180 @@ describe('input', () => {
         );
       });
     });
+
+    it('toggles checkboxes', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(
+          html`<input
+            type="checkbox"
+            id="cb"
+          />`,
+        );
+        context.getSelectedMcpPage().textSnapshot = await TextSnapshot.create(
+          context.getSelectedMcpPage(),
+        );
+
+        // Check it
+        await fill.handler(
+          {
+            params: {
+              uid: '1_1',
+              value: 'true',
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        assert.strictEqual(
+          response.responseLines[0],
+          'Successfully filled out the element',
+        );
+        assert.ok(response.includeSnapshot);
+        let isChecked = await page.$eval(
+          '#cb',
+          el => (el as HTMLInputElement).checked,
+        );
+        assert.strictEqual(isChecked, true);
+
+        // Uncheck it
+        await fill.handler(
+          {
+            params: {
+              uid: '1_1',
+              value: 'false',
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          new McpResponse({} as ParsedArguments),
+          context,
+        );
+
+        isChecked = await page.$eval(
+          '#cb',
+          el => (el as HTMLInputElement).checked,
+        );
+        assert.strictEqual(isChecked, false);
+      });
+    });
+
+    it('toggles switches', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(html`
+          <div
+            role="switch"
+            aria-checked="false"
+            id="sw"
+            style="width: 20px; height: 20px; background: blue;"
+            onclick="this.setAttribute('aria-checked', this.getAttribute('aria-checked') === 'true' ? 'false' : 'true')"
+          >
+            switch
+          </div>
+        `);
+        context.getSelectedMcpPage().textSnapshot = await TextSnapshot.create(
+          context.getSelectedMcpPage(),
+        );
+
+        // Turn it on
+        await fill.handler(
+          {
+            params: {
+              uid: '1_1',
+              value: 'true',
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        let swChecked = await page.$eval(
+          '#sw',
+          el => el.getAttribute('aria-checked') === 'true',
+        );
+        assert.strictEqual(swChecked, true);
+
+        // Turn it off
+        await fill.handler(
+          {
+            params: {
+              uid: '1_1',
+              value: 'false',
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          new McpResponse({} as ParsedArguments),
+          context,
+        );
+
+        swChecked = await page.$eval(
+          '#sw',
+          el => el.getAttribute('aria-checked') === 'true',
+        );
+        assert.strictEqual(swChecked, false);
+      });
+    });
+
+    it('selects radio buttons', async () => {
+      await withMcpContext(async (response, context) => {
+        const page = context.getSelectedPptrPage();
+        await page.setContent(html`
+          <input
+            type="radio"
+            name="group1"
+            id="r1"
+            checked
+          />
+          <input
+            type="radio"
+            name="group1"
+            id="r2"
+          />
+        `);
+        context.getSelectedMcpPage().textSnapshot = await TextSnapshot.create(
+          context.getSelectedMcpPage(),
+        );
+
+        // Initial state
+        let r1Checked = await page.$eval(
+          '#r1',
+          el => (el as HTMLInputElement).checked,
+        );
+        let r2Checked = await page.$eval(
+          '#r2',
+          el => (el as HTMLInputElement).checked,
+        );
+        assert.strictEqual(r1Checked, true);
+        assert.strictEqual(r2Checked, false);
+
+        // Fill second radio with true
+        await fill.handler(
+          {
+            params: {
+              uid: '1_2',
+              value: 'true',
+            },
+            page: context.getSelectedMcpPage(),
+          },
+          response,
+          context,
+        );
+
+        r1Checked = await page.$eval(
+          '#r1',
+          el => (el as HTMLInputElement).checked,
+        );
+        r2Checked = await page.$eval(
+          '#r2',
+          el => (el as HTMLInputElement).checked,
+        );
+        assert.strictEqual(r1Checked, false);
+        assert.strictEqual(r2Checked, true);
+      });
+    });
   });
 
   describe('drags', () => {