Skip to content

Commit 12ae8e0

Browse files
dmtrKovalenkodmtrKovalenko
authored
chore: Release 1.11
Release 1.11
2 parents 8532c2f + 43a64d0 commit 12ae8e0

13 files changed

+286
-58
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727

2828
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.
2929

30-
<img src="https://forthebadge.com/images/badges/it-works-why.svg">
30+
## How?
3131

3232
Thanks to [Chrome Devtools Protocol](https://chromedevtools.github.io/devtools-protocol/). Cypress is connecting to CDP for tasks like screenshots, setting viewport, and others. This project utilizes the same connection to fire system events. The event firing system works literally like in puppeteer. And as a result, unlocks such features like **hovering** and **native focus management via Tab**.
3333

‎cypress/e2e/click.cy.ts

+35
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,41 @@ describe("cy.realClick", () => {
7575
cy.get(".navbar-brand").realClick({ button: "right" });
7676
});
7777

78+
it("results in pointerdown events with the default pressure of 0.5", () => {
79+
const handler = cy.stub();
80+
cy.get(".action-btn")
81+
.then(($button) => {
82+
$button[0].addEventListener("pointerdown", (e) =>
83+
handler("pointerdown", e.pressure),
84+
);
85+
$button[0].addEventListener("pointerup", (e) =>
86+
handler("pointerup", e.pressure),
87+
);
88+
})
89+
.realClick();
90+
cy.wrap(handler).should("be.calledWith", "pointerdown", 0.5);
91+
cy.wrap(handler).should("be.calledWith", "pointerup", 0);
92+
});
93+
94+
it("allows for setting pressure of the pointerdown event", () => {
95+
const handler = cy.stub();
96+
cy.get(".action-btn")
97+
.then(($button) => {
98+
$button[0].addEventListener("pointerdown", (e) =>
99+
handler("pointerdown", Math.round(e.pressure * 100) / 100),
100+
);
101+
$button[0].addEventListener("pointerup", (e) =>
102+
handler("pointerup", Math.round(e.pressure * 100) / 100),
103+
);
104+
})
105+
.realClick({ pressure: 0 })
106+
.realClick({ pressure: 0.4 });
107+
cy.wrap(handler)
108+
.should("be.calledWith", "pointerdown", 0)
109+
.should("be.calledWith", "pointerdown", 0.4)
110+
.should("be.calledWith", "pointerup", 0);
111+
});
112+
78113
describe("scroll behavior", () => {
79114
function getScreenEdges() {
80115
const cypressAppWindow =

‎cypress/e2e/modifiers.cy.ts

+38-24
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,48 @@
1-
describe("Events behavior with shiftKey modifier applied", () => {
1+
describe("Events behavior with single modifier applied", () => {
22
beforeEach(() => {
33
cy.visit("./cypress/fixtures/modifiers-test.html");
44
});
55

6-
// NOTE: for some reason after upgrading CI to use Chrome 116 and Cypress 13 this particular test fails
7-
// and only on CI. Figure out if this is a real issue or some version conflict | cypress bug.
8-
//
9-
// @see https://app.circleci.com/pipelines/github/dmtrKovalenko/cypress-real-events/842/workflows/1f98e690-ec69-4dcf-9e0e-3f8eb67dc709/jobs/2332/parallel-runs/0?filterBy=ALL
10-
it.skip("detects shift key modifier on click", () => {
11-
cy.get("#action-button").realClick({ shiftKey: true });
12-
cy.contains("Shift key was pressed");
13-
});
6+
const modifierKeys = ["shiftKey", "altKey", "ctrlKey", "metaKey"];
147

15-
it("detects shift key modifier on hover", () => {
16-
cy.get("#mouse-move-div").realHover({ shiftKey: true });
17-
cy.contains("Shift key was pressed");
18-
});
8+
function createModifierObject(modifierKey: string) {
9+
const options = {};
10+
options[modifierKey] = true;
11+
return options;
12+
}
1913

20-
it("detects shift key modifier on mousedown", () => {
21-
cy.get("#mouse-down-div").realMouseDown({ shiftKey: true });
22-
cy.contains("Shift key was pressed");
23-
});
14+
modifierKeys.forEach((modifierKey) => {
15+
// NOTE: for some reason after upgrading CI to use Chrome 116 and Cypress 13 this particular test fails
16+
// and only on CI. Figure out if this is a real issue or some version conflict | cypress bug.
17+
//
18+
// @see https://app.circleci.com/pipelines/github/dmtrKovalenko/cypress-real-events/842/workflows/1f98e690-ec69-4dcf-9e0e-3f8eb67dc709/jobs/2332/parallel-runs/0?filterBy=ALL
19+
it.skip(`detects ${modifierKey} modifier on click`, () => {
20+
cy.get("#action-button").realClick(createModifierObject(modifierKey));
21+
cy.contains(`${modifierKey} was pressed`);
22+
});
2423

25-
it("detects shift key modifier on mpuseup", () => {
26-
cy.get("#mouse-up-div").realMouseUp({ shiftKey: true });
27-
cy.contains("Shift key was pressed");
28-
});
24+
it(`detects ${modifierKey} modifier on hover`, () => {
25+
cy.get("#mouse-move-div").realHover(createModifierObject(modifierKey));
26+
cy.contains(`${modifierKey} was pressed`);
27+
});
2928

30-
it("detects shift key modifier on mousemove", () => {
31-
cy.get("#mouse-move-div").realMouseMove(100, 50, { shiftKey: true });
32-
cy.contains("Shift key was pressed");
29+
it(`detects ${modifierKey} modifier on mousedown`, () => {
30+
cy.get("#mouse-down-div").realMouseDown(
31+
createModifierObject(modifierKey),
32+
);
33+
cy.contains(`${modifierKey} was pressed`);
34+
});
35+
it(`detects ${modifierKey} modifier on mpuseup`, () => {
36+
cy.get("#mouse-up-div").realMouseUp(createModifierObject(modifierKey));
37+
cy.contains(`${modifierKey} was pressed`);
38+
});
39+
it(`detects ${modifierKey} modifier on mousemove`, () => {
40+
cy.get("#mouse-move-div").realMouseMove(
41+
100,
42+
50,
43+
createModifierObject(modifierKey),
44+
);
45+
cy.contains(`${modifierKey} was pressed`);
46+
});
3347
});
3448
});

‎cypress/e2e/modifiers_combination.cy.ts

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
describe("Events behavior with modifiers combination applied", () => {
2+
beforeEach(() => {
3+
cy.visit("./cypress/fixtures/modifiers-test.html");
4+
});
5+
6+
const modifierKeys = ["shiftKey", "altKey", "ctrlKey"];
7+
8+
function createModifierObject(
9+
modifierKeys: string[],
10+
): Record<string, boolean> {
11+
const options = {};
12+
for (const key of modifierKeys) {
13+
options[key] = true;
14+
}
15+
return options;
16+
}
17+
18+
// NOTE: for some reason after upgrading CI to use Chrome 116 and Cypress 13 this particular test fails
19+
// and only on CI. Figure out if this is a real issue or some version conflict | cypress bug.
20+
//
21+
// @see https://app.circleci.com/pipelines/github/dmtrKovalenko/cypress-real-events/842/workflows/1f98e690-ec69-4dcf-9e0e-3f8eb67dc709/jobs/2332/parallel-runs/0?filterBy=ALL
22+
it.skip(`detects ${modifierKeys} modifiers on click`, () => {
23+
cy.get("#action-button").realClick(createModifierObject(modifierKeys));
24+
for (const key of modifierKeys) {
25+
cy.contains(`${key} was pressed`);
26+
}
27+
});
28+
29+
it(`detects ${modifierKeys} modifiers on hover`, () => {
30+
cy.get("#mouse-move-div").realHover(createModifierObject(modifierKeys));
31+
for (const key of modifierKeys) {
32+
cy.contains(`${key} was pressed`);
33+
}
34+
});
35+
36+
it(`detects ${modifierKeys} modifiers on mousedown`, () => {
37+
cy.get("#mouse-down-div").realMouseDown(createModifierObject(modifierKeys));
38+
for (const key of modifierKeys) {
39+
cy.contains(`${key} was pressed`);
40+
}
41+
});
42+
43+
it(`detects ${modifierKeys} modifiers on mpuseup`, () => {
44+
cy.get("#mouse-up-div").realMouseUp(createModifierObject(modifierKeys));
45+
for (const key of modifierKeys) {
46+
cy.contains(`${key} was pressed`);
47+
}
48+
});
49+
50+
it(`detects ${modifierKeys} modifiers on mousemove`, () => {
51+
cy.get("#mouse-move-div").realMouseMove(
52+
100,
53+
50,
54+
createModifierObject(modifierKeys),
55+
);
56+
for (const key of modifierKeys) {
57+
cy.contains(`${key} was pressed`);
58+
}
59+
});
60+
});

‎cypress/e2e/mouse.cy.ts

+27
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,33 @@ describe("cy.realMouseDown and cy.realMouseUp", () => {
4949
.realMouseUp({ position: "bottomRight" });
5050
});
5151

52+
it("results in pointerdown events with the default pressure of 0.5", () => {
53+
const handler = cy.stub();
54+
cy.get(".action-btn")
55+
.then(($button) => {
56+
$button[0].addEventListener("pointerdown", (e) =>
57+
handler("pointerdown", e.pressure),
58+
);
59+
})
60+
.realMouseDown();
61+
cy.wrap(handler).should("be.calledWith", "pointerdown", 0.5);
62+
});
63+
64+
it("allows for setting pressure of the pointerdown event", () => {
65+
const handler = cy.stub();
66+
cy.get(".action-btn")
67+
.then(($button) => {
68+
$button[0].addEventListener("pointerdown", (e) =>
69+
handler("pointerdown", Math.round(e.pressure * 100) / 100),
70+
);
71+
})
72+
.realMouseDown({ pressure: 0 })
73+
.realMouseDown({ pressure: 0.4 });
74+
cy.wrap(handler)
75+
.should("be.calledWith", "pointerdown", 0)
76+
.should("be.calledWith", "pointerdown", 0.4);
77+
});
78+
5279
describe("options.button", () => {
5380
it("should allow to press down mouse using middle button", (done) => {
5481
cy.get(".action-btn")

‎cypress/fixtures/modifiers-test.html

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<body>
4-
<button id="action-button">Click on me with shift pressed</button>
4+
<button id="action-button">Click on me with modifier(s) (shift/alt/ctrl/meta) pressed</button>
55
<hr />
6-
<div id="mouse-move-div">Hover/mousemove over me with shift pressed</div>
6+
<div id="mouse-move-div">Hover/mousemove over me with modifier(s) (shift/alt/ctrl/meta) pressed</div>
77
<hr />
8-
<div id="mouse-down-div">Initiate mouse down with shift pressed</div>
8+
<div id="mouse-down-div">Initiate mouse down with modifie(s) (shift/alt/ctrl/meta) pressed</div>
99
<hr />
10-
<div id="mouse-up-div">Initiate mouse up with shift pressed</div>
10+
<div id="mouse-up-div">Initiate mouse up with modifier(s) (shift/alt/ctrl/meta) pressed</div>
1111
<hr />
1212

1313
<p id="result"></p>
@@ -17,7 +17,12 @@
1717

1818
function commonHandler(e) {
1919
resultBox.innerHTML = "";
20-
if (e.shiftKey) resultBox.innerHTML = "Shift key was pressed";
20+
const modifiers = ['shiftKey', 'altKey', 'ctrlKey', 'metaKey'];
21+
for (let mod of modifiers) {
22+
if (e[mod]) {
23+
resultBox.innerHTML += `${mod} was pressed<br>`;
24+
}
25+
}
2126
}
2227

2328
document

‎src/commands/mouseDown.ts

+17-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Position,
66
} from "../getCypressElementCoordinates";
77
import { mouseButtonNumbers } from "../mouseButtonNumbers";
8-
import { keyToModifierBitMap } from "../keyToModifierBitMap";
8+
import { getModifiers } from "../getModifiers";
99

1010
export interface realMouseDownOptions {
1111
/** Pointer type for realMouseDown, if "pen" touch simulated */
@@ -39,10 +39,21 @@ export interface realMouseDownOptions {
3939
*/
4040
y?: number;
4141
/**
42-
* Indicates whether the shift key was pressed or not when an event occurred
42+
* Indicates whether any modifier (shiftKey | altKey | ctrlKey | metaKey) was pressed or not when an event occurred
4343
* @example cy.realMouseDown({ shiftKey: true });
4444
*/
4545
shiftKey?: boolean;
46+
altKey?: boolean;
47+
ctrlKey?: boolean;
48+
metaKey?: boolean;
49+
/**
50+
* The normalized pressure, which has a range of [0,1]. It affects the `pressure` property of the triggered
51+
* pointerdown event.
52+
*
53+
* @type {number}
54+
* @default {0.5}
55+
*/
56+
pressure?: number;
4657
}
4758

4859
/** @ignore this, update documentation for this function at index.d.ts */
@@ -68,6 +79,8 @@ export async function realMouseDown(
6879
}),
6980
});
7081

82+
const modifiers = getModifiers(options);
83+
7184
log.snapshot("before");
7285
await fireCdpCommand("Input.dispatchMouseEvent", {
7386
type: "mousePressed",
@@ -77,7 +90,8 @@ export async function realMouseDown(
7790
buttons: mouseButtonNumbers[options.button ?? "left"],
7891
pointerType: options.pointer ?? "mouse",
7992
button: options.button ?? "left",
80-
modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
93+
modifiers: modifiers,
94+
force: options.pressure ?? 0.5,
8195
});
8296

8397
log.snapshot("after").end();

‎src/commands/mouseMove.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
Position,
55
ScrollBehaviorOptions,
66
} from "../getCypressElementCoordinates";
7-
import { keyToModifierBitMap } from "../keyToModifierBitMap";
7+
import { getModifiers } from "../getModifiers";
88

99
export interface RealMouseMoveOptions {
1010
/**
@@ -19,10 +19,13 @@ export interface RealMouseMoveOptions {
1919
*/
2020
scrollBehavior?: ScrollBehaviorOptions;
2121
/**
22-
* Indicates whether the shift key was pressed or not when an event occurred
23-
* @example cy.realMouseMove({ shiftKey: true });
22+
* Indicates whether any modifier (shiftKey | altKey | ctrlKey | metaKey) was pressed or not when an event occurred
23+
* @example cy.realMouseDown({ shiftKey: true });
2424
*/
2525
shiftKey?: boolean;
26+
altKey?: boolean;
27+
ctrlKey?: boolean;
28+
metaKey?: boolean;
2629
}
2730

2831
/** @ignore this, update documentation for this function at index.d.ts */
@@ -47,12 +50,14 @@ export async function realMouseMove(
4750
}),
4851
});
4952

53+
const modifiers = getModifiers(options);
54+
5055
log.snapshot("before");
5156
await fireCdpCommand("Input.dispatchMouseEvent", {
5257
type: "mouseMoved",
5358
x: x * basePosition.frameScale + basePosition.x,
5459
y: y * basePosition.frameScale + basePosition.y,
55-
modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
60+
modifiers: modifiers,
5661
});
5762

5863
log.snapshot("after").end();

‎src/commands/mouseUp.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
Position,
66
} from "../getCypressElementCoordinates";
77
import { mouseButtonNumbers } from "../mouseButtonNumbers";
8-
import { keyToModifierBitMap } from "../keyToModifierBitMap";
8+
import { getModifiers } from "../getModifiers";
99

1010
export interface realMouseUpOptions {
1111
/** Pointer type for realMouseUp, if "pen" touch simulated */
@@ -37,10 +37,13 @@ export interface realMouseUpOptions {
3737
*/
3838
y?: number;
3939
/**
40-
* Indicates whether the shift key was pressed or not when an event occurred
41-
* @example cy.realMouseUp({ shiftKey: true });
40+
* Indicates whether any modifier (shiftKey | altKey | ctrlKey | metaKey) was pressed or not when an event occurred
41+
* @example cy.realMouseDown({ shiftKey: true });
4242
*/
4343
shiftKey?: boolean;
44+
altKey?: boolean;
45+
ctrlKey?: boolean;
46+
metaKey?: boolean;
4447
}
4548

4649
/** @ignore this, update documentation for this function at index.d.ts */
@@ -66,6 +69,8 @@ export async function realMouseUp(
6669
}),
6770
});
6871

72+
const modifiers = getModifiers(options);
73+
6974
log.snapshot("before");
7075
await fireCdpCommand("Input.dispatchMouseEvent", {
7176
type: "mouseReleased",
@@ -75,7 +80,7 @@ export async function realMouseUp(
7580
buttons: mouseButtonNumbers[options.button ?? "left"],
7681
pointerType: options.pointer ?? "mouse",
7782
button: options.button ?? "left",
78-
modifiers: options.shiftKey ? keyToModifierBitMap.Shift : 0,
83+
modifiers: modifiers,
7984
});
8085

8186
log.snapshot("after").end();

0 commit comments

Comments
 (0)