github/puppeteer
0
0
Fork 0
mirror of https://github.com/puppeteer/puppeteer synced 2024-06-14 14:02:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update touchscreen tests (#11960)

Browse Source
This commit is contained in:
jrandolf 2024-02-21 11:24:36 +01:00 committed by GitHub
parent 70ad3b2448
commit 013bd0b12d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 265 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/puppeteer-core/src/cdp/Input.ts
View File

@ -10,16 +10,16 @@ import type {CDPSession} from '../api/CDPSession.js';
import type {Point} from '../api/ElementHandle.js';
import {
Keyboard,
type KeyDownOptions,
type KeyPressOptions,
Mouse,
MouseButton,
Touchscreen,
type KeyDownOptions,
type KeyPressOptions,
type KeyboardTypeOptions,
type MouseClickOptions,
type MouseMoveOptions,
type MouseOptions,
type MouseWheelOptions,
Touchscreen,
type KeyboardTypeOptions,
} from '../api/Input.js';
import {
_keyDefinitions,
@ -573,6 +573,7 @@ export class CdpTouchscreen extends Touchscreen {
y: Math.round(y),
radiusX: 0.5,
radiusY: 0.5,
force: 0.5,
},
],
modifiers: this.#keyboard._modifiers,
@ -588,6 +589,7 @@ export class CdpTouchscreen extends Touchscreen {
y: Math.round(y),
radiusX: 0.5,
radiusY: 0.5,
force: 0.5,
},
],
modifiers: this.#keyboard._modifiers,

6
test/TestExpectations.json
View File

