feat: Add shiftKey modifier to keyboard events (#514)

Minilfat · dmtrKovalenko · dmtrKovalenko · commit 98625affe0ae · 2023-07-17T19:54:00.000+02:00
* add shiftKey option to some events

* add test cases

* revert unrelated formatting changes

* add shiftKey option for mouseUp event

* one more formatting revert

---------

Co-authored-by: Dmitriy &lt;dmtr.kovalenko@outlook.com&gt;
diff --git a/cypress/e2e/modifiers.cy.ts b/cypress/e2e/modifiers.cy.ts
@@ -0,0 +1,30 @@
+describe("Events behavior with shiftKey modifier applied", () => {
+  beforeEach(() => {
+    cy.visit("./cypress/fixtures/modifiers-test.html");
+  });
+
+  it("detects shift key modifier on click", () => {
+    cy.get("#action-button").realClick({ shiftKey: true });
+    cy.contains("Shift key was pressed");
+  });
+
+  it("detects shift key modifier on hover", () => {
+    cy.get("#mouse-move-div").realHover({ shiftKey: true });
+    cy.contains("Shift key was pressed");
+  });
+
+  it("detects shift key modifier on mousedown", () => {
+    cy.get("#mouse-down-div").realMouseDown({ shiftKey: true });
+    cy.contains("Shift key was pressed");
+  });
+
+  it("detects shift key modifier on mpuseup", () => {
+    cy.get("#mouse-up-div").realMouseUp({ shiftKey: true });
+    cy.contains("Shift key was pressed");
+  });
+
+  it("detects shift key modifier on mousemove", () => {
+    cy.get("#mouse-move-div").realMouseMove(100, 50, { shiftKey: true });
+    cy.contains("Shift key was pressed");
+  });
+});
diff --git a/cypress/fixtures/modifiers-test.html b/cypress/fixtures/modifiers-test.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <body>
+    <button id="action-button">Click on me with shift pressed</button>
+    <hr />
+    <div id="mouse-move-div">Hover/mousemove over me with shift pressed</div>
+    <hr />
+    <div id="mouse-down-div">Initiate mouse down with shift pressed</div>
+    <hr />
+    <div id="mouse-up-div">Initiate mouse up with shift pressed</div>
+    <hr />
+
+    <p id="result"></p>
+  </body>
+  <script>
+    const resultBox = document.getElementById("result");
+
+    function commonHandler(e) {
+      resultBox.innerHTML = "";
+      if (e.shiftKey) resultBox.innerHTML = "Shift key was pressed";
+    }
+
+    document
+      .getElementById("action-button")
+      .addEventListener("click", commonHandler);
+
+    document
+      .getElementById("mouse-move-div")
+      .addEventListener("mousemove", commonHandler);
+
+    document
+      .getElementById("mouse-down-div")
+      .addEventListener("mousedown", commonHandler);
+
+    document
+      .getElementById("mouse-up-div")
+      .addEventListener("mouseup", commonHandler);
+  </script>
+  <style>
+    div {
+      width: 100%;
+      height: 100px;
+      background-color: aqua;
+    }
+  </style>
+</html>
diff --git a/src/commands/mouseDown.ts b/src/commands/mouseDown.ts
@@ -5,6 +5,7 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface realMouseDownOptions {
   /** Pointer type for realMouseDown, if "pen" touch simulated */
@@ -24,6 +25,11 @@ export interface realMouseDownOptions {
    * @default "left"
    */
   button?: keyof typeof mouseButtonNumbers;
+  /**
+   * Indicates whether the shift key was pressed or not when an event occurred
+   * @example cy.realMouseDown({ shiftKey: true });
+   */
+  shiftKey?: boolean;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -51,6 +57,7 @@ export async function realMouseDown(
     buttons: mouseButtonNumbers[options.button ?? "left"],
     pointerType: options.pointer ?? "mouse",
     button: options.button ?? "left",
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
   });
 
   log.snapshot("after").end();
diff --git a/src/commands/mouseMove.ts b/src/commands/mouseMove.ts
@@ -4,6 +4,7 @@ import {
   Position,
   ScrollBehaviorOptions,
 } from "../getCypressElementCoordinates";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface RealMouseMoveOptions {
   /**
@@ -14,9 +15,14 @@ export interface RealMouseMoveOptions {
   position?: Position;
   /**
    * Controls how the page is scrolled to bring the subject into view, if needed.
-   * @example cy.realClick({ scrollBehavior: "top" });
+   * @example cy.realMouseMove({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
+  /**
+   * Indicates whether the shift key was pressed or not when an event occurred
+   * @example cy.realMouseMove({ shiftKey: true });
+   */
+  shiftKey?: boolean;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -46,6 +52,7 @@ export async function realMouseMove(
     type: "mouseMoved",
     x: x * basePosition.frameScale + basePosition.x,
     y: y * basePosition.frameScale + basePosition.y,
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
   });
 
   log.snapshot("after").end();
diff --git a/src/commands/mouseUp.ts b/src/commands/mouseUp.ts
@@ -5,6 +5,7 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface realMouseUpOptions {
   /** Pointer type for realMouseUp, if "pen" touch simulated */
@@ -23,6 +24,11 @@ export interface realMouseUpOptions {
    * @default "left"
    */
   button?: keyof typeof mouseButtonNumbers;
+  /**
+   * Indicates whether the shift key was pressed or not when an event occurred
+   * @example cy.realMouseUp({ shiftKey: true });
+   */
+  shiftKey?: boolean;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -50,6 +56,7 @@ export async function realMouseUp(
     buttons: mouseButtonNumbers[options.button ?? "left"],
     pointerType: options.pointer ?? "mouse",
     button: options.button ?? "left",
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
   });
 
   log.snapshot("after").end();
diff --git a/src/commands/realClick.ts b/src/commands/realClick.ts
@@ -5,6 +5,7 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 import { mouseButtonNumbers } from "../mouseButtonNumbers";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface RealClickOptions {
   /** Pointer type for realClick, if "pen" touch simulated */
@@ -38,6 +39,11 @@ export interface RealClickOptions {
    * @example cy.realClick({ clickCount: 2 });
    */
   clickCount?: number;
+  /**
+   * Indicates whether the shift key was pressed or not when an event occurred
+   * @example cy.realClick({ shiftKey: true });
+   */
+  shiftKey?: boolean;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -78,6 +84,7 @@ export async function realClick(
       buttons: mouseButtonNumbers[options.button ?? "left"],
       pointerType: options.pointer ?? "mouse",
       button: options.button ?? "left",
+      modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
     });
 
     await fireCdpCommand("Input.dispatchMouseEvent", {
@@ -88,6 +95,7 @@ export async function realClick(
       buttons: mouseButtonNumbers[options.button ?? "left"],
       pointerType: options.pointer ?? "mouse",
       button: options.button ?? "left",
+      modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
     });
   }
 
diff --git a/src/commands/realHover.ts b/src/commands/realHover.ts
@@ -4,6 +4,7 @@ import {
   ScrollBehaviorOptions,
   getCypressElementCoordinates,
 } from "../getCypressElementCoordinates";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface RealHoverOptions {
   /**
@@ -20,6 +21,11 @@ export interface RealHoverOptions {
    * @example cy.realHover({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
+  /**
+   * Indicates whether the shift key was pressed or not when an event occurred
+   * @example cy.realHover({ shiftKey: true });
+   */
+  shiftKey?: boolean;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
@@ -44,6 +50,7 @@ export async function realHover(
     type: "mouseMoved",
     button: "none",
     pointerType: options.pointer ?? "mouse",
+    modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
   });
 
   log.snapshot().end();
diff --git a/src/commands/realPress.ts b/src/commands/realPress.ts
@@ -1,5 +1,6 @@
 import { fireCdpCommand } from "../fireCdpCommand";
 import { keyCodeDefinitions } from "../keyCodeDefinitions";
+import { keyToModifierBitMap } from "../keyToModifierBitMap";
 
 export interface RealPressOptions {
   /**
@@ -34,13 +35,6 @@ function getKeyDefinition(key: keyof typeof keyCodeDefinitions) {
   };
 }
 
-const keyToModifierBitMap: Record<string, number> = {
-  Alt: 1,
-  Control: 2,
-  Meta: 4,
-  Shift: 8,
-};
-
 type Key = keyof typeof keyCodeDefinitions;
 // unfortunately passing a string like Shift+P is not possible cause typescript template literals can not handle such giant union
 type KeyOrShortcut = Key | Array<Key>;
diff --git a/src/keyToModifierBitMap.ts b/src/keyToModifierBitMap.ts
@@ -0,0 +1,6 @@
+export const keyToModifierBitMap: Record<string, number> = {
+  Alt: 1,
+  Control: 2,
+  Meta: 4,
+  Shift: 8,
+};
