feat(mouse): set .buttons correctly for basic mouse commands in Chrome (#10698)

Co-authored-by: Andrey Lushnikov <aslushnikov@gmail.com>

packages/playwright-core/src/server/chromium/crInput.ts

@@ -22,7 +22,7 @@ import { macEditingCommands } from '../macEditingCommands';
 import { isString } from '../../utils/utils';
 import { DragManager } from './crDragDrop';
 import { CRPage } from './crPage';
-import { toModifiersMask } from './crProtocolHelper';
+import { toButtonsMask, toModifiersMask } from './crProtocolHelper';
 
 export class RawKeyboardImpl implements input.RawKeyboard {
   constructor(
@@ -101,6 +101,7 @@ export class RawMouseImpl implements input.RawMouse {
       await this._client.send('Input.dispatchMouseEvent', {
         type: 'mouseMoved',
         button,
+        buttons: toButtonsMask(buttons),
         x,
         y,
         modifiers: toModifiersMask(modifiers)
@@ -120,6 +121,7 @@ export class RawMouseImpl implements input.RawMouse {
     await this._client.send('Input.dispatchMouseEvent', {
       type: 'mousePressed',
       button,
+      buttons: toButtonsMask(buttons),
       x,
       y,
       modifiers: toModifiersMask(modifiers),
@@ -135,6 +137,7 @@ export class RawMouseImpl implements input.RawMouse {
     await this._client.send('Input.dispatchMouseEvent', {
       type: 'mouseReleased',
       button,
+      buttons: toButtonsMask(buttons),
       x,
       y,
       modifiers: toModifiersMask(modifiers),

packages/playwright-core/src/server/chromium/crProtocolHelper.ts

@@ -102,3 +102,14 @@ export function toModifiersMask(modifiers: Set<types.KeyboardModifier>): number
     mask |= 8;
   return mask;
 }
+
+export function toButtonsMask(buttons: Set<types.MouseButton>): number {
+  let mask = 0;
+  if (buttons.has('left'))
+    mask |= 1;
+  if (buttons.has('right'))
+    mask |= 2;
+  if (buttons.has('middle'))
+    mask |= 4;
+  return mask;
+}

tests/page/page-mouse.spec.ts

@@ -110,6 +110,40 @@ it('should pointerdown the div with a custom button', async ({ page, server, bro
   expect(event.pointerId).toBe(browserName === 'firefox' ? 0 : 1);
 });
 
+it('should report correct buttons property', async ({ page }) => {
+  await page.evaluate(() => {
+    (window as any).__EVENTS = [];
+    const handler = event => {
+      (window as any).__EVENTS.push({
+        type: event.type,
+        button: event.button,
+        buttons: event.buttons,
+      });
+    };
+    window.addEventListener('mousedown', handler, false);
+    window.addEventListener('mouseup', handler, false);
+  });
+  await page.mouse.move(50, 60);
+  await page.mouse.down({
+    button: 'middle',
+  });
+  await page.mouse.down({
+    button: 'left',
+  });
+  await page.mouse.up({
+    button: 'middle',
+  });
+  await page.mouse.up({
+    button: 'left',
+  });
+  expect(await page.evaluate(() => (window as any).__EVENTS)).toEqual([
+    { type: 'mousedown', button: 1, buttons: 4 },
+    { type: 'mousedown', button: 0, buttons: 5 },
+    { type: 'mouseup', button: 1, buttons: 1 },
+    { type: 'mouseup', button: 0, buttons: 0 },
+  ]);
+});
+
 it('should select the text with mouse', async ({ page, server }) => {
   await page.goto(server.PREFIX + '/input/textarea.html');
   await page.focus('textarea');