@ -3287,12 +3287,6 @@
"parameters": ["chrome", "webDriverBiDi"],
"expectations": ["FAIL"]
},
{
"testIdPattern": "[touchscreen.spec] Touchscreen Touchscreen.prototype.touchMove should work",
"platforms": ["darwin", "linux", "win32"],
"parameters": ["cdp", "chrome"],
"expectations": ["FAIL"]
},
{
"testIdPattern": "[touchscreen.spec] Touchscreen Touchscreen.prototype.touchMove should work",
"platforms": ["darwin", "linux", "win32"],

146
test/assets/input/touchscreen.html
View File

@ -4,7 +4,7 @@
<title>Touch test</title>
</head>
<body>
<body style="touch-action: none">
<style>
button {
box-sizing: border-box;
@ -20,103 +20,53 @@
<button>Click target</button>
<script>
var allEvents = [];
globalThis.addEventListener(
"touchstart",
(event) => {
allEvents.push({
type: "touchstart",
touches: [...event.changedTouches].map((touch) => [
touch.clientX,
touch.clientY,
touch.radiusX,
touch.radiusY,
]),
});
},
true,
);
globalThis.addEventListener(
"touchmove",
(event) => {
allEvents.push({
type: "touchmove",
touches: [...event.changedTouches].map((touch) => [
touch.clientX,
touch.clientY,
touch.radiusX,
touch.radiusY,
]),
});
},
true,
);
globalThis.addEventListener(
"touchend",
(event) => {
allEvents.push({
type: "touchend",
touches: [...event.changedTouches].map((touch) => [
touch.clientX,
touch.clientY,
touch.radiusX,
touch.radiusY,
])
});
},
true,
);
globalThis.addEventListener(
"pointerdown",
(event) => {
allEvents.push({
type: "pointerdown",
x: event.x,
y: event.y,
width: event.width,
height: event.height,
});
},
true,
);
globalThis.addEventListener(
"pointermove",
(event) => {
allEvents.push({
type: "pointermove",
x: event.x,
y: event.y,
width: event.width,
height: event.height,
});
},
true,
);
globalThis.addEventListener(
"pointerup",
(event) => {
allEvents.push({
type: "pointerup",
x: event.x,
y: event.y,
width: event.width,
height: event.height,
});
},
true,
);
globalThis.addEventListener(
"click",
(event) => {
allEvents.push({
type: "click",
x: event.x,
y: event.y,
width: event.width,
height: event.height,
});
},
true,
);
for (const name of ["touchstart", "touchmove", "touchend"]) {
globalThis.addEventListener(
name,
(event) => {
allEvents.push({
type: name,
changedTouches: [...event.changedTouches].map((touch) => ({
clientX: touch.clientX,
clientY: touch.clientY,
radiusX: touch.radiusX,
radiusY: touch.radiusY,
force: touch.force,
})),
activeTouches: [...event.touches].map((touch) => ({
clientX: touch.clientX,
clientY: touch.clientY,
radiusX: touch.radiusX,
radiusY: touch.radiusY,
force: touch.force,
})),
});
},
true,
);
}
for (const name of ['pointerdown', 'pointermove', 'pointerup', 'click']) {
globalThis.addEventListener(
name,
(event) => {
allEvents.push({
type: name,
x: event.x,
y: event.y,
width: event.width,
height: event.height,
altitudeAngle: event.altitudeAngle,
azimuthAngle: event.azimuthAngle,
pressure: event.pressure,
pointerType: event.pointerType,
twist: event.twist,
tiltX: event.tiltX,
tiltY: event.tiltY,
});
},
true,
);
}
</script>
</body>
</html>

252
test/src/touchscreen.spec.ts
View File

@ -15,65 +15,235 @@ describe('Touchscreen', () => {
describe('Touchscreen.prototype.tap', () => {
it('should work', async () => {
const {page, server, isHeadless} = await getTestState();
const {page, server} = await getTestState();
await page.goto(server.PREFIX + '/input/touchscreen.html');
await page.tap('button');
expect(
(
await page.evaluate(() => {
return allEvents;
})
).filter(({type}) => {
return type !== 'pointermove' || isHeadless;
await page.evaluate(() => {
return allEvents;
})
).toMatchObject([
{height: 1, type: 'pointerdown', width: 1, x: 5, y: 5},
{touches: [[5, 5, 0.5, 0.5]], type: 'touchstart'},
{height: 1, type: 'pointerup', width: 1, x: 5, y: 5},
{touches: [[5, 5, 0.5, 0.5]], type: 'touchend'},
{height: 1, type: 'click', width: 1, x: 5, y: 5},
{
type: 'pointerdown',
x: 5,
y: 5,
width: 1,
height: 1,
altitudeAngle: Math.PI / 2,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchstart',
changedTouches: [
{clientX: 5, clientY: 5, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 5, clientY: 5, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointerup',
x: 5,
y: 5,
width: 1,
height: 1,
altitudeAngle: Math.PI / 2,
azimuthAngle: 0,
pressure: 0,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchend',
changedTouches: [
{clientX: 5, clientY: 5, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [],
},
{
type: 'click',
x: 5,
y: 5,
width: 1,
height: 1,
altitudeAngle: Math.PI / 2,
azimuthAngle: 0,
pressure: 0,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
]);
});
});
describe('Touchscreen.prototype.touchMove', () => {
it('should work', async () => {
const {page, server, isHeadless} = await getTestState();
const {page, server} = await getTestState();
await page.goto(server.PREFIX + '/input/touchscreen.html');
// Note that touchmoves are sometimes not triggered if consecutive
// touchmoves are less than 15 pixels.
//
// See https://github.com/puppeteer/puppeteer/issues/10836
await page.touchscreen.touchStart(0, 0);
await page.touchscreen.touchMove(10, 10);
await page.touchscreen.touchMove(15.5, 15);
await page.touchscreen.touchMove(20, 20.4);
await page.touchscreen.touchMove(40, 30);
await page.touchscreen.touchMove(15, 15);
await page.touchscreen.touchMove(30.5, 30);
await page.touchscreen.touchMove(50, 45.4);
await page.touchscreen.touchMove(80, 50);
await page.touchscreen.touchEnd();
expect(
(
await page.evaluate(() => {
return allEvents;
})
).filter(({type}) => {
return type !== 'pointermove' || isHeadless;
await page.evaluate(() => {
return allEvents;
})
).toMatchObject(
[
{type: 'pointerdown', x: 0, y: 0, width: 1, height: 1},
{type: 'touchstart', touches: [[0, 0, 0.5, 0.5]]},
{type: 'pointermove', x: 10, y: 10, width: 1, height: 1},
{type: 'touchmove', touches: [[10, 10, 0.5, 0.5]]},
{type: 'pointermove', x: 16, y: 15, width: 1, height: 1},
{type: 'touchmove', touches: [[16, 15, 0.5, 0.5]]},
{type: 'pointermove', x: 20, y: 20, width: 1, height: 1},
{type: 'touchmove', touches: [[20, 20, 0.5, 0.5]]},
{type: 'pointermove', x: 40, y: 30, width: 1, height: 1},
{type: 'touchmove', touches: [[40, 30, 0.5, 0.5]]},
{type: 'pointerup', x: 40, y: 30, width: 1, height: 1},
{type: 'touchend', touches: [[40, 30, 0.5, 0.5]]},
].filter(({type}) => {
return type !== 'pointermove' || isHeadless;
})
);
).toMatchObject([
{
type: 'pointerdown',
x: 0,
y: 0,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchstart',
changedTouches: [
{clientX: 0, clientY: 0, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 0, clientY: 0, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointermove',
x: 15,
y: 15,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchmove',
changedTouches: [
{clientX: 15, clientY: 15, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 15, clientY: 15, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointermove',
x: 31,
y: 30,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchmove',
changedTouches: [
{clientX: 31, clientY: 30, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 31, clientY: 30, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointermove',
x: 50,
y: 45,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchmove',
changedTouches: [
{clientX: 50, clientY: 45, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 50, clientY: 45, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointermove',
x: 80,
y: 50,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0.5,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchmove',
changedTouches: [
{clientX: 80, clientY: 50, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [
{clientX: 80, clientY: 50, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
},
{
type: 'pointerup',
x: 80,
y: 50,
width: 1,
height: 1,
altitudeAngle: 1.5707963267948966,
azimuthAngle: 0,
pressure: 0,
pointerType: 'touch',
twist: 0,
tiltX: 0,
tiltY: 0,
},
{
type: 'touchend',
changedTouches: [
{clientX: 80, clientY: 50, radiusX: 0.5, radiusY: 0.5, force: 0.5},
],
activeTouches: [],
},
]);
});
});
});