feat(mcp): add button and clickCount options to browser_mouse_click_xy

packages/playwright-core/src/utils/isomorphic/stringUtils.ts

@@ -60,7 +60,7 @@ export function formatObject(value: any, indent = '  ', mode: 'multiline' | 'one
     for (const key of keys)
       tokens.push(`${key}: ${formatObject(value[key])}`);
     if (mode === 'multiline')
-      return `{\n${tokens.join(`,\n${indent}`)}\n}`;
+      return `{\n${tokens.map(t => indent + t).join(`,\n`)}\n}`;
     return `{ ${tokens.join(', ')} }`;
   }
   return String(value);

packages/playwright/src/mcp/browser/tools/mouse.ts

@@ -15,6 +15,7 @@
  */
 
 import { z } from 'playwright-core/lib/mcpBundle';
+import { formatObjectOrVoid } from 'playwright-core/lib/utils';
 import { defineTabTool } from './tool';
 
 const mouseMove = defineTabTool({
@@ -54,9 +55,12 @@ const mouseDown = defineTabTool({
   },
 
   handle: async (tab, params, response) => {
+    const options = { button: params.button };
+    const optionsArg = formatObjectOrVoid(options);
+
     response.addCode(`// Press mouse down`);
-    response.addCode(`await page.mouse.down({ button: '${params.button}' });`);
-    await tab.page.mouse.down({ button: params.button });
+    response.addCode(`await page.mouse.down(${optionsArg});`);
+    await tab.page.mouse.down(options);
   },
 });
 
@@ -74,9 +78,12 @@ const mouseUp = defineTabTool({
   },
 
   handle: async (tab, params, response) => {
+    const options = { button: params.button };
+    const optionsArg = formatObjectOrVoid(options);
+
     response.addCode(`// Press mouse up`);
-    response.addCode(`await page.mouse.up({ button: '${params.button}' });`);
-    await tab.page.mouse.up({ button: params.button });
+    response.addCode(`await page.mouse.up(${optionsArg});`);
+    await tab.page.mouse.up(options);
   },
 });
 
@@ -105,26 +112,31 @@ const mouseClick = defineTabTool({
   schema: {
     name: 'browser_mouse_click_xy',
     title: 'Click',
-    description: 'Click left mouse button at a given position',
+    description: 'Click mouse button at a given position',
     inputSchema: z.object({
       x: z.number().describe('X coordinate'),
       y: z.number().describe('Y coordinate'),
+      button: z.enum(['left', 'right', 'middle']).optional().describe('Button to click, defaults to left'),
+      clickCount: z.number().optional().describe('Number of clicks, defaults to 1'),
     }),
     type: 'input',
   },
 
   handle: async (tab, params, response) => {
     response.setIncludeSnapshot();
 
+    const options = {
+      button: params.button,
+      clickCount: params.clickCount,
+    };
+    const formatted = formatObjectOrVoid(options);
+    const optionsArg = formatted ? `, ${formatted}` : '';
+
     response.addCode(`// Click mouse at coordinates (${params.x}, ${params.y})`);
-    response.addCode(`await page.mouse.move(${params.x}, ${params.y});`);
-    response.addCode(`await page.mouse.down();`);
-    response.addCode(`await page.mouse.up();`);
+    response.addCode(`await page.mouse.click(${params.x}, ${params.y}${optionsArg});`);
 
     await tab.waitForCompletion(async () => {
-      await tab.page.mouse.move(params.x, params.y);
-      await tab.page.mouse.down();
-      await tab.page.mouse.up();
+      await tab.page.mouse.click(params.x, params.y, options);
     });
   },
 });

packages/playwright/src/mcp/browser/tools/snapshot.ts

@@ -15,7 +15,7 @@
  */
 
 import { z } from 'playwright-core/lib/mcpBundle';
-import { formatObject } from 'playwright-core/lib/utils';
+import { formatObject, formatObjectOrVoid } from 'playwright-core/lib/utils';
 
 import { defineTabTool, defineTool } from './tool';
 
@@ -66,13 +66,12 @@ const click = defineTabTool({
       button: params.button,
       modifiers: params.modifiers,
     };
-    const formatted = formatObject(options, ' ', 'oneline');
-    const optionsAttr = formatted !== '{}' ? formatted : '';
+    const optionsArg = formatObjectOrVoid(options);
 
     if (params.doubleClick)
-      response.addCode(`await page.${resolved}.dblclick(${optionsAttr});`);
+      response.addCode(`await page.${resolved}.dblclick(${optionsArg});`);
     else
-      response.addCode(`await page.${resolved}.click(${optionsAttr});`);
+      response.addCode(`await page.${resolved}.click(${optionsArg});`);
 
     await tab.waitForCompletion(async () => {
       if (params.doubleClick)

tests/mcp/click.spec.ts

@@ -99,7 +99,11 @@ test('browser_click (right)', async ({ client, server }) => {
     },
   });
   expect(result).toHaveResponse({
-    code: `await page.getByRole('button', { name: 'Menu' }).click({ button: 'right' });`,
+    code: [
+      `await page.getByRole('button', { name: 'Menu' }).click({`,
+      `  button: 'right'`,
+      `});`
+    ].join('\n'),
     snapshot: expect.stringContaining(`button "Right clicked"`),
   });
 });
