chore(commands): laid out groundwork for state tracking

README.md

@@ -275,6 +275,7 @@ Options:
 - `Optional` **pointer**: \"mouse\" \| \"pen\"
 - `Optional` **position**: "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 - `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
+- `Optional` **button**: "left" | "middle" | "right" | "back" | "forward" | "none"
 
 ## cy.realMouseUp
 
@@ -296,6 +297,7 @@ Options:
 - `Optional` **pointer**: \"mouse\" \| \"pen\"
 - `Optional` **position**: "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 - `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
+- `Optional` **button**: "left" | "middle" | "right" | "back" | "forward" | "none"
 
 ## Coordinates
 

cypress/integration/mouse.spec.ts

@@ -36,6 +36,32 @@ describe("cy.realMouseDown and cy.realMouseUp", () => {
         .realMouseDown({ position: "bottomRight" })
         .realMouseUp({ position: "bottomRight" });
     });
+
+    describe("options.button", () => {
+      it("should allow to press down mouse using middle button", (done) => {
+        cy.get(".action-btn")
+          .then(($button) => {
+            $button.get(0).addEventListener("mousedown", (ev) => {
+              if (ev.button === 1) {
+                done();
+              }
+            });
+          })
+          .realMouseDown({ button: "middle" });
+      });
+
+      it("should allow to release mouse using middle button", (done) => {
+        cy.get(".action-btn")
+          .then(($button) => {
+            $button.get(0).addEventListener("mouseup", (ev) => {
+              if (ev.button === 1) {
+                done();
+              }
+            });
+          })
+          .realMouseUp({ button: "middle" });
+      });
+    });
 
     describe("realMouseDown scroll behavior", () => {
       function getScreenEdges() {

cypress/integration/type.spec.ts

@@ -4,9 +4,9 @@ describe("cy.realType", () => {
     cy.get("input[name=q]").focus()
   });
 
-  it("types text into googles main search inptu", () => {
+  it("types text into an input", () => {
     cy.realType("cypress can produce real events");
-    
+
     cy.get("input[name=q]").should(
       "have.value",
       "cypress can produce real events"

src/_internalState.ts

@@ -0,0 +1,36 @@
+import {mouseButtonNumbers} from './mouseButtonNumbers'
+
+const mouseButtons = new Set<keyof typeof mouseButtonNumbers>()
+
+function getButtonsMask(): number {
+  let mask = 0;
+  if (mouseButtons.has('left')) {
+    mask |= 1;
+  }
+  if (mouseButtons.has('right')) {
+    mask |= 2;
+  }
+  if (mouseButtons.has('middle')) {
+    mask |= 4;
+  }
+  if (mouseButtons.has('back')) {
+    mask |= 8;
+  }
+  if (mouseButtons.has('forward')) {
+    mask |= 16;
+  }
+  return mask;
+}
+
+export const InternalState = {
+    clear() {
+        mouseButtons.clear()
+    },
+    mouseButtonDown(button: keyof typeof mouseButtonNumbers) {
+        mouseButtons.add(button)
+    },
+    mouseButtonUp(button: keyof typeof mouseButtonNumbers) {
+        mouseButtons.delete(button)
+    },
+    getButtonsMask,
+}

src/commands/realClick.ts

@@ -1,15 +1,18 @@
-import { fireCdpCommand } from "../fireCdpCommand";
 import {
   getCypressElementCoordinates,
   ScrollBehaviorOptions,
   Position,
 } from "../getCypressElementCoordinates";
+import { rawMouseDown } from './realMouseDown'
+import { rawMouseUp } from './realMouseUp'
+import { rawMouseMove } from './realHover'
+import { mouseButtonNumbers } from "../mouseButtonNumbers";
 
 export interface RealClickOptions {
   /** Pointer type for realClick, if "pen" touch simulated */
   pointer?: "mouse" | "pen";
   /** The button on mouse that clicked. Simulates real browser behavior. */
-  button?: "none" | "left" | "right" | "middle" | "back" | "forward";
+  button?: keyof typeof mouseButtonNumbers;
   /**
    * Position of the click event relative to the element
    * @example cy.realClick({ position: "topLeft" })
@@ -65,25 +68,30 @@ export async function realClick(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mousePressed",
-    x,
-    y,
-    clickCount: options.clickCount ?? 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
 
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mouseReleased",
+  await rawMouseMove({
+    ...options,
     x,
-    y,
-    clickCount: options.clickCount ?? 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: options.button ?? "left",
-  });
+    y
+  })
+
+  const { clickCount = 1 } = options
+
+  for (let currentClick = 1; currentClick <= clickCount; currentClick++) {
+    await rawMouseDown({
+      ...options,
+      x,
+      y,
+      clickCount: currentClick
+    })
+
+    await rawMouseUp({
+      ...options,
+      x,
+      y,
+      clickCount: currentClick
+    })
+  }
 
   log.snapshot("after").end();
 

src/commands/realHover.ts

@@ -4,13 +4,14 @@ import {
   ScrollBehaviorOptions,
   getCypressElementCoordinates,
 } from "../getCypressElementCoordinates";
+import { InternalState } from "../_internalState";
 
 export interface RealHoverOptions {
   /**
    * If set to `pen`, simulates touch based hover (via long press)
    */
   pointer?: "mouse" | "pen";
-  /** 
+  /**
    * Position relative to the element where to hover the element.
    * @example cy.realHover({ position: "topLeft" })
    */
@@ -22,6 +23,25 @@ export interface RealHoverOptions {
   scrollBehavior?: ScrollBehaviorOptions;
 }
 
+export async function rawMouseMove({
+  x,
+  y,
+  pointer = "mouse",
+}: {
+  x: number,
+  y: number,
+  pointer?: "mouse" | "pen",
+}) {
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mouseMoved",
+    pointerType: pointer,
+    button: "none",
+    buttons: InternalState.getButtonsMask(),
+    x,
+    y,
+  });
+}
+
 /** @ignore this, update documentation for this function at index.d.ts */
 export async function realHover(
   subject: JQuery,
@@ -38,13 +58,11 @@ export async function realHover(
     }),
   });
 
-  await fireCdpCommand("Input.dispatchMouseEvent", {
+  await rawMouseMove({
+    ...options,
     x,
     y,
-    type: "mouseMoved",
-    button: "none",
-    pointerType: options.pointer ?? "mouse",
-  });
+  })
 
   log.snapshot().end();
 

src/commands/mouseDown.ts → src/commands/realMouseDown.ts

@@ -4,6 +4,8 @@ import {
   ScrollBehaviorOptions,
   Position,
 } from "../getCypressElementCoordinates";
+import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { InternalState } from "../_internalState";
 
 export interface realMouseDownOptions {
   /** Pointer type for realMouseDown, if "pen" touch simulated */
@@ -18,6 +20,37 @@ export interface realMouseDownOptions {
    * @example cy.realMouseDown({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
+
+  /**
+   * @default "left"
+   */
+  button?: keyof typeof mouseButtonNumbers;
+}
+
+export async function rawMouseDown({
+  x,
+  y,
+  button = "left",
+  pointer = "mouse",
+  clickCount = 1,
+}: {
+  x: number,
+  y: number,
+  button?: keyof typeof mouseButtonNumbers,
+  pointer?: "mouse" | "pen",
+  clickCount?: number
+}) {
+  InternalState.mouseButtonUp(button)
+
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mousePressed",
+    clickCount,
+    buttons: InternalState.getButtonsMask(),
+    pointerType: pointer,
+    button,
+    x,
+    y,
+  });
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -37,15 +70,12 @@ export async function realMouseDown(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mousePressed",
+
+  await rawMouseDown({
+    ...options,
     x,
-    y,
-    clickCount: 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: "left",
-  });
+    y
+  })
 
   log.snapshot("after").end();
 

src/commands/mouseUp.ts → src/commands/realMouseUp.ts

@@ -4,6 +4,8 @@ import {
   ScrollBehaviorOptions,
   Position,
 } from "../getCypressElementCoordinates";
+import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { InternalState } from "../_internalState";
 
 export interface realMouseUpOptions {
   /** Pointer type for realMouseUp, if "pen" touch simulated */
@@ -18,6 +20,35 @@ export interface realMouseUpOptions {
    * @example cy.realMouseUp({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
+  /**
+   * @default "left"
+   */
+  button?: keyof typeof mouseButtonNumbers;
+}
+
+export async function rawMouseUp({
+  x,
+  y,
+  button = "left",
+  pointer = "mouse",
+  clickCount = 1,
+}: {
+  x: number,
+  y: number,
+  button?: keyof typeof mouseButtonNumbers,
+  pointer?: "mouse" | "pen",
+  clickCount?: number
+}) {
+  InternalState.mouseButtonUp(button)
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mouseReleased",
+    clickCount,
+    buttons: InternalState.getButtonsMask(),
+    pointerType: pointer,
+    button,
+    x,
+    y
+  });
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -37,15 +68,12 @@ export async function realMouseUp(
   });
 
   log.snapshot("before");
-  await fireCdpCommand("Input.dispatchMouseEvent", {
-    type: "mouseReleased",
+
+  await rawMouseUp({
+    ...options,
     x,
-    y,
-    clickCount: 1,
-    buttons: 1,
-    pointerType: options.pointer ?? "mouse",
-    button: "left",
-  });
+    y
+  })
 
   log.snapshot("after").end();