v1.7.3

1.7.3

cypress/e2e/click.cy.ts

@@ -66,7 +66,7 @@ describe("cy.realClick", () => {
 
   it("right click should only report secondary button being pressed", () => {
     cy.get(".navbar-brand").then(($navbarBrand) => {
-      $navbarBrand.get(0).addEventListener("contextmenu", (ev) => {
+      $navbarBrand.get(0).addEventListener("mousedown", (ev) => {
         ev.preventDefault();
         expect(ev.buttons).to.eq(2);
       });
@@ -214,4 +214,4 @@ describe("iframe behavior", { retries: 10 }, () => {
         cy.get("#target").realClick().contains("clicked").should("exist");
       });
   });
-});
+});

cypress/e2e/touch.cy.ts

@@ -71,4 +71,4 @@ describe("cy.realTouch", () => {
       })
       .realTouch({ radiusX: 5, radiusY: 7 });
   });
-});
+});

cypress/e2e/viewport-scaling.cy.ts

@@ -0,0 +1,96 @@
+import * as pixelmatch from 'pixelmatch'
+import { PNG } from 'pngjs/browser';
+
+/**
+ * No matter how th viewport is scaled by cypress, all clicks and draws should not be moved by more than 1 px in y and x direction
+ * 1px tolerance in each direction is ok, because the scaling forces the click coordinates to round up or down
+ * 1px movement in one direction makes a difference of two pixels
+ * **/
+
+describe('draw on canvas with scaled viewport',()=>{
+    beforeEach(() => {
+        cy.visit("./cypress/fixtures/drawCanvas.html");
+    });
+
+    it('clicks custom coordinates and viewport scaling',()=>{
+        // default cypress scale
+        cy.viewport(1000, 660 );
+        const canvas = 'canvas'
+        cy.get(canvas).realClick({ x: 100, y: 100 })
+        cy.get(canvas).realClick({ x: 200, y: 200 })
+        cy.get(canvas).realClick({ x: 300, y: 300})
+        cy.get(canvas).then(cnv =>{
+            const url = cnv[0].toDataURL('image/png');
+            const realData = url.replace(/^data:image\/png;base64,/, '')
+            cy.writeFile('cypress/screenshots/compareFile/clickDraw100.png', realData, 'base64')
+            /**
+             * Three clicks produce three 3x3 Pixel rectangles
+             * Each of them should not be moved more than 1px in each direction
+             * --> max allowed difference to the reference image 18px
+            **/
+            compareImages('clickDraw100.png', 'clickDraw.png', 'clickDraw100Diff.png').should('be.lessThan', 33)
+        })
+        cy.get('input').click();
+        cy.viewport(1500, 1500 );
+        cy.get(canvas).realClick({ x: 100, y: 100 })
+        cy.get(canvas).realClick({ x: 200, y: 200 })
+        cy.get(canvas).realClick({ x: 300, y: 300})
+        cy.get(canvas).then(cnv =>{
+            const url = cnv[0].toDataURL('image/png');
+            const data = url.replace(/^data:image\/png;base64,/, '')
+            cy.writeFile('cypress/screenshots/compareFile/clickDrawScaled.png', data, 'base64')
+            compareImages('clickDrawScaled.png', 'clickDraw.png', 'clickDrawScaledDiff.png').should('be.lessThan', 33)
+        })
+    })
+
+    it('touches custom coordinates with radius and viewport scaling',()=>{
+        // default cypress scale
+        cy.viewport(1000, 660 );
+        const canvas = 'canvas'
+        cy.get(canvas).realTouch({ x: 100, y: 100 })
+        cy.get(canvas).realTouch({ x: 200, y: 200, radius: 10 })
+        cy.get(canvas).realTouch({ x: 300, y: 300, radiusX: 10, radiusY: 5  })
+        cy.get(canvas).then(cnv =>{
+            const url = cnv[0].toDataURL('image/png');
+            const data = url.replace(/^data:image\/png;base64,/, '')
+            cy.writeFile('cypress/screenshots/compareFile/touchDraw100.png', data, 'base64')
+            /**
+             * Three touches with different radius create the following rectanges:
+             * Radius 0 --> default 3x3
+             * Radius 10 --> 10x10
+             * Radius x:10 y:5 --> 10x15
+             * Each of them should not be moved more than 1px in each direction
+             * --> max allowed difference to the reference image 31px
+             **/
+            compareImages('touchDraw100.png', 'touchDraw.png', 'touchDraw100Diff.png').should('be.lessThan', 63)
+            })
+        cy.get('input').click();
+        cy.viewport(2000, 2000 );
+        cy.get(canvas).realTouch({ x: 100, y: 100 })
+        cy.get(canvas).realTouch({ x: 200, y: 200, radius: 10 })
+        cy.get(canvas).realTouch({ x: 300, y: 300, radiusX: 10, radiusY: 5  })
+        cy.get(canvas).then(cnv =>{
+            const url = cnv[0].toDataURL('image/png');
+            const data = url.replace(/^data:image\/png;base64,/, '')
+            cy.writeFile('cypress/screenshots/compareFile/touchDrawScaled.png', data, 'base64')
+            compareImages('touchDrawScaled.png', 'touchDraw.png', 'touchDrawScaledDiff.png').should('be.lessThan', 63)
+        })
+    })
+})
+
+const compareImages = (realFile: string, compareFile: string, diffFile: string): Cypress.Chainable<number> => {
+    return cy.fixture('images/'+compareFile, null).then((compareDate: Uint8Array)=> {
+        return cy.readFile('cypress/screenshots/compareFile/'+realFile, null).then((realData: Uint8Array) =>{
+
+            const a =  PNG.sync.read(realData);
+            const b = PNG.sync.read(compareDate);
+            const {width, height} = a;
+            const diff = new PNG({width, height});
+            const diffPixel = pixelmatch(a.data, b.data, diff.data, width, height, {});
+            return cy.writeFile('cypress/screenshots/compareFile/'+diffFile, PNG.sync.write(diff).toString('binary'), { encoding: 'binary' }).then(()=>{
+                return diffPixel
+            })
+
+        })
+    })
+}

