puppeteer/test/mouse.spec.ts

243 lines
7.9 KiB
TypeScript
Raw Normal View History

/**
* Copyright 2018 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import os from 'os';
import expect from 'expect';
import {
2020-05-07 10:54:55 +00:00
getTestState,
setupTestBrowserHooks,
setupTestPageAndContextHooks,
itFailsFirefox,
} from './mocha-utils'; // eslint-disable-line import/extensions
import { KeyInput } from '../lib/cjs/puppeteer/common/USKeyboardLayout.js';
interface Dimensions {
x: number;
y: number;
width: number;
height: number;
}
function dimensions(): Dimensions {
const rect = document.querySelector('textarea').getBoundingClientRect();
return {
x: rect.left,
y: rect.top,
width: rect.width,
2020-05-07 10:54:55 +00:00
height: rect.height,
};
}
2020-05-07 10:54:55 +00:00
describe('Mouse', function () {
setupTestBrowserHooks();
setupTestPageAndContextHooks();
2020-05-07 10:54:55 +00:00
it('should click the document', async () => {
const { page } = getTestState();
await page.evaluate(() => {
globalThis.clickPromise = new Promise((resolve) => {
2020-05-07 10:54:55 +00:00
document.addEventListener('click', (event) => {
resolve({
type: event.type,
detail: event.detail,
clientX: event.clientX,
clientY: event.clientY,
isTrusted: event.isTrusted,
2020-05-07 10:54:55 +00:00
button: event.button,
});
});
});
});
await page.mouse.click(50, 60);
const event = await page.evaluate<() => MouseEvent>(
() => globalThis.clickPromise
);
expect(event.type).toBe('click');
expect(event.detail).toBe(1);
expect(event.clientX).toBe(50);
expect(event.clientY).toBe(60);
expect(event.isTrusted).toBe(true);
expect(event.button).toBe(0);
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should resize the textarea', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/input/textarea.html');
const { x, y, width, height } = await page.evaluate<() => Dimensions>(
dimensions
);
const mouse = page.mouse;
await mouse.move(x + width - 4, y + height - 4);
await mouse.down();
await mouse.move(x + width + 100, y + height + 100);
await mouse.up();
const newDimensions = await page.evaluate<() => Dimensions>(dimensions);
expect(newDimensions.width).toBe(Math.round(width + 104));
expect(newDimensions.height).toBe(Math.round(height + 104));
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should select the text with mouse', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/input/textarea.html');
await page.focus('textarea');
2020-05-07 10:54:55 +00:00
const text =
"This is the text that we are going to try to select. Let's see how it goes.";
await page.keyboard.type(text);
// Firefox needs an extra frame here after typing or it will fail to set the scrollTop
await page.evaluate(() => new Promise(requestAnimationFrame));
2020-05-07 10:54:55 +00:00
await page.evaluate(
() => (document.querySelector('textarea').scrollTop = 0)
);
const { x, y } = await page.evaluate(dimensions);
await page.mouse.move(x + 2, y + 2);
await page.mouse.down();
2020-05-07 10:54:55 +00:00
await page.mouse.move(100, 100);
await page.mouse.up();
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(() => {
const textarea = document.querySelector('textarea');
return textarea.value.substring(
textarea.selectionStart,
textarea.selectionEnd
);
})
).toBe(text);
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should trigger hover state', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/input/scrollable.html');
await page.hover('#button-6');
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(() => document.querySelector('button:hover').id)
).toBe('button-6');
await page.hover('#button-2');
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(() => document.querySelector('button:hover').id)
).toBe('button-2');
await page.hover('#button-91');
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(() => document.querySelector('button:hover').id)
).toBe('button-91');
});
2020-05-07 10:54:55 +00:00
itFailsFirefox(
'should trigger hover state with removed window.Node',
async () => {
const { page, server } = getTestState();
2020-05-07 10:54:55 +00:00
await page.goto(server.PREFIX + '/input/scrollable.html');
await page.evaluate(() => delete window.Node);
await page.hover('#button-6');
expect(
await page.evaluate(() => document.querySelector('button:hover').id)
).toBe('button-6');
}
);
it('should set modifier keys on click', async () => {
const { page, server, isFirefox } = getTestState();
await page.goto(server.PREFIX + '/input/scrollable.html');
2020-05-07 10:54:55 +00:00
await page.evaluate(() =>
document
.querySelector('#button-3')
.addEventListener('mousedown', (e) => (globalThis.lastEvent = e), true)
2020-05-07 10:54:55 +00:00
);
const modifiers = new Map<KeyInput, string>([
['Shift', 'shiftKey'],
['Control', 'ctrlKey'],
['Alt', 'altKey'],
['Meta', 'metaKey'],
]);
// In Firefox, the Meta modifier only exists on Mac
2020-05-07 10:54:55 +00:00
if (isFirefox && os.platform() !== 'darwin') delete modifiers['Meta'];
for (const [modifier, key] of modifiers) {
await page.keyboard.down(modifier);
await page.click('#button-3');
if (
!(await page.evaluate((mod: string) => globalThis.lastEvent[mod], key))
)
throw new Error(key + ' should be true');
await page.keyboard.up(modifier);
}
await page.click('#button-3');
for (const [modifier, key] of modifiers) {
if (await page.evaluate((mod: string) => globalThis.lastEvent[mod], key))
throw new Error(modifiers[modifier] + ' should be false');
}
});
2020-07-06 07:27:17 +00:00
itFailsFirefox('should send mouse wheel events', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/input/wheel.html');
const elem = await page.$('div');
const boundingBoxBefore = await elem.boundingBox();
expect(boundingBoxBefore).toMatchObject({
width: 115,
height: 115,
});
await page.mouse.move(
boundingBoxBefore.x + boundingBoxBefore.width / 2,
boundingBoxBefore.y + boundingBoxBefore.height / 2
);
await page.mouse.wheel({ deltaY: -100 });
const boundingBoxAfter = await elem.boundingBox();
expect(boundingBoxAfter).toMatchObject({
width: 230,
height: 230,
});
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should tween mouse movement', async () => {
const { page } = getTestState();
await page.mouse.move(100, 100);
await page.evaluate(() => {
globalThis.result = [];
2020-05-07 10:54:55 +00:00
document.addEventListener('mousemove', (event) => {
globalThis.result.push([event.clientX, event.clientY]);
});
});
2020-05-07 10:54:55 +00:00
await page.mouse.move(200, 300, { steps: 5 });
expect(await page.evaluate('result')).toEqual([
[120, 140],
[140, 180],
[160, 220],
[180, 260],
2020-05-07 10:54:55 +00:00
[200, 300],
]);
});
// @see https://crbug.com/929806
2020-05-07 10:54:55 +00:00
itFailsFirefox(
'should work with mobile viewports and cross process navigations',
async () => {
const { page, server } = getTestState();
2020-05-07 10:54:55 +00:00
await page.goto(server.EMPTY_PAGE);
await page.setViewport({ width: 360, height: 640, isMobile: true });
await page.goto(server.CROSS_PROCESS_PREFIX + '/mobile.html');
await page.evaluate(() => {
document.addEventListener('click', (event) => {
globalThis.result = { x: event.clientX, y: event.clientY };
2020-05-07 10:54:55 +00:00
});
});
2020-05-07 10:54:55 +00:00
await page.mouse.click(30, 40);
2020-05-07 10:54:55 +00:00
expect(await page.evaluate('result')).toEqual({ x: 30, y: 40 });
}
);
});