Skip to content

Commit 04b8a35

Browse files
DolevBitrandmtrKovalenko
DolevBitran
and
dmtrKovalenko
authored
feat: db.realMouseMove command (#223)
* init * Update mouseMove.ts * fix event error * fix pr * fix viewport for test * Change assertion type Co-authored-by: Dmitriy <dmtr.kovalenko@outlook.com>
1 parent 2f6d1ed commit 04b8a35

File tree

6 files changed

+539
-294
lines changed

6 files changed

+539
-294
lines changed

‎README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -299,6 +299,26 @@ Options:
299299
- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
300300
- `Optional` **button**: "left" | "middle" | "right" | "back" | "forward" | "none"
301301

302+
## cy.realMouseMove
303+
304+
Fires native system mouseMoved event. Moves mouse inside a subject to the provided amount of coordinates from top left corner (adjustable with position option.)
305+
306+
```jsx
307+
cy.get("sector").realMouseMove(x, y);
308+
cy.get("sector").realMouseMove(x, y, options);
309+
```
310+
311+
Example:
312+
313+
```js
314+
cy.get("sector").realMouseUp(50, 50, { position: "center" }); // moves by 50px x and y from center of sector
315+
```
316+
317+
Options:
318+
319+
- `Optional` **position**: "topLeft" | "top" | "topRight" | "left" | "center" | "right" | "bottomLeft" | "bottom" | "bottomRight"
320+
- `Optional` **scrollBehavior**: "center" | "top" | "bottom" | "nearest" | false
321+
302322
## Coordinates
303323

304324
Several commands from this plugin accept `{ x: number, y: number }` coordinates. There is an important note that these coordinates are relative to the whole tab to pass it right to the CDP. For regular elements, we calculate them automatically, but if you need to pass absolute coordinates you will need to provide them yourself.

‎cypress/fixtures/mouse-move.html‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<body>
4+
<main>
5+
<div class="background" id="item">
6+
<h1 id="text1">Press click active zoom</h1>
7+
<h1 id="text2">Press double click desactive zoom</h1>
8+
</div>
9+
</main>
10+
</body>
11+
12+
<script>
13+
let x = 0;
14+
let y = 0;
15+
const image = document.getElementById("item");
16+
const base = document.getElementById("base");
17+
const dimension = image.getBoundingClientRect();
18+
const text1 = document.getElementById("text1");
19+
const text2 = document.getElementById("text2");
20+
text2.style.setProperty("opacity", 0);
21+
text1.style.setProperty("opacity", 0.2);
22+
23+
function MouseMove(e) {
24+
x = e.clientX - (dimension.left + Math.floor(dimension.width / 2));
25+
y = e.clientY - (dimension.top + Math.floor(dimension.height / 2));
26+
27+
// inverte o translate
28+
x = x - x * 3;
29+
y = y - y * 3;
30+
31+
console.log(x, "x");
32+
console.log(y, "y");
33+
34+
image.style.setProperty("--scale", 1.8);
35+
image.style.setProperty("--x", Math.floor(x / 2) + "px");
36+
image.style.setProperty("--y", Math.floor(y / 2) + "px");
37+
}
38+
39+
image.addEventListener("click", function (e) {
40+
image.style.setProperty("--scale", 1.6);
41+
image.addEventListener("mousemove", MouseMove);
42+
text1.style.setProperty("opacity", 0);
43+
text2.style.setProperty("opacity", 0.2);
44+
});
45+
46+
image.addEventListener("dblclick", function (e) {
47+
image.style.setProperty("--scale", 1);
48+
image.style.setProperty("--x", 0 + "px");
49+
image.style.setProperty("--y", 0 + "px");
50+
text1.style.setProperty("opacity", 0.2);
51+
text2.style.setProperty("opacity", 0);
52+
image.removeEventListener("mousemove", MouseMove, false);
53+
});
54+
</script>
55+
56+
<style>
57+
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;600;900&display=swap");
58+
59+
:root {
60+
--scale: 1.2
61+
--y: 0;
62+
--x: 0;
63+
--light: #fff;
64+
}
65+
66+
* {
67+
box-sizing: border-box;
68+
outline: none;
69+
-webkit-tap-highlight-color: transparent;
70+
user-select: none;
71+
-webkit-user-drag: none;
72+
font-family: "Jost", sans-serif;
73+
}
74+
75+
body {
76+
padding: 0;
77+
margin: 0;
78+
overflow: hidden;
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
min-height: 100vh;
83+
cursor: url("https://cdn-icons-png.flaticon.com/24/3603/3603748.png") 4 12,
84+
auto;
85+
font-family: "Jost", sans-serif;
86+
background: #000;
87+
88+
}
89+
.background {
90+
z-index: 500;
91+
width: 100vw;
92+
height: 100vh;
93+
background: black;
94+
background-image: url('https://wallpapercave.com/wp/wp4676582.jpg');
95+
background-size: cover;
96+
transform: translateX(var(--x)) translateY(var(--y)) scale(var(--scale));
97+
transition: ease-out 0.5s;
98+
position: relative;
99+
overflow: hidden;
100+
display: flex;
101+
justify-content: center;
102+
align-items: center;
103+
}
104+
105+
h1 {
106+
font-size: 4em;
107+
position: absolute;
108+
color: var(--light);
109+
font-weight: 600;
110+
}
111+
</style>
112+
</html>

0 commit comments

Comments
 (0)