cypress/fixtures/drawCanvas.html

@@ -0,0 +1,155 @@
+<!-- Thanks to https://stackoverflow.com/a/8398189/4528081 -->
+<html lang="en">
+<script type="text/javascript">
+    let canvas, ctx, flag = false,
+        prevX = 0,
+        currX = 0,
+        prevY = 0,
+        currY = 0,
+        dot_flag = false;
+
+    let x = "black",
+        y = 2;
+
+    function init() {
+        canvas = document.getElementById('can');
+        ctx = canvas.getContext("2d");
+        w = canvas.width;
+        h = canvas.height;
+
+        canvas.addEventListener("mousemove", function (e) {
+            findxy('move', e)
+        }, false);
+        canvas.addEventListener("mousedown", function (e) {
+            findxy('down', e)
+        }, false);
+        canvas.addEventListener("mouseup", function (e) {
+            findxy('up', e)
+        }, false);
+        canvas.addEventListener("mouseout", function (e) {
+            findxy('out', e)
+        }, false);
+
+        canvas.addEventListener("pointermove", function (e) {
+            findxy('move', e)
+        }, false);
+        canvas.addEventListener("pointerdown", function (e) {
+            findxy('down', e)
+        }, false);
+        canvas.addEventListener("pointerup", function (e) {
+            findxy('up', e)
+        }, false);
+        canvas.addEventListener("pointerout", function (e) {
+            findxy('out', e)
+        }, false);
+
+    }
+
+    function color(obj) {
+        switch (obj.id) {
+            case "green":
+                x = "green";
+                break;
+            case "blue":
+                x = "blue";
+                break;
+            case "red":
+                x = "red";
+                break;
+            case "yellow":
+                x = "yellow";
+                break;
+            case "orange":
+                x = "orange";
+                break;
+            case "black":
+                x = "black";
+                break;
+            case "white":
+                x = "white";
+                break;
+        }
+        if (x === "white") y = 14;
+        else y = 2;
+
+    }
+
+    function draw() {
+        ctx.beginPath();
+        ctx.moveTo(prevX, prevY);
+        ctx.lineTo(currX, currY);
+        ctx.strokeStyle = x;
+        ctx.lineWidth = y;
+        ctx.stroke();
+        ctx.closePath();
+    }
+
+    function erase() {
+        ctx.clearRect(0, 0, w, h);
+    }
+
+
+    function findxy(res, e) {
+        const w = e.width ? e.width : 3;
+        const h = e.height ? e.height : 3;
+        if (res === 'down') {
+            prevX = currX;
+            prevY = currY;
+            currX = e.clientX - canvas.offsetLeft;
+            currY = e.clientY - canvas.offsetTop;
+
+            flag = true;
+            dot_flag = true;
+            if (dot_flag) {
+                ctx.beginPath();
+                ctx.fillStyle = x;
+                ctx.fillRect(currX, currY, w, h);
+                ctx.closePath();
+                dot_flag = false;
+            }
+        }
+        if (res === 'up' || res === "out") {
+            flag = false;
+        }
+        if (res === 'move') {
+            if (flag) {
+                prevX = currX;
+                prevY = currY;
+                currX = e.clientX - canvas.offsetLeft;
+                currY = e.clientY - canvas.offsetTop;
+                draw();
+            }
+        }
+    }
+</script>
+<head>
+    <style>
+        .grid-container {
+            display: inline-grid;
+        }
+    </style>
+    <title>Draw Canvas</title>
+</head>
+<body onload="init()">
+<div class="grid-container">
+
+    <div class="grid-item">
+        <div  style="top:12%;left:43%;">Choose Color</div>
+        <div  style="top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
+        <div  style="top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
+        <div  style="top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
+        <div  style="top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
+        <div  style="top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
+        <div style="top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
+    </div>
+    <canvas class="grid-item" id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
+    <div class="grid-item">
+        <div style="top:20%;left:43%;">Eraser</div>
+        <div style="top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
+    </div>
+
+    <input class="grid-item" type="button" value="clear" id="clr" size="23" onclick="erase()" style="top:55%;left:15%;">
+</div>
+
+</body>
+</html>

