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

6
test/TestExpectations.json
View File

@ -3287,12 +3287,6 @@
"parameters": ["chrome", "webDriverBiDi"], "parameters": ["chrome", "webDriverBiDi"],
"expectations": ["FAIL"] "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", "testIdPattern": "[touchscreen.spec] Touchscreen Touchscreen.prototype.touchMove should work",
"platforms": ["darwin", "linux", "win32"], "platforms": ["darwin", "linux", "win32"],

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

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

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

@ -15,65 +15,235 @@ describe('Touchscreen', () => {
describe('Touchscreen.prototype.tap', () => { describe('Touchscreen.prototype.tap', () => {
it('should work', async () => { 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.goto(server.PREFIX + '/input/touchscreen.html');
await page.tap('button'); await page.tap('button');
expect( expect(
( await page.evaluate(() => {
await page.evaluate(() => { return allEvents;
return allEvents;
})
).filter(({type}) => {
return type !== 'pointermove' || isHeadless;
}) })
).toMatchObject([ ).toMatchObject([
{height: 1, type: 'pointerdown', width: 1, x: 5, y: 5}, {
{touches: [[5, 5, 0.5, 0.5]], type: 'touchstart'}, type: 'pointerdown',
{height: 1, type: 'pointerup', width: 1, x: 5, y: 5}, x: 5,
{touches: [[5, 5, 0.5, 0.5]], type: 'touchend'}, y: 5,
{height: 1, type: 'click', width: 1, 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', () => { describe('Touchscreen.prototype.touchMove', () => {
it('should work', async () => { 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.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.touchStart(0, 0);
await page.touchscreen.touchMove(10, 10); await page.touchscreen.touchMove(15, 15);
await page.touchscreen.touchMove(15.5, 15); await page.touchscreen.touchMove(30.5, 30);
await page.touchscreen.touchMove(20, 20.4); await page.touchscreen.touchMove(50, 45.4);
await page.touchscreen.touchMove(40, 30); await page.touchscreen.touchMove(80, 50);
await page.touchscreen.touchEnd(); await page.touchscreen.touchEnd();
expect( expect(
( await page.evaluate(() => {
await page.evaluate(() => { return allEvents;
return allEvents;
})
).filter(({type}) => {
return type !== 'pointermove' || isHeadless;
}) })
).toMatchObject( ).toMatchObject([
[ {
{type: 'pointerdown', x: 0, y: 0, width: 1, height: 1}, type: 'pointerdown',
{type: 'touchstart', touches: [[0, 0, 0.5, 0.5]]}, x: 0,
{type: 'pointermove', x: 10, y: 10, width: 1, height: 1}, y: 0,
{type: 'touchmove', touches: [[10, 10, 0.5, 0.5]]}, width: 1,
{type: 'pointermove', x: 16, y: 15, width: 1, height: 1}, height: 1,
{type: 'touchmove', touches: [[16, 15, 0.5, 0.5]]}, altitudeAngle: 1.5707963267948966,
{type: 'pointermove', x: 20, y: 20, width: 1, height: 1}, azimuthAngle: 0,
{type: 'touchmove', touches: [[20, 20, 0.5, 0.5]]}, pressure: 0.5,
{type: 'pointermove', x: 40, y: 30, width: 1, height: 1}, pointerType: 'touch',
{type: 'touchmove', touches: [[40, 30, 0.5, 0.5]]}, twist: 0,
{type: 'pointerup', x: 40, y: 30, width: 1, height: 1}, tiltX: 0,
{type: 'touchend', touches: [[40, 30, 0.5, 0.5]]}, tiltY: 0,
].filter(({type}) => { },
return type !== 'pointermove' || isHeadless; {
}) 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: [],
},
]);
}); });
}); });
}); });