From dcfa244287ffdda59b108b39de4c165f0232e7a6 Mon Sep 17 00:00:00 2001
From: arjunpatel17 <37914906+arjunpatel17@users.noreply.github.com>
Date: Sun, 18 Apr 2021 20:35:59 -0400
Subject: [PATCH 1/6] add realActive() command

---
 README.md                          |  23 ++++
 cypress/fixtures/frame-two.html    |   1 +
 cypress/integration/active.spec.ts | 169 +++++++++++++++++++++++++++++
 src/commands/realActive.ts         |  53 +++++++++
 src/index.d.ts                     |  10 ++
 src/support.ts                     |   2 +
 6 files changed, 258 insertions(+)
 create mode 100644 cypress/integration/active.spec.ts
 create mode 100644 src/commands/realActive.ts

diff --git a/README.md b/README.md
index 08ee03f..a9d848b 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,7 @@ Here is a simple test that can be written with native events:
 
 ```js
 it("tests real events", () => {
+  cy.get("input").realActive(); // perform a native mouse press on the field
   cy.get("input").realClick(); // perform a native real click on the field
   cy.realType("cypress real event"); // fires native system keypress events and fills the field
   cy.realPress("Tab"); // native tab click switches the focus
@@ -74,6 +75,7 @@ If you are using typescript, also add the following to `cypress/tsconfig.json`
 The idea of the commands – they should be as similar as possible to cypress default commands (like `cy.type`), but starts with `real` – `cy.realType`.
 
 Here is an overview of the available **real** event commands:
+- [cy.realActive](#cyrealactive)
 - [cy.realClick](#cyrealclick)
 - [cy.realHover](#cyrealhover)
 - [cy.realPress](#cyrealpress)
@@ -81,6 +83,27 @@ Here is an overview of the available **real** event commands:
 - [cy.realType](#cyrealtype)
 - [cy.realSwipe](#cyrealswipe)
 
+## cy.realActive
+
+Fires native system mouse press event.
+
+```jsx
+cy.get("button").realActive();
+cy.get("button").realActive(options);
+```
+
+Example:
+
+```js
+cy.get("button").realActive({ position: "topLeft" }) // click on the top left corner of button
+```
+
+Options:
+
+- `Optional` **pointer**: \"mouse\" \| \"pen\"
+- `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
+
 ## cy.realClick
 
 Fires native system click event.
diff --git a/cypress/fixtures/frame-two.html b/cypress/fixtures/frame-two.html
index ec56d21..49eb036 100644
--- a/cypress/fixtures/frame-two.html
+++ b/cypress/fixtures/frame-two.html
@@ -13,6 +13,7 @@
   <style>
     #target { width: 100px; height: 100px; background: green; }
     #target:hover { background: pink; }
+    #target:active { background: blue; }
 
     * { box-sizing: border-box; }
     html, body { height: 100%; }