@@ -130,7 +134,11 @@ test('browser_click (modifiers)', async ({ client, server, mcpBrowser }) => {
         modifiers: ['Control'],
       },
     })).toHaveResponse({
-      code: `await page.getByRole('button', { name: 'Submit' }).click({ modifiers: ['Control'] });`,
+      code: [
+        `await page.getByRole('button', { name: 'Submit' }).click({`,
+        `  modifiers: ['Control']`,
+        `});`
+      ].join('\n'),
       snapshot: expect.stringContaining(`generic [ref=e3]: ctrlKey:true metaKey:false shiftKey:false altKey:false`),
     });
   }
@@ -143,7 +151,11 @@ test('browser_click (modifiers)', async ({ client, server, mcpBrowser }) => {
       modifiers: ['Shift'],
     },
   })).toHaveResponse({
-    code: `await page.getByRole('button', { name: 'Submit' }).click({ modifiers: ['Shift'] });`,
+    code: [
+      `await page.getByRole('button', { name: 'Submit' }).click({`,
+      `  modifiers: ['Shift']`,
+      `});`
+    ].join('\n'),
     snapshot: expect.stringContaining(`generic [ref=e3]: ctrlKey:false metaKey:false shiftKey:true altKey:false`),
   });
 
@@ -155,7 +167,11 @@ test('browser_click (modifiers)', async ({ client, server, mcpBrowser }) => {
       modifiers: ['Shift', 'Alt'],
     },
   })).toHaveResponse({
-    code: `await page.getByRole('button', { name: 'Submit' }).click({ modifiers: ['Shift', 'Alt'] });`,
+    code: [
+      `await page.getByRole('button', { name: 'Submit' }).click({`,
+      `  modifiers: ['Shift', 'Alt']`,
+      `});`
+    ].join('\n'),
     snapshot: expect.stringContaining(`generic [ref=e3]: ctrlKey:false metaKey:false shiftKey:true altKey:true`),
   });
 });

tests/mcp/mouse.spec.ts

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { test, expect } from './fixtures';
+
+test.use({
+  mcpCaps: ['vision'],
+});
+
+const eventsPage = `<!DOCTYPE html>
+<html>
+  <body style="width: 400px; height: 400px; margin: 0; padding: 0;">
+    <div id='log'></div>
+    <script>
+      const logElement = document.querySelector('#log');
+      const log = (...args) => {
+        const el = document.createElement('div');
+        el.textContent = args.join(' ');
+        logElement.appendChild(el);
+      };
+      document.body.addEventListener('mousemove', (event) => {
+        log('mousemove', event.clientX, event.clientY);
+      });
+      document.body.addEventListener('mousedown', (event) => {
+        log('mousedown', 'button:' + event.button);
+      });
+      document.body.addEventListener('mouseup', (event) => {
+        log('mouseup', 'button:' + event.button);
+      });
+      document.body.addEventListener('click', (event) => {
+        log('click', 'button:' + event.button);
+      });
+      document.body.addEventListener('dblclick', (event) => {
+        log('dblclick', 'button:' + event.button);
+      });
+      document.body.addEventListener('contextmenu', (event) => {
+        event.preventDefault();
+        log('contextmenu', 'button:' + event.button);
+      });
+    </script>
+  </body>
+</html>`;
+
+test.beforeEach(async ({ client, server }) => {
+  server.setContent('/', eventsPage, 'text/html');
+  await client.callTool({
+    name: 'browser_navigate',
+    arguments: { url: server.PREFIX },
+  });
+});
+
+test('browser_mouse_click_xy (default)', async ({ client }) => {
+  expect(await client.callTool({
+    name: 'browser_mouse_click_xy',
+    arguments: { x: 100, y: 100 },
+  })).toHaveResponse({
+    code: expect.stringContaining('await page.mouse.click(100, 100);'),
+    snapshot: expect.stringMatching(/mousemove 100 100.*mousedown button:0.*mouseup button:0.*click button:0/s),
+  });
+});
+
+test('browser_mouse_click_xy (right button)', async ({ client }) => {
+  expect(await client.callTool({
+    name: 'browser_mouse_click_xy',
+    arguments: { x: 100, y: 100, button: 'right' },
+  })).toHaveResponse({
+    code: expect.stringContaining(`await page.mouse.click(100, 100, {\n  button: 'right'\n});`),
+    snapshot: expect.stringMatching(/mousemove 100 100.*mousedown button:2.*contextmenu button:2.*mouseup button:2/s),
+  });
+});
+
+test('browser_mouse_click_xy (middle button)', async ({ client }) => {
+  expect(await client.callTool({
+    name: 'browser_mouse_click_xy',
+    arguments: { x: 100, y: 100, button: 'middle' },
+  })).toHaveResponse({
+    code: expect.stringContaining(`await page.mouse.click(100, 100, {\n  button: 'middle'\n});`),
+    snapshot: expect.stringMatching(/mousemove 100 100.*mousedown button:1.*mouseup button:1/s),
+  });
+});
+
+test('browser_mouse_click_xy (double click)', async ({ client }) => {
+  expect(await client.callTool({
+    name: 'browser_mouse_click_xy',
+    arguments: { x: 100, y: 100, clickCount: 2 },
+  })).toHaveResponse({
+    code: expect.stringContaining(`await page.mouse.click(100, 100, {\n  clickCount: 2\n});`),
+    snapshot: expect.stringMatching(/mousemove 100 100.*mousedown button:0.*mouseup button:0.*dblclick button:0/s),
+  });
+});