Merge pull request #68 from dmtrKovalenko/develop

v1.5.1
dmtrKovalenko · May 31, 2021 · a6566a7 · a6566a7
2 parents 1df0119 + 712899e
commit a6566a7
Show file tree

Hide file tree

Showing 10 changed files with 1,341 additions and 2,341 deletions.
diff --git a/README.md b/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:

diff --git a/cypress/integration/mouse.spec.ts b/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)');
  });
  });

diff --git a/cypress/integration/press.spec.ts b/cypress/integration/press.spec.ts
@@ -21,47 +21,55 @@ describe("cy.realPress", () => {
  cy.realPress("Tab");
  cy.get("[aria-label='Search by voice']").should("be.focused");
  });
+
+ it("Can use Enter for a11y navigation", () => {
+ cy.get("input[name=q]").focus();
+ cy.realType("something");
+ cy.realPress("Tab");
+
+ cy.get("input[name=q]").should("have.value", "something");
+ cy.realPress("Enter");
+ cy.get("input[name=q]").should("have.value", "");
+ });
  });
 
  context("shortcuts", () => {
  beforeEach(() => {
- cy.visit("https://wangchujiang.com/hotkeys/")
- cy.get('[data-key=27]').realClick() // just activate the listener
- })
-
+ cy.visit("https://wangchujiang.com/hotkeys/");
+ cy.get("[data-key=27]").realClick(); // just activate the listener
+ });
 
  it("Can fire shortcuts", () => {
-
  cy.realPress(["Control", "Shift", "R"]);
  cy.realPress(["Alt", "Shift", "F5"]);
  });
 
  it("Fires correct js events", () => {
- cy.document().then(document => { 
- document.addEventListener("keyup", e => {
- expect(e.isTrusted).to.be.true
- expect(e.shiftKey).to.be.true
- expect(e.altKey).to.be.true
+ cy.document().then((document) => {
+ document.addEventListener("keyup", (e) => {
+ expect(e.isTrusted).to.be.true;
+ expect(e.shiftKey).to.be.true;
+ expect(e.altKey).to.be.true;
 
- if (e.key === "Alt") { 
- expect(e.altKey).to.be.true
- expect(e.code).to.eq("AltLeft")
- expect(e.keyCode).to.eq(18)
+ if (e.key === "Alt") {
+ expect(e.altKey).to.be.true;
+ expect(e.code).to.eq("AltLeft");
+ expect(e.keyCode).to.eq(18);
  }
- if (e.key === "Shift") { 
- expect(e.altKey).to.be.true
- expect(e.code).to.eq("ShiftLeft")
- expect(e.keyCode).to.eq(16)
+ if (e.key === "Shift") {
+ expect(e.altKey).to.be.true;
+ expect(e.code).to.eq("ShiftLeft");
+ expect(e.keyCode).to.eq(16);
  }
- if (e.key === "F5") { 
- expect(e.altKey).to.be.true
- expect(e.code).to.eq("F5")
- expect(e.keyCode).to.eq(116)
+ if (e.key === "F5") {
+ expect(e.altKey).to.be.true;
+ expect(e.code).to.eq("F5");
+ expect(e.keyCode).to.eq(116);
  }
- })
- })
- 
+ });
+ });
+
  cy.realPress(["Alt", "Shift", "F5"]);
- })
+ });
  });
 });
diff --git a/cypress/integration/touch.spec.ts b/cypress/integration/touch.spec.ts
@@ -3,7 +3,7 @@ describe("cy.realTouch", () => {
  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,10 +33,10 @@ 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) => {
+ it("touches with a default radius of 1",  { retries: 4 }, (done) => {
  cy.get(".action-btn")
  .then(($button) => {
  $button.get(0).addEventListener("pointerdown", (event) => {
@@ -48,7 +48,7 @@ describe("cy.realTouch", () => {
  .realTouch();
  });
 
- it("touches with a custom radius", (done) => {
+ it("touches with a custom radius",  { retries: 4 }, (done) => {
  cy.get(".action-btn")
  .then(($button) => {
  $button.get(0).addEventListener("pointerdown", (event) => {
@@ -60,7 +60,7 @@ describe("cy.realTouch", () => {
  .realTouch({ radius: 10 });
  });
 
- it("touches with a custom radius for each axis", (done) => {
+ it("touches with a custom radius for each axis", { retries: 4 }, (done) => {
  cy.get(".action-btn")
  .then(($button) => {
  $button.get(0).addEventListener("pointerdown", (event) => {
@@ -72,11 +72,13 @@ describe("cy.realTouch", () => {
  .realTouch({ radiusX: 5, radiusY: 7 });
  });
 
- it("touches using provided 0 for one of the axis", (done) => {
+ it("touches using provided 0 for one of the axis", { retries: 4 }, (done) => {
  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();

diff --git a/src/commands/mouseUp.ts b/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 },

diff --git a/src/commands/realPress.ts b/src/commands/realPress.ts
@@ -69,10 +69,17 @@ export async function realPress(
 
  for (const key of keyDefinitions) {
  modifiers |= keyToModifierBitMap[key.key] ?? 0;
-
  await fireCdpCommand("Input.dispatchKeyEvent", {
  type: key.text ? "keyDown" : "rawKeyDown",
  modifiers,
+ enter:
+ key.code === "Enter"
+ ? {
+ type: "char",
+ unmodifiedText: "\r",
+ text: "\r",
+ }
+ : {},
  ...key,
  });
 

diff --git a/src/index.d.ts b/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
  >;
  }
 }