diff --git a/cypress/integration/active.spec.ts b/cypress/integration/active.spec.ts
new file mode 100644
index 0000000..14ce6fa
--- /dev/null
+++ b/cypress/integration/active.spec.ts
@@ -0,0 +1,169 @@
+describe("cy.realActive", () => {
+    beforeEach(() => {
+      cy.visit("https://example.cypress.io/commands/actions");
+    });
+  
+    it("active state on the button", () => {
+      cy.get(".action-btn").should("have.css", "background-color", "rgb(217, 83, 79)");
+      cy.get(".action-btn").realActive();
+      cy.get(".action-btn").should("have.css", "background-color", "rgb(172, 41, 37)");
+    });
+  
+    it("active/focused state on the text field", () => {
+      cy.get("#email1").realActive().should("be.focused");
+    });
+  
+    it("active state on different positions", () => {
+      cy.get(".action-btn")
+        .realActive({ position: "topLeft" })
+        .realActive({ position: "top" })
+        .realActive({ position: "topRight" })
+        .realActive({ position: "left" })
+        .realActive({ position: "center" })
+        .realActive({ position: "right" })
+        .realActive({ position: "bottomLeft" })
+        .realActive({ position: "bottom" })
+        .realActive({ position: "bottomRight" });
+    });
+  
+    describe("scroll behavior", () => {
+      function getScreenEdges() {
+        const cypressAppWindow = window.parent.document.querySelector("iframe")
+          .contentWindow;
+        const windowTopEdge = cypressAppWindow.document.documentElement.scrollTop;
+        const windowBottomEdge = windowTopEdge + cypressAppWindow.innerHeight;
+        const windowCenter = windowTopEdge + cypressAppWindow.innerHeight / 2;
+  
+        return {
+          top: windowTopEdge,
+          bottom: windowBottomEdge,
+          center: windowCenter,
+        };
+      }
+  
+      function getElementEdges($el: JQuery) {
+        const $elTop = $el.offset().top;
+  
+        return {
+          top: $elTop,
+          bottom: $elTop + $el.outerHeight(),
+        };
+      }
+  
+      beforeEach(() => {
+        cy.window().scrollTo("top");
+      });
+  
+      it("defaults to scrolling the element to the top of the viewport", () => {
+        cy.get("#action-canvas")
+          .realActive()
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+      });
+  
+      it("scrolls the element to center of viewport", () => {
+        cy.get("#action-canvas")
+          .realActive({ scrollBehavior: "center" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
+            const { top: screenTop, bottom: screenBottom } = getScreenEdges();
+  
+            const screenCenter = screenTop + (screenBottom - screenTop) / 2;
+  
+            expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
+            expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
+          });
+      });
+  
+      it("scrolls the element to the top of the viewport", () => {
+        cy.get("#action-canvas")
+          .realActive({ scrollBehavior: "top" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+      });
+  
+      it("scrolls the element to the bottom of the viewport", () => {
+        cy.get("#action-canvas")
+          .realActive({ scrollBehavior: "bottom" })
+          .then(($canvas: JQuery) => {
+            const { bottom: $elBottom } = getElementEdges($canvas);
+            const { bottom: screenBottom } = getScreenEdges();
+  
+            expect($elBottom).to.equal(screenBottom);
+          });
+      });
+  
+      it("scrolls the element to the nearest edge of the viewport", () => {
+        cy.window().scrollTo("bottom");
+  
+        cy.get("#action-canvas")
+          .realActive({ scrollBehavior: "nearest" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+  
+        cy.window().scrollTo("top");
+  
+        cy.get("#action-canvas")
+          .realActive({ scrollBehavior: "nearest" })
+          .then(($canvas: JQuery) => {
+            const { bottom: $elBottom } = getElementEdges($canvas);
+            const { bottom: screenBottom } = getScreenEdges();
+  
+            expect($elBottom).to.equal(screenBottom);
+          });
+      });
+    });
+});
+
+describe('iframe behavior', () => {
+    beforeEach(() => {
+      cy.visit('./cypress/fixtures/iframe-page.html');
+    });
+  
+    it('sets elements inside iframes to active state', () => {
+      cy.get('iframe').then(($firstIframe) => {
+        return cy.wrap($firstIframe.contents().find('iframe'));
+      }).then(($secondIframe) => {
+        return cy.wrap($secondIframe.contents().find('body'));
+      }).within(() => {
+        cy.get('#target').then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
+        });
+  
+        cy.get('#target').realActive().then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
+        });
+      });
+    });
+  
+    it('sets elements inside transformed iframes to active states', () => {
+      cy.get('iframe').then(($firstIframe) => {
+        $firstIframe.css('transform', 'scale(.5)');
+        return cy.wrap($firstIframe.contents().find('iframe'));
+      }).then(($secondIframe) => {
+        $secondIframe.css('transform', 'scale(.75)');
+        return cy.wrap($secondIframe.contents().find('body'));
+      }).within(() => {
+        cy.get('#target').then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
+        });
+  
+        cy.get('#target').realActive().then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
+        });
+      });
+    });
+});
+  
\ No newline at end of file
diff --git a/src/commands/realActive.ts b/src/commands/realActive.ts
new file mode 100644
index 0000000..a5fa84c
--- /dev/null
+++ b/src/commands/realActive.ts
@@ -0,0 +1,53 @@
+import { fireCdpCommand } from "../fireCdpCommand";
+import {
+  getCypressElementCoordinates,
+  ScrollBehaviorOptions,
+  Position,
+} from "../getCypressElementCoordinates";
+
+export interface RealActiveOptions {
+  /** Pointer type for realClick, if "pen" touch simulated */
+  pointer?: "mouse" | "pen";
+  /**
+   * Position of the click event relative to the element
+   * @example cy.realClick({ position: "topLeft" })
+   */
+  position?: Position;
+  /**
+   * Controls how the page is scrolled to bring the subject into view, if needed.
+   * @example cy.realHover({ scrollBehavior: "top" });
+   */
+  scrollBehavior?: ScrollBehaviorOptions;
+}
+
+/** @ignore this, update documentation for this function at index.d.ts */
+export async function realActive(
+  subject: JQuery,
+  options: RealActiveOptions = {}
+) {
+  const { x, y } = getCypressElementCoordinates(subject, options.position, options.scrollBehavior);
+
+  const log = Cypress.log({
+    $el: subject,
+    name: "realActive",
+    consoleProps: () => ({
+      "Applied To": subject.get(0),
+      "Absolute Coordinates": { x, y },
+    }),
+  });
+
+  log.snapshot("before");
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mousePressed",
+    x,
+    y,
+    clickCount: 1,
+    buttons: 1,
+    pointerType: options.pointer ?? "mouse",
+    button: "left",
+  });
+
+  log.snapshot("after").end();
+
+  return subject;
+}
diff --git a/src/index.d.ts b/src/index.d.ts
index 4abbf03..b8ff48b 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -8,6 +8,16 @@ type NormalizeCypressCommand<TFun> = TFun extends (
 
 declare namespace Cypress {
   interface Chainable {
+    /**
+     * Fires native system mousePressed event.
+     * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealactive
+     * @example
+     * cy.get("button").realActive()
+     * @param options mousePressed options
+     */
+    realActive: NormalizeCypressCommand<
+      typeof import("./commands/realActive").realActive
+    >;
     /**
      * Fires native system click event.
      * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealclick
diff --git a/src/support.ts b/src/support.ts
index 4597ed3..2615300 100644
--- a/src/support.ts
+++ b/src/support.ts
@@ -1,3 +1,4 @@
+import { realActive } from "./commands/realActive";
 import { realClick } from "./commands/realClick";
 import { realHover } from "./commands/realHover";
 import { realSwipe } from "./commands/realSwipe";
@@ -5,6 +6,7 @@ import { realPress } from "./commands/realPress";
 import { realType } from "./commands/realType";
 import { realTouch } from './commands/realTouch';
 
+Cypress.Commands.add("realActive", { prevSubject: true }, realActive);
 Cypress.Commands.add("realClick", { prevSubject: true }, realClick);
 Cypress.Commands.add("realHover", { prevSubject: true }, realHover);
 Cypress.Commands.add("realTouch", { prevSubject: true }, realTouch);

From e2f35b76d8e3e222c003be89b4f4f89d6a63ad1b Mon Sep 17 00:00:00 2001
From: arjunpatel17 <37914906+arjunpatel17@users.noreply.github.com>
Date: Mon, 19 Apr 2021 17:03:42 -0400
Subject: [PATCH 2/6] rename realActive to mouseDown

---
 README.md                                     | 46 +++++++++----------
 .../{active.spec.ts => mouse.spec.ts}         | 40 ++++++++--------
 src/commands/{realActive.ts => mouseDown.ts}  | 16 +++----
 src/index.d.ts                                |  8 ++--
 src/support.ts                                |  4 +-
 5 files changed, 57 insertions(+), 57 deletions(-)
 rename cypress/integration/{active.spec.ts => mouse.spec.ts} (84%)
 rename src/commands/{realActive.ts => mouseDown.ts} (74%)

diff --git a/README.md b/README.md
index a9d848b..b64c9b3 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Here is a simple test that can be written with native events:
 
 ```js
 it("tests real events", () => {
-  cy.get("input").realActive(); // perform a native mouse press on the field
+  cy.get("input").mouseDown(); // perform a native mouse press on the field
   cy.get("input").realClick(); // perform a native real click on the field
   cy.realType("cypress real event"); // fires native system keypress events and fills the field
   cy.realPress("Tab"); // native tab click switches the focus
@@ -75,34 +75,13 @@ If you are using typescript, also add the following to `cypress/tsconfig.json`
 The idea of the commands – they should be as similar as possible to cypress default commands (like `cy.type`), but starts with `real` – `cy.realType`.
 
 Here is an overview of the available **real** event commands:
-- [cy.realActive](#cyrealactive)
 - [cy.realClick](#cyrealclick)
 - [cy.realHover](#cyrealhover)
 - [cy.realPress](#cyrealpress)
 - [cy.realTouch](#cyrealtouch)
 - [cy.realType](#cyrealtype)
 - [cy.realSwipe](#cyrealswipe)
-
-## cy.realActive
-
-Fires native system mouse press event.
-
-```jsx
-cy.get("button").realActive();
-cy.get("button").realActive(options);
-```
-
-Example:
-
-```js
-cy.get("button").realActive({ position: "topLeft" }) // click on the top left corner of button
-```
-
-Options:
-
-- `Optional` **pointer**: \"mouse\" \| \"pen\"
-- `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
-- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
+- [cy.mouseDown](#cymouseDown)
 
 ## cy.realClick
 
@@ -240,6 +219,27 @@ cy.get('.element').realSwipe("toLeft");  // swipes from right to left
 cy.get('.element').realSwipe("toRight"); // inverted
 ```
 
+## cy.mouseDown
+
+Fires native system mouse down event.
+
+```jsx
+cy.get("button").mouseDown();
+cy.get("button").mouseDown(options);
+```
+
+Example:
+
+```js
+cy.get("button").mouseDown({ position: "topLeft" }) // click on the top left corner of button
+```
+
+Options:
+
+- `Optional` **pointer**: \"mouse\" \| \"pen\"
+- `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
+
 #### Usage:
 
 ```js
diff --git a/cypress/integration/active.spec.ts b/cypress/integration/mouse.spec.ts
similarity index 84%
rename from cypress/integration/active.spec.ts
rename to cypress/integration/mouse.spec.ts
index 14ce6fa..bb46a46 100644
--- a/cypress/integration/active.spec.ts
+++ b/cypress/integration/mouse.spec.ts
@@ -1,29 +1,29 @@
-describe("cy.realActive", () => {
+describe("cy.mouseDown", () => {
     beforeEach(() => {
       cy.visit("https://example.cypress.io/commands/actions");
     });
   
     it("active state on the button", () => {
       cy.get(".action-btn").should("have.css", "background-color", "rgb(217, 83, 79)");
-      cy.get(".action-btn").realActive();
+      cy.get(".action-btn").mouseDown();
       cy.get(".action-btn").should("have.css", "background-color", "rgb(172, 41, 37)");
     });
   
     it("active/focused state on the text field", () => {
-      cy.get("#email1").realActive().should("be.focused");
+      cy.get("#email1").mouseDown().should("be.focused");
     });
   
     it("active state on different positions", () => {
       cy.get(".action-btn")
-        .realActive({ position: "topLeft" })
-        .realActive({ position: "top" })
-        .realActive({ position: "topRight" })
-        .realActive({ position: "left" })
-        .realActive({ position: "center" })
-        .realActive({ position: "right" })
-        .realActive({ position: "bottomLeft" })
-        .realActive({ position: "bottom" })
-        .realActive({ position: "bottomRight" });
+        .mouseDown({ position: "topLeft" })
+        .mouseDown({ position: "top" })
+        .mouseDown({ position: "topRight" })
+        .mouseDown({ position: "left" })
+        .mouseDown({ position: "center" })
+        .mouseDown({ position: "right" })
+        .mouseDown({ position: "bottomLeft" })
+        .mouseDown({ position: "bottom" })
+        .mouseDown({ position: "bottomRight" });
     });
   
     describe("scroll behavior", () => {
@@ -56,7 +56,7 @@ describe("cy.realActive", () => {
   
       it("defaults to scrolling the element to the top of the viewport", () => {
         cy.get("#action-canvas")
-          .realActive()
+          .mouseDown()
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -67,7 +67,7 @@ describe("cy.realActive", () => {
   
       it("scrolls the element to center of viewport", () => {
         cy.get("#action-canvas")
-          .realActive({ scrollBehavior: "center" })
+          .mouseDown({ scrollBehavior: "center" })
           .then(($canvas: JQuery) => {
             const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
             const { top: screenTop, bottom: screenBottom } = getScreenEdges();
@@ -81,7 +81,7 @@ describe("cy.realActive", () => {
   
       it("scrolls the element to the top of the viewport", () => {
         cy.get("#action-canvas")
-          .realActive({ scrollBehavior: "top" })
+          .mouseDown({ scrollBehavior: "top" })
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -92,7 +92,7 @@ describe("cy.realActive", () => {
   
       it("scrolls the element to the bottom of the viewport", () => {
         cy.get("#action-canvas")
-          .realActive({ scrollBehavior: "bottom" })
+          .mouseDown({ scrollBehavior: "bottom" })
           .then(($canvas: JQuery) => {
             const { bottom: $elBottom } = getElementEdges($canvas);
             const { bottom: screenBottom } = getScreenEdges();
@@ -105,7 +105,7 @@ describe("cy.realActive", () => {
         cy.window().scrollTo("bottom");
   
         cy.get("#action-canvas")
-          .realActive({ scrollBehavior: "nearest" })
+          .mouseDown({ scrollBehavior: "nearest" })
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -116,7 +116,7 @@ describe("cy.realActive", () => {
         cy.window().scrollTo("top");
   
         cy.get("#action-canvas")
-          .realActive({ scrollBehavior: "nearest" })
+          .mouseDown({ scrollBehavior: "nearest" })
           .then(($canvas: JQuery) => {
             const { bottom: $elBottom } = getElementEdges($canvas);
             const { bottom: screenBottom } = getScreenEdges();
@@ -142,7 +142,7 @@ describe('iframe behavior', () => {
           expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
         });
   
-        cy.get('#target').realActive().then(($target) => {
+        cy.get('#target').mouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
       });
@@ -160,7 +160,7 @@ describe('iframe behavior', () => {
           expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
         });
   
-        cy.get('#target').realActive().then(($target) => {
+        cy.get('#target').mouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
       });
diff --git a/src/commands/realActive.ts b/src/commands/mouseDown.ts
similarity index 74%
rename from src/commands/realActive.ts
rename to src/commands/mouseDown.ts
index a5fa84c..916b692 100644
--- a/src/commands/realActive.ts
+++ b/src/commands/mouseDown.ts
@@ -5,31 +5,31 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 
-export interface RealActiveOptions {
-  /** Pointer type for realClick, if "pen" touch simulated */
+export interface MouseDownOptions {
+  /** Pointer type for mouseDown, if "pen" touch simulated */
   pointer?: "mouse" | "pen";
   /**
-   * Position of the click event relative to the element
-   * @example cy.realClick({ position: "topLeft" })
+   * Position of the mousedown event relative to the element
+   * @example cy.mouseDown({ position: "topLeft" })
    */
   position?: Position;
   /**
    * Controls how the page is scrolled to bring the subject into view, if needed.
-   * @example cy.realHover({ scrollBehavior: "top" });
+   * @example cy.mouseDown({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
-export async function realActive(
+export async function mouseDown(
   subject: JQuery,
-  options: RealActiveOptions = {}
+  options: MouseDownOptions = {}
 ) {
   const { x, y } = getCypressElementCoordinates(subject, options.position, options.scrollBehavior);
 
   const log = Cypress.log({
     $el: subject,
-    name: "realActive",
+    name: "mouseDown",
     consoleProps: () => ({
       "Applied To": subject.get(0),
       "Absolute Coordinates": { x, y },
diff --git a/src/index.d.ts b/src/index.d.ts
index b8ff48b..7fae363 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -10,13 +10,13 @@ declare namespace Cypress {
   interface Chainable {
     /**
      * Fires native system mousePressed event.
-     * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealactive
+     * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseDown
      * @example
-     * cy.get("button").realActive()
+     * cy.get("button").mouseDown()
      * @param options mousePressed options
      */
-    realActive: NormalizeCypressCommand<
-      typeof import("./commands/realActive").realActive
+    mouseDown: NormalizeCypressCommand<
+      typeof import("./commands/mouseDown").mouseDown
     >;
     /**
      * Fires native system click event.
diff --git a/src/support.ts b/src/support.ts
index 2615300..0afd392 100644
--- a/src/support.ts
+++ b/src/support.ts
@@ -1,4 +1,4 @@
-import { realActive } from "./commands/realActive";
+import { mouseDown } from "./commands/mouseDown";
 import { realClick } from "./commands/realClick";
 import { realHover } from "./commands/realHover";
 import { realSwipe } from "./commands/realSwipe";
@@ -6,7 +6,7 @@ import { realPress } from "./commands/realPress";
 import { realType } from "./commands/realType";
 import { realTouch } from './commands/realTouch';
 
-Cypress.Commands.add("realActive", { prevSubject: true }, realActive);
+Cypress.Commands.add("mouseDown", { prevSubject: true }, mouseDown);
 Cypress.Commands.add("realClick", { prevSubject: true }, realClick);
 Cypress.Commands.add("realHover", { prevSubject: true }, realHover);
 Cypress.Commands.add("realTouch", { prevSubject: true }, realTouch);

From 0b8d0ee1838a0d4364310d8c3bf88da5817d21d3 Mon Sep 17 00:00:00 2001
From: arjunpatel17 <37914906+arjunpatel17@users.noreply.github.com>
Date: Mon, 19 Apr 2021 18:42:37 -0400
Subject: [PATCH 3/6] mouseUp event

---
 README.md                         |  50 +++++++++---
 cypress/integration/mouse.spec.ts | 129 +++++++++++++++++++++++++++++-
 src/commands/mouseUp.ts           |  53 ++++++++++++
 src/index.d.ts                    |  38 +++++----
 src/support.ts                    |   6 +-
 5 files changed, 243 insertions(+), 33 deletions(-)
 create mode 100644 src/commands/mouseUp.ts

diff --git a/README.md b/README.md
index b64c9b3..56299ff 100644
--- a/README.md
+++ b/README.md
@@ -82,6 +82,7 @@ Here is an overview of the available **real** event commands:
 - [cy.realType](#cyrealtype)
 - [cy.realSwipe](#cyrealswipe)
 - [cy.mouseDown](#cymouseDown)
+- [cy.mouseUp](#cymouseUp)
 
 ## cy.realClick
 
@@ -219,6 +220,29 @@ cy.get('.element').realSwipe("toLeft");  // swipes from right to left
 cy.get('.element').realSwipe("toRight"); // inverted
 ```
 
+
+#### Usage:
+
+```js
+cy.realSwipe(direction);
+cy.realSwipe(direction, options);
+```
+
+
+#### Parameters:
+
+| Name      | Type    | Default value | Description                                                                                                                           |
+| --------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
+| `direction`    | `"toLeft" | "toTop" | "toRight" | "toBottom";`  | -             | text to type. Should be around the same as cypress's type command argument (https://docs.cypress.io/api/commands/type.html#Arguments) |
+| `options` | Options | {}            |                                                                                                                                       |
+
+Options:
+
+- `Optional` **length**: undefined \| number **`default`** 10
+- `Optional` x coordinate to touch **x**: number
+- `Optional` y coordinate to touch **y**: number
+- `Optional` **touchPosition**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+
 ## cy.mouseDown
 
 Fires native system mouse down event.
@@ -240,26 +264,26 @@ Options:
 - `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 - `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
 
-#### Usage:
+## cy.mouseUp
 
-```js
-cy.realSwipe(direction);
-cy.realSwipe(direction, options);
+Fires native system mouse down event.
+
+```jsx
+cy.get("button").mouseUp();
+cy.get("button").mouseUp(options);
 ```
 
-#### Parameters:
+Example:
 
-| Name      | Type    | Default value | Description                                                                                                                           |
-| --------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `direction`    | `"toLeft" | "toTop" | "toRight" | "toBottom";`  | -             | text to type. Should be around the same as cypress's type command argument (https://docs.cypress.io/api/commands/type.html#Arguments) |
-| `options` | Options | {}            |                                                                                                                                       |
+```js
+cy.get("button").mouseUp({ position: "topLeft" }) // click on the top left corner of button
+```
 
 Options:
 
-- `Optional` **length**: undefined \| number **`default`** 10
-- `Optional` x coordinate to touch **x**: number
-- `Optional` y coordinate to touch **y**: number
-- `Optional` **touchPosition**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+- `Optional` **pointer**: \"mouse\" \| \"pen\"
+- `Optional` **position**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
+- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
 
 ## UX
 
diff --git a/cypress/integration/mouse.spec.ts b/cypress/integration/mouse.spec.ts
index bb46a46..4f27aad 100644
--- a/cypress/integration/mouse.spec.ts
+++ b/cypress/integration/mouse.spec.ts
@@ -1,4 +1,4 @@
-describe("cy.mouseDown", () => {
+describe("cy.mouseDown and cy.mouseUp", () => {
     beforeEach(() => {
       cy.visit("https://example.cypress.io/commands/actions");
     });
@@ -7,6 +7,8 @@ describe("cy.mouseDown", () => {
       cy.get(".action-btn").should("have.css", "background-color", "rgb(217, 83, 79)");
       cy.get(".action-btn").mouseDown();
       cy.get(".action-btn").should("have.css", "background-color", "rgb(172, 41, 37)");
+      cy.get(".action-btn").mouseUp(); // will go in hover state
+      cy.get(".action-btn").should("have.css", "background-color", "rgb(201, 48, 44)");
     });
   
     it("active/focused state on the text field", () => {
@@ -16,17 +18,26 @@ describe("cy.mouseDown", () => {
     it("active state on different positions", () => {
       cy.get(".action-btn")
         .mouseDown({ position: "topLeft" })
+        .mouseUp({ position: "topLeft" })
         .mouseDown({ position: "top" })
+        .mouseUp({ position: "top" })
         .mouseDown({ position: "topRight" })
+        .mouseUp({ position: "topRight" })
         .mouseDown({ position: "left" })
+        .mouseUp({ position: "left" })
         .mouseDown({ position: "center" })
+        .mouseUp({ position: "center" })
         .mouseDown({ position: "right" })
+        .mouseUp({ position: "right" })
         .mouseDown({ position: "bottomLeft" })
+        .mouseUp({ position: "bottomLeft" })
         .mouseDown({ position: "bottom" })
-        .mouseDown({ position: "bottomRight" });
+        .mouseUp({ position: "bottom" })
+        .mouseDown({ position: "bottomRight" })
+        .mouseUp({ position: "bottomRight" });
     });
   
-    describe("scroll behavior", () => {
+    describe("mouseDown scroll behavior", () => {
       function getScreenEdges() {
         const cypressAppWindow = window.parent.document.querySelector("iframe")
           .contentWindow;
@@ -125,9 +136,109 @@ describe("cy.mouseDown", () => {
           });
       });
     });
+
+    describe("mouseUp scroll behavior", () => {
+      function getScreenEdges() {
+        const cypressAppWindow = window.parent.document.querySelector("iframe")
+          .contentWindow;
+        const windowTopEdge = cypressAppWindow.document.documentElement.scrollTop;
+        const windowBottomEdge = windowTopEdge + cypressAppWindow.innerHeight;
+        const windowCenter = windowTopEdge + cypressAppWindow.innerHeight / 2;
+  
+        return {
+          top: windowTopEdge,
+          bottom: windowBottomEdge,
+          center: windowCenter,
+        };
+      }
+  
+      function getElementEdges($el: JQuery) {
+        const $elTop = $el.offset().top;
+  
+        return {
+          top: $elTop,
+          bottom: $elTop + $el.outerHeight(),
+        };
+      }
+  
+      beforeEach(() => {
+        cy.window().scrollTo("top");
+      });
+  
+      it("defaults to scrolling the element to the top of the viewport", () => {
+        cy.get("#action-canvas")
+          .mouseUp()
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+      });
+  
+      it("scrolls the element to center of viewport", () => {
+        cy.get("#action-canvas")
+          .mouseUp({ scrollBehavior: "center" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
+            const { top: screenTop, bottom: screenBottom } = getScreenEdges();
+  
+            const screenCenter = screenTop + (screenBottom - screenTop) / 2;
+  
+            expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
+            expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
+          });
+      });
+  
+      it("scrolls the element to the top of the viewport", () => {
+        cy.get("#action-canvas")
+          .mouseUp({ scrollBehavior: "top" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+      });
+  
+      it("scrolls the element to the bottom of the viewport", () => {
+        cy.get("#action-canvas")
+          .mouseUp({ scrollBehavior: "bottom" })
+          .then(($canvas: JQuery) => {
+            const { bottom: $elBottom } = getElementEdges($canvas);
+            const { bottom: screenBottom } = getScreenEdges();
+  
+            expect($elBottom).to.equal(screenBottom);
+          });
+      });
+  
+      it("scrolls the element to the nearest edge of the viewport", () => {
+        cy.window().scrollTo("bottom");
+  
+        cy.get("#action-canvas")
+          .mouseUp({ scrollBehavior: "nearest" })
+          .then(($canvas: JQuery) => {
+            const { top: $elTop } = getElementEdges($canvas);
+            const { top: screenTop } = getScreenEdges();
+  
+            expect($elTop).to.equal(screenTop);
+          });
+  
+        cy.window().scrollTo("top");
+  
+        cy.get("#action-canvas")
+          .mouseUp({ scrollBehavior: "nearest" })
+          .then(($canvas: JQuery) => {
+            const { bottom: $elBottom } = getElementEdges($canvas);
+            const { bottom: screenBottom } = getScreenEdges();
+  
+            expect($elBottom).to.equal(screenBottom);
+          });
+      });
+    });
 });
 
-describe('iframe behavior', () => {
+describe('mouseDown and mouseUp iframe behavior', () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/iframe-page.html');
     });
@@ -145,6 +256,11 @@ describe('iframe behavior', () => {
         cy.get('#target').mouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
+
+        // will go in hover state
+        cy.get('#target').mouseUp().then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
+        });
       });
     });
   
@@ -163,6 +279,11 @@ describe('iframe behavior', () => {
         cy.get('#target').mouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
+
+        // will go in hover state
+        cy.get('#target').mouseUp().then(($target) => {
+          expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
+        });
       });
     });
 });
diff --git a/src/commands/mouseUp.ts b/src/commands/mouseUp.ts
new file mode 100644
index 0000000..23f0b39
--- /dev/null
+++ b/src/commands/mouseUp.ts
@@ -0,0 +1,53 @@
+import { fireCdpCommand } from "../fireCdpCommand";
+import {
+  getCypressElementCoordinates,
+  ScrollBehaviorOptions,
+  Position,
+} from "../getCypressElementCoordinates";
+
+export interface MouseUpOptions {
+  /** Pointer type for mouseUp, if "pen" touch simulated */
+  pointer?: "mouse" | "pen";
+  /**
+   * Position of the mouseUp event relative to the element
+   * @example cy.mouseUp({ position: "topLeft" })
+   */
+  position?: Position;
+  /**
+   * Controls how the page is scrolled to bring the subject into view, if needed.
+   * @example cy.mouseUp({ scrollBehavior: "top" });
+   */
+  scrollBehavior?: ScrollBehaviorOptions;
+}
+
+/** @ignore this, update documentation for this function at index.d.ts */
+export async function mouseUp(
+  subject: JQuery,
+  options: MouseUpOptions = {}
+) {
+  const { x, y } = getCypressElementCoordinates(subject, options.position, options.scrollBehavior);
+
+  const log = Cypress.log({
+    $el: subject,
+    name: "mouseUp",
+    consoleProps: () => ({
+      "Applied To": subject.get(0),
+      "Absolute Coordinates": { x, y },
+    }),
+  });
+
+  log.snapshot("before");
+  await fireCdpCommand("Input.dispatchMouseEvent", {
+    type: "mouseReleased",
+    x,
+    y,
+    clickCount: 1,
+    buttons: 1,
+    pointerType: options.pointer ?? "mouse",
+    button: "left",
+  });
+
+  log.snapshot("after").end();
+
+  return subject;
+}
diff --git a/src/index.d.ts b/src/index.d.ts
index 7fae363..2449dde 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -8,16 +8,6 @@ type NormalizeCypressCommand<TFun> = TFun extends (
 
 declare namespace Cypress {
   interface Chainable {
-    /**
-     * Fires native system mousePressed event.
-     * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseDown
-     * @example
-     * cy.get("button").mouseDown()
-     * @param options mousePressed options
-     */
-    mouseDown: NormalizeCypressCommand<
-      typeof import("./commands/mouseDown").mouseDown
-    >;
     /**
      * Fires native system click event.
      * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealclick
@@ -26,7 +16,7 @@ declare namespace Cypress {
      * @param options click options
      */
     realClick: NormalizeCypressCommand<
-      typeof import("./commands/realClick").realClick
+    typeof import("./commands/realClick").realClick
     >;
     /**
      * Fires native touch event. It mimics the native touch gesture and can fire html5 touch events.
@@ -37,7 +27,7 @@ declare namespace Cypress {
      * @param options touch options
      */
     realTouch: NormalizeCypressCommand<
-      typeof import("./commands/realTouch").realTouch
+    typeof import("./commands/realTouch").realTouch
     >;
     /**
      * Fires native hover event. Yes, it can test `:hover` preprocessor.
@@ -47,7 +37,7 @@ declare namespace Cypress {
      * @param options hover options
      */
     realHover: NormalizeCypressCommand<
-      typeof import("./commands/realHover").realHover
+    typeof import("./commands/realHover").realHover
     >;
     /**
      * Fires native touch swipe event. Actually fires sequence of native events: touchStart -> touchMove[] -> touchEnd
@@ -58,7 +48,7 @@ declare namespace Cypress {
      * @param options hover options
      */
     realSwipe: NormalizeCypressCommand<
-      typeof import("./commands/realSwipe").realSwipe
+    typeof import("./commands/realSwipe").realSwipe
     >;
     /**
      * Fires native press event. It can fire one key event or the "shortcut" like Shift+Control+M
@@ -80,5 +70,25 @@ declare namespace Cypress {
      * @param text text to type. Should be the same as cypress's default type command argument (https://docs.cypress.io/api/commands/type.html#Arguments)
      */
     realType: typeof import("./commands/realType").realType;
+    /**
+     * Fires native system mousePressed event.
+     * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseDown
+     * @example
+     * cy.get("button").mouseDown()
+     * @param options mousePressed options
+     */
+    mouseDown: NormalizeCypressCommand<
+      typeof import("./commands/mouseDown").mouseDown
+    >;
+    /**
+     * Fires native system mouseReleased event.
+     * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseUp
+     * @example
+     * cy.get("button").mouseUp()
+     * @param options mouseReleased options
+     */
+    mouseUp: NormalizeCypressCommand<
+      typeof import("./commands/mouseUp").mouseUp
+    >;
   }
 }
diff --git a/src/support.ts b/src/support.ts
index 0afd392..1f25c5b 100644
--- a/src/support.ts
+++ b/src/support.ts
@@ -1,15 +1,17 @@
-import { mouseDown } from "./commands/mouseDown";
 import { realClick } from "./commands/realClick";
 import { realHover } from "./commands/realHover";
 import { realSwipe } from "./commands/realSwipe";
 import { realPress } from "./commands/realPress";
 import { realType } from "./commands/realType";
 import { realTouch } from './commands/realTouch';
+import { mouseDown } from "./commands/mouseDown";
+import { mouseUp } from "./commands/mouseUp";
 
-Cypress.Commands.add("mouseDown", { prevSubject: true }, mouseDown);
 Cypress.Commands.add("realClick", { prevSubject: true }, realClick);
 Cypress.Commands.add("realHover", { prevSubject: true }, realHover);
 Cypress.Commands.add("realTouch", { prevSubject: true }, realTouch);
 Cypress.Commands.add("realSwipe", { prevSubject: true }, realSwipe);
 Cypress.Commands.add("realPress", realPress);
 Cypress.Commands.add("realType", realType);
+Cypress.Commands.add("mouseDown", { prevSubject: true }, mouseDown);
+Cypress.Commands.add("mouseUp", { prevSubject: true }, mouseUp);

From 142c82e94d3a72f6c2effffce2c5a0273288efc7 Mon Sep 17 00:00:00 2001
From: arjunpatel17 <37914906+arjunpatel17@users.noreply.github.com>
Date: Mon, 19 Apr 2021 18:48:42 -0400
Subject: [PATCH 4/6] Readme fixes

---
 README.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 56299ff..2f46057 100644
--- a/README.md
+++ b/README.md
@@ -35,10 +35,11 @@ Here is a simple test that can be written with native events:
 
 ```js
 it("tests real events", () => {
-  cy.get("input").mouseDown(); // perform a native mouse press on the field
   cy.get("input").realClick(); // perform a native real click on the field
   cy.realType("cypress real event"); // fires native system keypress events and fills the field
   cy.realPress("Tab"); // native tab click switches the focus
+  cy.get("input").mouseDown(); // perform a native mouse press on the field
+  cy.get("input").mouseUp(); // perform a native mouse release on the field
   cy.focused().realHover(); // hovers over the new focused element
   cy.contains("some text in the hovered popover");
 });
@@ -220,7 +221,6 @@ cy.get('.element').realSwipe("toLeft");  // swipes from right to left
 cy.get('.element').realSwipe("toRight"); // inverted
 ```
 
-
 #### Usage:
 
 ```js
@@ -228,7 +228,6 @@ cy.realSwipe(direction);
 cy.realSwipe(direction, options);
 ```
 
-
 #### Parameters:
 
 | Name      | Type    | Default value | Description                                                                                                                           |

From e8c4a168b0066d6e9b22b3b41e174060bc7b278f Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Thu, 22 Apr 2021 07:50:02 +0300
Subject: [PATCH 5/6] Remove params jsdoc

---
 src/index.d.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 2449dde..78b1d87 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -75,7 +75,6 @@ declare namespace Cypress {
      * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseDown
      * @example
      * cy.get("button").mouseDown()
-     * @param options mousePressed options
      */
     mouseDown: NormalizeCypressCommand<
       typeof import("./commands/mouseDown").mouseDown
@@ -85,7 +84,6 @@ declare namespace Cypress {
      * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseUp
      * @example
      * cy.get("button").mouseUp()
-     * @param options mouseReleased options
      */
     mouseUp: NormalizeCypressCommand<
       typeof import("./commands/mouseUp").mouseUp

From 909c400eff6ccd3ba9d94ffca2212bab10569262 Mon Sep 17 00:00:00 2001
From: Dmitriy Kovalenko <dmtr.kovalenko@outlook.com>
Date: Thu, 29 Apr 2021 09:33:32 +0300
Subject: [PATCH 6/6] Rename to realMouseDown

---
 README.md                         | 12 ++++-----
 cypress/integration/mouse.spec.ts | 44 +++++++++++++++----------------
 src/commands/mouseDown.ts         | 16 +++++------
 src/index.d.ts                    |  8 +++---
 src/support.ts                    |  4 +--
 5 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/README.md b/README.md
index 2f46057..816d249 100644
--- a/README.md
+++ b/README.md
@@ -38,7 +38,7 @@ it("tests real events", () => {
   cy.get("input").realClick(); // perform a native real click on the field
   cy.realType("cypress real event"); // fires native system keypress events and fills the field
   cy.realPress("Tab"); // native tab click switches the focus
-  cy.get("input").mouseDown(); // perform a native mouse press on the field
+  cy.get("input").realMouseDown(); // perform a native mouse press on the field
   cy.get("input").mouseUp(); // perform a native mouse release on the field
   cy.focused().realHover(); // hovers over the new focused element
   cy.contains("some text in the hovered popover");
@@ -82,7 +82,7 @@ Here is an overview of the available **real** event commands:
 - [cy.realTouch](#cyrealtouch)
 - [cy.realType](#cyrealtype)
 - [cy.realSwipe](#cyrealswipe)
-- [cy.mouseDown](#cymouseDown)
+- [cy.realMouseDown](#cyrealMouseDown)
 - [cy.mouseUp](#cymouseUp)
 
 ## cy.realClick
@@ -242,19 +242,19 @@ Options:
 - `Optional` y coordinate to touch **y**: number
 - `Optional` **touchPosition**: "topLeft" | "top" | "topRight" | "left"  | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 
-## cy.mouseDown
+## cy.realMouseDown
 
 Fires native system mouse down event.
 
 ```jsx
-cy.get("button").mouseDown();
-cy.get("button").mouseDown(options);
+cy.get("button").realMouseDown();
+cy.get("button").realMouseDown(options);
 ```
 
 Example:
 
 ```js
-cy.get("button").mouseDown({ position: "topLeft" }) // click on the top left corner of button
+cy.get("button").realMouseDown({ position: "topLeft" }) // click on the top left corner of button
 ```
 
 Options:
diff --git a/cypress/integration/mouse.spec.ts b/cypress/integration/mouse.spec.ts
index 4f27aad..9d0e74d 100644
--- a/cypress/integration/mouse.spec.ts
+++ b/cypress/integration/mouse.spec.ts
@@ -1,43 +1,43 @@
-describe("cy.mouseDown and cy.mouseUp", () => {
+describe("cy.realMouseDown and cy.mouseUp", () => {
     beforeEach(() => {
       cy.visit("https://example.cypress.io/commands/actions");
     });
   
     it("active state on the button", () => {
       cy.get(".action-btn").should("have.css", "background-color", "rgb(217, 83, 79)");
-      cy.get(".action-btn").mouseDown();
+      cy.get(".action-btn").realMouseDown();
       cy.get(".action-btn").should("have.css", "background-color", "rgb(172, 41, 37)");
       cy.get(".action-btn").mouseUp(); // will go in hover state
       cy.get(".action-btn").should("have.css", "background-color", "rgb(201, 48, 44)");
     });
   
     it("active/focused state on the text field", () => {
-      cy.get("#email1").mouseDown().should("be.focused");
+      cy.get("#email1").realMouseDown().should("be.focused");
     });
   
     it("active state on different positions", () => {
       cy.get(".action-btn")
-        .mouseDown({ position: "topLeft" })
+        .realMouseDown({ position: "topLeft" })
         .mouseUp({ position: "topLeft" })
-        .mouseDown({ position: "top" })
+        .realMouseDown({ position: "top" })
         .mouseUp({ position: "top" })
-        .mouseDown({ position: "topRight" })
+        .realMouseDown({ position: "topRight" })
         .mouseUp({ position: "topRight" })
-        .mouseDown({ position: "left" })
+        .realMouseDown({ position: "left" })
         .mouseUp({ position: "left" })
-        .mouseDown({ position: "center" })
+        .realMouseDown({ position: "center" })
         .mouseUp({ position: "center" })
-        .mouseDown({ position: "right" })
+        .realMouseDown({ position: "right" })
         .mouseUp({ position: "right" })
-        .mouseDown({ position: "bottomLeft" })
+        .realMouseDown({ position: "bottomLeft" })
         .mouseUp({ position: "bottomLeft" })
-        .mouseDown({ position: "bottom" })
+        .realMouseDown({ position: "bottom" })
         .mouseUp({ position: "bottom" })
-        .mouseDown({ position: "bottomRight" })
+        .realMouseDown({ position: "bottomRight" })
         .mouseUp({ position: "bottomRight" });
     });
   
-    describe("mouseDown scroll behavior", () => {
+    describe("realMouseDown scroll behavior", () => {
       function getScreenEdges() {
         const cypressAppWindow = window.parent.document.querySelector("iframe")
           .contentWindow;
@@ -67,7 +67,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
   
       it("defaults to scrolling the element to the top of the viewport", () => {
         cy.get("#action-canvas")
-          .mouseDown()
+          .realMouseDown()
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -78,7 +78,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
   
       it("scrolls the element to center of viewport", () => {
         cy.get("#action-canvas")
-          .mouseDown({ scrollBehavior: "center" })
+          .realMouseDown({ scrollBehavior: "center" })
           .then(($canvas: JQuery) => {
             const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
             const { top: screenTop, bottom: screenBottom } = getScreenEdges();
@@ -92,7 +92,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
   
       it("scrolls the element to the top of the viewport", () => {
         cy.get("#action-canvas")
-          .mouseDown({ scrollBehavior: "top" })
+          .realMouseDown({ scrollBehavior: "top" })
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -103,7 +103,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
   
       it("scrolls the element to the bottom of the viewport", () => {
         cy.get("#action-canvas")
-          .mouseDown({ scrollBehavior: "bottom" })
+          .realMouseDown({ scrollBehavior: "bottom" })
           .then(($canvas: JQuery) => {
             const { bottom: $elBottom } = getElementEdges($canvas);
             const { bottom: screenBottom } = getScreenEdges();
@@ -116,7 +116,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
         cy.window().scrollTo("bottom");
   
         cy.get("#action-canvas")
-          .mouseDown({ scrollBehavior: "nearest" })
+          .realMouseDown({ scrollBehavior: "nearest" })
           .then(($canvas: JQuery) => {
             const { top: $elTop } = getElementEdges($canvas);
             const { top: screenTop } = getScreenEdges();
@@ -127,7 +127,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
         cy.window().scrollTo("top");
   
         cy.get("#action-canvas")
-          .mouseDown({ scrollBehavior: "nearest" })
+          .realMouseDown({ scrollBehavior: "nearest" })
           .then(($canvas: JQuery) => {
             const { bottom: $elBottom } = getElementEdges($canvas);
             const { bottom: screenBottom } = getScreenEdges();
@@ -238,7 +238,7 @@ describe("cy.mouseDown and cy.mouseUp", () => {
     });
 });
 
-describe('mouseDown and mouseUp iframe behavior', () => {
+describe('realMouseDown and mouseUp iframe behavior', () => {
     beforeEach(() => {
       cy.visit('./cypress/fixtures/iframe-page.html');
     });
@@ -253,7 +253,7 @@ describe('mouseDown and mouseUp iframe behavior', () => {
           expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
         });
   
-        cy.get('#target').mouseDown().then(($target) => {
+        cy.get('#target').realMouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
 
@@ -276,7 +276,7 @@ describe('mouseDown and mouseUp iframe behavior', () => {
           expect($target.css('background-color')).to.equal('rgb(0, 128, 0)');
         });
   
-        cy.get('#target').mouseDown().then(($target) => {
+        cy.get('#target').realMouseDown().then(($target) => {
           expect($target.css('background-color')).to.equal('rgb(0, 0, 255)');
         });
 
diff --git a/src/commands/mouseDown.ts b/src/commands/mouseDown.ts
index 916b692..04f0857 100644
--- a/src/commands/mouseDown.ts
+++ b/src/commands/mouseDown.ts
@@ -5,31 +5,31 @@ import {
   Position,
 } from "../getCypressElementCoordinates";
 
-export interface MouseDownOptions {
-  /** Pointer type for mouseDown, if "pen" touch simulated */
+export interface realMouseDownOptions {
+  /** Pointer type for realMouseDown, if "pen" touch simulated */
   pointer?: "mouse" | "pen";
   /**
-   * Position of the mousedown event relative to the element
-   * @example cy.mouseDown({ position: "topLeft" })
+   * Position of the realMouseDown event relative to the element
+   * @example cy.realMouseDown({ position: "topLeft" })
    */
   position?: Position;
   /**
    * Controls how the page is scrolled to bring the subject into view, if needed.
-   * @example cy.mouseDown({ scrollBehavior: "top" });
+   * @example cy.realMouseDown({ scrollBehavior: "top" });
    */
   scrollBehavior?: ScrollBehaviorOptions;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
-export async function mouseDown(
+export async function realMouseDown(
   subject: JQuery,
-  options: MouseDownOptions = {}
+  options: realMouseDownOptions = {}
 ) {
   const { x, y } = getCypressElementCoordinates(subject, options.position, options.scrollBehavior);
 
   const log = Cypress.log({
     $el: subject,
-    name: "mouseDown",
+    name: "realMouseDown",
     consoleProps: () => ({
       "Applied To": subject.get(0),
       "Absolute Coordinates": { x, y },
diff --git a/src/index.d.ts b/src/index.d.ts
index 78b1d87..22e0ecf 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -72,12 +72,12 @@ declare namespace Cypress {
     realType: typeof import("./commands/realType").realType;
     /**
      * Fires native system mousePressed event.
-     * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseDown
+     * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealMouseDown
      * @example
-     * cy.get("button").mouseDown()
+     * cy.get("button").realMouseDown()
      */
-    mouseDown: NormalizeCypressCommand<
-      typeof import("./commands/mouseDown").mouseDown
+    realMouseDown: NormalizeCypressCommand<
+      typeof import("./commands/mouseDown").realMouseDown
     >;
     /**
      * Fires native system mouseReleased event.
diff --git a/src/support.ts b/src/support.ts
index 1f25c5b..6254953 100644
--- a/src/support.ts
+++ b/src/support.ts
@@ -4,7 +4,7 @@ import { realSwipe } from "./commands/realSwipe";
 import { realPress } from "./commands/realPress";
 import { realType } from "./commands/realType";
 import { realTouch } from './commands/realTouch';
-import { mouseDown } from "./commands/mouseDown";
+import { realMouseDown } from "./commands/mouseDown";
 import { mouseUp } from "./commands/mouseUp";
 
 Cypress.Commands.add("realClick", { prevSubject: true }, realClick);
@@ -13,5 +13,5 @@ Cypress.Commands.add("realTouch", { prevSubject: true }, realTouch);
 Cypress.Commands.add("realSwipe", { prevSubject: true }, realSwipe);
 Cypress.Commands.add("realPress", realPress);
 Cypress.Commands.add("realType", realType);
-Cypress.Commands.add("mouseDown", { prevSubject: true }, mouseDown);
+Cypress.Commands.add("realMouseDown", { prevSubject: true }, realMouseDown);
 Cypress.Commands.add("mouseUp", { prevSubject: true }, mouseUp);