feat: Add cy.realMouseDown command

README.md

@@ -39,7 +39,7 @@ it("tests real events", () => {
  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").realMouseDown(); // perform a native mouse press on the field
- cy.get("input").mouseUp(); // perform a native mouse release on the field
+ cy.get("input").realMouseUp(); // 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");
 });
@@ -83,7 +83,7 @@ Here is an overview of the available **real** event commands:
 - [cy.realType](#cyrealtype)
 - [cy.realSwipe](#cyrealswipe)
 - [cy.realMouseDown](#cyrealMouseDown)
-- [cy.mouseUp](#cymouseUp)
+- [cy.realMouseUp](#cyrealMouseUp)
 
 ## cy.realClick
 
@@ -263,19 +263,19 @@ Options:
 - `Optional` **position**: "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
 - `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
 
-## cy.mouseUp
+## cy.realMouseUp
 
 Fires native system mouse down event.
 
 ```jsx
-cy.get("button").mouseUp();
-cy.get("button").mouseUp(options);
+cy.get("button").realMouseUp();
+cy.get("button").realMouseUp(options);
 ```
 
 Example:
 
 ```js
-cy.get("button").mouseUp({ position: "topLeft" }) // click on the top left corner of button
+cy.get("button").realMouseUp({ position: "topLeft" }) // click on the top left corner of button
 ```
 
 Options:

cypress/integration/mouse.spec.ts

@@ -1,4 +1,4 @@
-describe("cy.realMouseDown and cy.mouseUp", () => {
+describe("cy.realMouseDown and cy.realMouseUp", () => {
  beforeEach(() => {
  cy.visit("https://example.cypress.io/commands/actions");
  });
@@ -7,7 +7,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  cy.get(".action-btn").should("have.css", "background-color", "rgb(217, 83, 79)");
  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").realMouseUp(); // will go in hover state
  cy.get(".action-btn").should("have.css", "background-color", "rgb(201, 48, 44)");
  });
 
@@ -18,23 +18,23 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  it("active state on different positions", () => {
  cy.get(".action-btn")
  .realMouseDown({ position: "topLeft" })
- .mouseUp({ position: "topLeft" })
+ .realMouseUp({ position: "topLeft" })
  .realMouseDown({ position: "top" })
- .mouseUp({ position: "top" })
+ .realMouseUp({ position: "top" })
  .realMouseDown({ position: "topRight" })
- .mouseUp({ position: "topRight" })
+ .realMouseUp({ position: "topRight" })
  .realMouseDown({ position: "left" })
- .mouseUp({ position: "left" })
+ .realMouseUp({ position: "left" })
  .realMouseDown({ position: "center" })
- .mouseUp({ position: "center" })
+ .realMouseUp({ position: "center" })
  .realMouseDown({ position: "right" })
- .mouseUp({ position: "right" })
+ .realMouseUp({ position: "right" })
  .realMouseDown({ position: "bottomLeft" })
- .mouseUp({ position: "bottomLeft" })
+ .realMouseUp({ position: "bottomLeft" })
  .realMouseDown({ position: "bottom" })
- .mouseUp({ position: "bottom" })
+ .realMouseUp({ position: "bottom" })
  .realMouseDown({ position: "bottomRight" })
- .mouseUp({ position: "bottomRight" });
+ .realMouseUp({ position: "bottomRight" });
  });
 
  describe("realMouseDown scroll behavior", () => {
@@ -137,7 +137,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  });
  });
 
- describe("mouseUp scroll behavior", () => {
+ describe("realMouseUp scroll behavior", () => {
  function getScreenEdges() {
  const cypressAppWindow = window.parent.document.querySelector("iframe")
  .contentWindow;
@@ -167,7 +167,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
 
  it("defaults to scrolling the element to the top of the viewport", () => {
  cy.get("#action-canvas")
- .mouseUp()
+ .realMouseUp()
  .then(($canvas: JQuery) => {
  const { top: $elTop } = getElementEdges($canvas);
  const { top: screenTop } = getScreenEdges();
@@ -178,7 +178,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
 
  it("scrolls the element to center of viewport", () => {
  cy.get("#action-canvas")
- .mouseUp({ scrollBehavior: "center" })
+ .realMouseUp({ scrollBehavior: "center" })
  .then(($canvas: JQuery) => {
  const { top: $elTop, bottom: $elBottom } = getElementEdges($canvas);
  const { top: screenTop, bottom: screenBottom } = getScreenEdges();
@@ -192,7 +192,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
 
  it("scrolls the element to the top of the viewport", () => {
  cy.get("#action-canvas")
- .mouseUp({ scrollBehavior: "top" })
+ .realMouseUp({ scrollBehavior: "top" })
  .then(($canvas: JQuery) => {
  const { top: $elTop } = getElementEdges($canvas);
  const { top: screenTop } = getScreenEdges();
@@ -203,7 +203,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
 
  it("scrolls the element to the bottom of the viewport", () => {
  cy.get("#action-canvas")
- .mouseUp({ scrollBehavior: "bottom" })
+ .realMouseUp({ scrollBehavior: "bottom" })
  .then(($canvas: JQuery) => {
  const { bottom: $elBottom } = getElementEdges($canvas);
  const { bottom: screenBottom } = getScreenEdges();
@@ -216,7 +216,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  cy.window().scrollTo("bottom");
 
  cy.get("#action-canvas")
- .mouseUp({ scrollBehavior: "nearest" })
+ .realMouseUp({ scrollBehavior: "nearest" })
  .then(($canvas: JQuery) => {
  const { top: $elTop } = getElementEdges($canvas);
  const { top: screenTop } = getScreenEdges();
@@ -227,7 +227,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  cy.window().scrollTo("top");
 
  cy.get("#action-canvas")
- .mouseUp({ scrollBehavior: "nearest" })
+ .realMouseUp({ scrollBehavior: "nearest" })
  .then(($canvas: JQuery) => {
  const { bottom: $elBottom } = getElementEdges($canvas);
  const { bottom: screenBottom } = getScreenEdges();
@@ -238,7 +238,7 @@ describe("cy.realMouseDown and cy.mouseUp", () => {
  });
 });
 
-describe('realMouseDown and mouseUp iframe behavior', () => {
+describe('realMouseDown and realMouseUp iframe behavior', () => {
  beforeEach(() => {
  cy.visit('./cypress/fixtures/iframe-page.html');
  });
@@ -258,7 +258,7 @@ describe('realMouseDown and mouseUp iframe behavior', () => {
  });
 
  // will go in hover state
- cy.get('#target').mouseUp().then(($target) => {
+ cy.get('#target').realMouseUp().then(($target) => {
  expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
  });
  });
@@ -281,7 +281,7 @@ describe('realMouseDown and mouseUp iframe behavior', () => {
  });
 
  // will go in hover state
- cy.get('#target').mouseUp().then(($target) => {
+ cy.get('#target').realMouseUp().then(($target) => {
  expect($target.css('background-color')).to.equal('rgb(255, 192, 203)');
  });
  });

cypress/integration/touch.spec.ts

@@ -1,9 +1,9 @@
-describe("cy.realTouch", () => {
+describe("cy.realTouch", { retries: { runMode: 4 } }, () => {
  beforeEach(() => {
  cy.visit("https://example.cypress.io/commands/actions");
  });
 
- it('touches the button', () => {
+ it("touches the button", () => {
  cy.get(".action-btn").realTouch();
  cy.contains("This popover shows up on click");
  });
@@ -33,7 +33,7 @@ describe("cy.realTouch", () => {
  .realTouch({ x: 100, y: 185 })
  .realTouch({ x: 125, y: 190 })
  .realTouch({ x: 150, y: 185 })
- .realTouch({ x: 170, y: 165 } )
+ .realTouch({ x: 170, y: 165 });
  });
 
  it("touches with a default radius of 1", (done) => {
@@ -76,7 +76,7 @@ describe("cy.realTouch", () => {
  cy.get(".action-btn")
  .then(($button) => {
  $button.get(0).addEventListener("pointerdown", (event) => {
- const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+ const rect = (event.currentTarget as HTMLElement).getBoundingClientRect();
  expect(event.clientX).to.be.closeTo(rect.left - 5, 5);
  expect(event.clientY).to.be.closeTo(rect.top, 5);
  done();

src/commands/mouseUp.ts

@@ -5,31 +5,31 @@ import {
  Position,
 } from "../getCypressElementCoordinates";
 
-export interface MouseUpOptions {
- /** Pointer type for mouseUp, if "pen" touch simulated */
+export interface realMouseUpOptions {
+ /** Pointer type for realMouseUp, if "pen" touch simulated */
  pointer?: "mouse" | "pen";
  /**
- * Position of the mouseUp event relative to the element
- * @example cy.mouseUp({ position: "topLeft" })
+ * Position of the realMouseUp event relative to the element
+ * @example cy.realMouseUp({ position: "topLeft" })
  */
  position?: Position;
  /**
  * Controls how the page is scrolled to bring the subject into view, if needed.
- * @example cy.mouseUp({ scrollBehavior: "top" });
+ * @example cy.realMouseUp({ scrollBehavior: "top" });
  */
  scrollBehavior?: ScrollBehaviorOptions;
 }
 
 /** @ignore this, update documentation for this function at index.d.ts */
-export async function mouseUp(
+export async function realMouseUp(
  subject: JQuery,
- options: MouseUpOptions = {}
+ options: realMouseUpOptions = {}
 ) {
  const { x, y } = getCypressElementCoordinates(subject, options.position, options.scrollBehavior);
 
  const log = Cypress.log({
  $el: subject,
- name: "mouseUp",
+ name: "realMouseUp",
  consoleProps: () => ({
  "Applied To": subject.get(0),
  "Absolute Coordinates": { x, y },

src/index.d.ts

@@ -81,12 +81,12 @@ declare namespace Cypress {
  >;
  /**
  * Fires native system mouseReleased event.
- * @see https://github.com/dmtrKovalenko/cypress-real-events#cymouseUp
+ * @see https://github.com/dmtrKovalenko/cypress-real-events#cyrealMouseUp
  * @example
- * cy.get("button").mouseUp()
+ * cy.get("button").realMouseUp()
  */
- mouseUp: NormalizeCypressCommand<
- typeof import("./commands/mouseUp").mouseUp
+ realMouseUp: NormalizeCypressCommand<
+ typeof import("./commands/mouseUp").realMouseUp
  >;
  }
 }

src/support.ts

@@ -5,7 +5,7 @@ import { realPress } from "./commands/realPress";
 import { realType } from "./commands/realType";
 import { realTouch } from './commands/realTouch';
 import { realMouseDown } from "./commands/mouseDown";
-import { mouseUp } from "./commands/mouseUp";
+import { realMouseUp } from "./commands/mouseUp";
 
 Cypress.Commands.add("realClick", { prevSubject: true }, realClick);
 Cypress.Commands.add("realHover", { prevSubject: true }, realHover);
@@ -14,4 +14,4 @@ Cypress.Commands.add("realSwipe", { prevSubject: true }, realSwipe);
 Cypress.Commands.add("realPress", realPress);
 Cypress.Commands.add("realType", realType);
 Cypress.Commands.add("realMouseDown", { prevSubject: true }, realMouseDown);
-Cypress.Commands.add("mouseUp", { prevSubject: true }, mouseUp);
+Cypress.Commands.add("realMouseUp", { prevSubject: true }, realMouseUp);