fix: strict top offset comparison fails in headed mode

.circleci/config.yml

@@ -57,7 +57,7 @@ workflows:
           # following examples from
           # https://circleci.com/docs/2.0/parallelism-faster-jobs/
           command: |
-            TESTFILES=$(circleci tests glob "cypress/integration/**/*spec.{js,jsx,ts,tsx}" | circleci tests split --total=2)
+            TESTFILES=$(circleci tests glob "cypress/e2e/**/*.cy.ts" | circleci tests split --total=2)
             echo "Test files for this machine are $TESTFILES"
             npx cypress run --spec $TESTFILES
       - release:

README.md

@@ -20,6 +20,9 @@
  <a/>
 <p />
 
+
+[![Stand With Ukraine](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://vshymanskyy.github.io/StandWithUkraine/)
+
 ## Why?
 
 Cypress default events are simulated. That means that all events like `cy.click` or `cy.type` are fired from javascript. That's why these events will be untrusted (`event.isTrusted` will be `false`) and they can behave a little different from real native events. But for some cases, it can be impossible to use simulated events, for example, to fill a native alert or copy to the clipboard. This plugin solves this problem.
@@ -311,7 +314,7 @@ cy.get("sector").realMouseMove(x, y, options);
 Example:
 
 ```js
-cy.get("sector").realMouseUp(50, 50, { position: "center" }); // moves by 50px x and y from center of sector
+cy.get("sector").realMouseMove(50, 50, { position: "center" }); // moves by 50px x and y from center of sector
 ```
 
 Options:

cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  video: false,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+  },
+})

cypress/integration/click.spec.ts → cypress/e2e/click.cy.ts

@@ -44,30 +44,41 @@ describe("cy.realClick", () => {
     cy.get(".action-btn")
       .then(($button) => {
         $button.get(0).addEventListener("dblclick", () => {
-          done()
+          done();
         });
       })
       .realClick({ clickCount: 2 });
   });
 
   it("should dispatch multiple clicks with clickCount greater than 1", (done) => {
-    let count = 0
+    let count = 0;
     cy.get(".action-btn")
       .then(($button) => {
         $button.get(0).addEventListener("click", () => {
-          count++
+          count++;
           if (count === 2) {
-            done()
+            done();
           }
         });
       })
       .realClick({ clickCount: 2 });
   });
 
+  it("right click should only report secondary button being pressed", () => {
+    cy.get(".navbar-brand").then(($navbarBrand) => {
+      $navbarBrand.get(0).addEventListener("contextmenu", (ev) => {
+        ev.preventDefault();
+        expect(ev.buttons).to.eq(2);
+      });
+    });
+
+    cy.get(".navbar-brand").realClick({ button: "right" });
+  });
+
   describe("scroll behavior", () => {
     function getScreenEdges() {
-      const cypressAppWindow = window.parent.document.querySelector("iframe")
-        .contentWindow;
+      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;
@@ -83,8 +94,8 @@ describe("cy.realClick", () => {
       const $elTop = $el.offset().top;
 
       return {
-        top: $elTop,
-        bottom: $elTop + $el.outerHeight(),
+        top: Math.floor($elTop),
+        bottom: Math.floor($elTop + $el.outerHeight()),
       };
     }
 
@@ -99,7 +110,7 @@ describe("cy.realClick", () => {
           const { top: $elTop } = getElementEdges($canvas);
           const { top: screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
     });
 
@@ -112,8 +123,8 @@ describe("cy.realClick", () => {
 
           const screenCenter = screenTop + (screenBottom - screenTop) / 2;
 
-          expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
-          expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
+          expect($elTop).to.be.closeTo(screenCenter - $canvas.outerHeight() / 2, 1);
+          expect($elBottom).to.be.closeTo(screenCenter + $canvas.outerHeight() / 2, 1);
         });
     });
 
@@ -124,7 +135,7 @@ describe("cy.realClick", () => {
           const { top: $elTop } = getElementEdges($canvas);
           const { top: screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
     });
 
@@ -135,7 +146,7 @@ describe("cy.realClick", () => {
           const { bottom: $elBottom } = getElementEdges($canvas);
           const { bottom: screenBottom } = getScreenEdges();
 
-          expect($elBottom).to.equal(screenBottom);
+          expect($elBottom).to.be.closeTo(screenBottom, 1);
         });
     });
 
@@ -148,7 +159,7 @@ describe("cy.realClick", () => {
           const { top: $elTop } = getElementEdges($canvas);
           const { top: screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
 
       cy.window().scrollTo("top");
@@ -159,13 +170,13 @@ describe("cy.realClick", () => {
           const { bottom: $elBottom } = getElementEdges($canvas);
           const { bottom: screenBottom } = getScreenEdges();
 
-          expect($elBottom).to.equal(screenBottom);
+          expect($elBottom).to.be.closeTo(screenBottom, 1);
         });
     });
   });
 });
 