package.json

@@ -21,6 +21,7 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-no-only-tests": "^3.0.0",
     "fs-extra": "^9.0.1",
+    "pixelmatch": "^5.3.0",
     "semantic-release": "^17.3.0",
     "typedoc": "^0.22.10",
     "typedoc-plugin-markdown": "^3.0.11",
@@ -35,4 +36,4 @@
       "main"
     ]
   }
-}
+}

src/commands/mouseMove.ts

@@ -44,11 +44,11 @@ export async function realMouseMove(
   log.snapshot("before");
   await fireCdpCommand("Input.dispatchMouseEvent", {
     type: "mouseMoved",
-    x: x + basePosition.x,
-    y: y + basePosition.y,
+    x: x * basePosition.frameScale + basePosition.x,
+    y: y * basePosition.frameScale + basePosition.y,
   });
 
   log.snapshot("after").end();
 
   return subject;
-}
+}

src/commands/realSwipe.ts

@@ -98,8 +98,8 @@ export async function realSwipe(
 
   const length = options.length ?? 10;
   const step = options.step ?? 10;
-  const startPosition = getCypressElementCoordinates(subject, position);
-
+  const elementCoordinates = getCypressElementCoordinates(subject, position);
+  const startPosition = {x: elementCoordinates.x, y: elementCoordinates.y} ;
   const log = Cypress.log({
     $el: subject,
     name: "realSwipe",
@@ -139,4 +139,4 @@ export async function realSwipe(
   log.snapshot("after").end();
 
   return subject;
-}
+}

src/commands/realTouch.ts

@@ -46,10 +46,13 @@ export async function realTouch(
   const position = typeof options.x === 'number' || typeof options.y === 'number'
     ? { x: options.x || 0, y: options.y || 0 }
     : options.position;
-  const radiusX = options.radiusX || options.radius || 1
-  const radiusY = options.radiusY || options.radius || 1
 
-  const elementPoint = getCypressElementCoordinates(subject, position);
+  const elementCoordinates = getCypressElementCoordinates(subject, position);
+  const elementPoint = {x: elementCoordinates.x, y: elementCoordinates.y}
+  const radiusX = (options.radiusX || options.radius || 1)
+  const radiusY = (options.radiusY || options.radius || 1)
+
+
 
   const log = Cypress.log({
     $el: subject,
@@ -85,4 +88,4 @@ export async function realTouch(
   log.snapshot("after").end();
 
   return subject;
-}
+}