Release 1.7.2

Release 1.7.2

README.md

@@ -217,7 +217,7 @@ cy.realType(text, options);
 
 | Name      | Type    | Default value | Description                                                                                                                           |
 | --------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
-| `text`    | string  | -             | text to type. Should be around the same as cypress's type command argument (https://docs.cypress.io/api/commands/type.html#Arguments) |
+| `text`    | string  | -             | text to type. Should be around the same as cypress's type command argument (https://docs.cypress.io/api/commands/type.html#Arguments. All the keys available [here](https://github.com/dmtrKovalenko/cypress-real-events/blob/main/src/keyCodeDefinitions.ts)  |
 | `options` | Options | {}            |                                                                                                                                       |
 
 Options:
@@ -334,9 +334,7 @@ The easiest way to debug coordinates is to run any real events command and check
 
 ### 1. Why `cy.realHover` hovering state does not show in the visual regression services?
 
-Unfortunately, visual regression services like Happo and Percy do not solve this issue. Their architecture is based on saving dom snapshot, not the screenshot, and then rendering the snapshot on their machines. It means that the hover and focus state will be lost if it won't be serialized manually.
-
-It means that if you will use plain `cy.screenshot` it will take a screenshot with a hovering state because using the browser itself to make a screenshot. Testing hovering state is possible with, for example, [Visual Regression Tracker](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker) and [cypress-image-snapshot](https://github.com/jaredpalmer/cypress-image-snapshot).
+Unfortunately, neither visual regression services like Happo and Percy nor plain cy.screenshot do not allow to test the hovering state. The hovering state is very different from any kind of js and css so it is not possible to capture it using dom snapshotting (like visual regression services do) and the screenshooting as well because cypress core itself is preventing hovering state in the screenshots.
 
 ### 2. When I am doing `cy.realHover` hovering state is not resetting after my checks
 

cypress/e2e/mouse.cy.ts

@@ -349,3 +349,81 @@ describe("realMouseMove", () => {
       .should("eq", "1.8");
   });
 });
+
+describe("canvas drag with realMouseMove", () => {
+  it("realMouseMove accepts every explicit option.position", () => {
+    cy.visit("./cypress/fixtures/canvas-drag-svg.html");
+
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "topLeft" })
+      .realMouseMove(30, 20, { position: "topLeft" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "top" })
+      .realMouseMove(30, 20, { position: "top" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, 10, { position: "topRight" })
+      .realMouseMove(-30, 20, { position: "topRight" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "left" })
+      .realMouseMove(30, 20, { position: "left" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10, { position: "center" })
+      .realMouseMove(30, 20, { position: "center" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, 10, { position: "right" })
+      .realMouseMove(-30, 20, { position: "right" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, -10, { position: "bottomLeft" })
+      .realMouseMove(30, -20, { position: "bottomLeft" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, -10, { position: "bottom" })
+      .realMouseMove(30, -20, { position: "bottom" })
+      .realMouseUp();
+    cy.get("body")
+      .realMouseDown()
+      .realMouseMove(-20, -10, { position: "bottomRight" })
+      .realMouseMove(-30, -20, { position: "bottomRight" })
+      .realMouseUp();
+
+    // If every element is clickable, they are not overlapping.
+    cy.get("polyline").click({multiple: true})
+  });
+
+  it("realMouseMove default option.position is 'topLeft'", () => {
+    /**
+     * The last polyline element should overlap the first, 
+     * so they should have the same `points` attributes
+     * but all other siblings should have unique `points` attributes,
+     * so they should be clickable.
+     */
+      cy.get("body")
+      .realMouseDown()
+      .realMouseMove(20, 10)
+      .realMouseMove(30, 20)
+      .realMouseUp();
+
+      cy.get('svg').within(() => {
+        cy.get(":first").should("have.attr", "points")
+          .then((first) => {
+            cy.get(":first").siblings().click({multiple: true})
+          cy.get(":last").should("have.attr", "points", first)
+        })
+      })
+    })
+
+});

cypress/fixtures/canvas-drag-svg.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <body style="margin: 0px; overflow: hidden; width: 100vw; height: 100vh">
+    <svg id="svg" height="100%" width="100%">
+    </svg>
+    <script>
+      const svg = document.getElementById('svg');
+      let mouseDown = false;
+      let count = 0;
+      let line
+      let coords = []
+      const colors = ["black", "gray", "lightgray", "red", "orange", "gold", "green", "blue", "purple", "violet"]
+
+      svg.addEventListener('mousedown', () => mouseDown = true);
+
+      svg.addEventListener('mousemove', (e) => mouseDown && coords.push([`${e.clientX}, ${e.clientY}`]));
+
+      svg.addEventListener('mouseup', () => {
+        if (coords.length > 1) {
+          line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline')
+          line.setAttribute("points", coords.join(" "))
+          line.setAttribute("stroke", colors[count] || "#000")
+          line.setAttribute("stroke-width", 10)
+          line.setAttribute("fill", "none")
+          svg.appendChild(line)
+          line = null
+          coords = []
+          count++
+        }
+        mouseDown = false
+      });  
+    </script>
+  </body>
+</html>

package.json

@@ -19,7 +19,7 @@
     "cypress": "^10.2.0",
     "eslint": "^7.14.0",
     "eslint-plugin-cypress": "^2.11.2",
-    "eslint-plugin-no-only-tests": "^2.4.0",
+    "eslint-plugin-no-only-tests": "^3.0.0",
     "fs-extra": "^9.0.1",
     "semantic-release": "^17.3.0",
     "typedoc": "^0.22.10",

src/commands/mouseMove.ts

@@ -28,7 +28,7 @@ export async function realMouseMove(
 ) {
   const basePosition= getCypressElementCoordinates(
     subject,
-    "topLeft",
+    options.position ?? "topLeft",
     options.scrollBehavior
   );