-describe("iframe behavior", () => {
+describe("iframe behavior", { retries: 10 }, () => {
   beforeEach(() => {
     cy.visit("./cypress/fixtures/iframe-page.html");
   });

cypress/integration/hover.spec.ts → cypress/e2e/hover.cy.ts

@@ -26,18 +26,18 @@ describe("cy.realHover", () => {
       const windowCenter = windowTopEdge + cypressAppWindow.innerHeight / 2;
 
       return {
-        screenTop: windowTopEdge,
-        screenBottom: windowBottomEdge,
-        screenCenter: windowCenter,
+        screenTop: Math.floor(windowTopEdge),
+        screenBottom: Math.floor(windowBottomEdge),
+        screenCenter: Math.floor(windowCenter),
       };
     }
 
     function getElementEdges($el: JQuery) {
       const $elTop = $el.offset().top;
 
       return {
-        $elTop,
-        $elBottom: $elTop + $el.outerHeight(),
+        $elTop: Math.floor($elTop),
+        $elBottom: Math.floor($elTop + $el.outerHeight()),
       };
     }
 
@@ -52,7 +52,7 @@ describe("cy.realHover", () => {
           const { $elTop } = getElementEdges($canvas);
           const { screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
     });
 
@@ -65,8 +65,8 @@ describe("cy.realHover", () => {
 
           const screenCenter = screenTop + (screenBottom - screenTop) / 2;
 
-          expect($elTop).to.equal(screenCenter - $canvas.outerHeight() / 2);
-          expect($elBottom).to.equal(screenCenter + $canvas.outerHeight() / 2);
+          expect($elTop).to.be.closeTo(screenCenter - $canvas.outerHeight() / 2, 1);
+          expect($elBottom).to.be.closeTo(screenCenter + $canvas.outerHeight() / 2, 1);
         });
     });
 
@@ -77,7 +77,7 @@ describe("cy.realHover", () => {
           const { $elTop } = getElementEdges($canvas);
           const { screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
     });
 
@@ -88,7 +88,7 @@ describe("cy.realHover", () => {
           const { $elBottom } = getElementEdges($canvas);
           const { screenBottom } = getScreenEdges();
 
-          expect($elBottom).to.equal(screenBottom);
+          expect($elBottom).to.be.closeTo(screenBottom, 1);
         });
     });
 
@@ -101,7 +101,7 @@ describe("cy.realHover", () => {
           const { $elTop } = getElementEdges($canvas);
           const { screenTop } = getScreenEdges();
 
-          expect($elTop).to.equal(screenTop);
+          expect($elTop).to.be.closeTo(screenTop, 1);
         });
 
       cy.window().scrollTo("top");
@@ -112,13 +112,13 @@ describe("cy.realHover", () => {
           const { $elBottom } = getElementEdges($canvas);
           const { screenBottom } = getScreenEdges();
 
-          expect($elBottom).to.equal(screenBottom);
+          expect($elBottom).to.be.closeTo(screenBottom, 1);
         });
     });
   });
 });
 
-describe("iframe behavior", () => {
+describe("iframe behavior", { retries: 10 }, () => {
   beforeEach(() => {
     cy.visit("./cypress/fixtures/iframe-page.html");
   });