puppeteer/test/emulation.spec.js

355 lines
12 KiB
JavaScript
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.
*/
const expect = require('expect');
2020-05-07 10:54:55 +00:00
const {
getTestState,
setupTestBrowserHooks,
setupTestPageAndContextHooks,
} = require('./mocha-utils');
describe('Emulation', () => {
setupTestBrowserHooks();
setupTestPageAndContextHooks();
let iPhone;
let iPhoneLandscape;
before(() => {
2020-05-07 10:54:55 +00:00
const { puppeteer } = getTestState();
iPhone = puppeteer.devices['iPhone 6'];
iPhoneLandscape = puppeteer.devices['iPhone 6 landscape'];
});
2020-05-07 10:54:55 +00:00
describe('Page.viewport', function () {
it('should get the proper viewport size', async () => {
const { page } = getTestState();
2020-05-07 10:54:55 +00:00
expect(page.viewport()).toEqual({ width: 800, height: 600 });
await page.setViewport({ width: 123, height: 456 });
expect(page.viewport()).toEqual({ width: 123, height: 456 });
});
2020-05-07 10:54:55 +00:00
it('should support mobile emulation', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/mobile.html');
expect(await page.evaluate(() => window.innerWidth)).toBe(800);
await page.setViewport(iPhone.viewport);
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
2020-05-07 10:54:55 +00:00
await page.setViewport({ width: 400, height: 300 });
expect(await page.evaluate(() => window.innerWidth)).toBe(400);
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should support touch emulation', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/mobile.html');
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
await page.setViewport(iPhone.viewport);
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(true);
expect(await page.evaluate(dispatchTouch)).toBe('Received touch');
2020-05-07 10:54:55 +00:00
await page.setViewport({ width: 100, height: 100 });
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
function dispatchTouch() {
let fulfill;
2020-05-07 10:54:55 +00:00
const promise = new Promise((x) => (fulfill = x));
window.ontouchstart = function (e) {
fulfill('Received touch');
};
window.dispatchEvent(new Event('touchstart'));
fulfill('Did not receive touch');
return promise;
}
});
2020-05-07 10:54:55 +00:00
itFailsFirefox('should be detectable by Modernizr', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/detect-touch.html');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => document.body.textContent.trim())).toBe(
'NO'
);
await page.setViewport(iPhone.viewport);
await page.goto(server.PREFIX + '/detect-touch.html');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => document.body.textContent.trim())).toBe(
'YES'
);
});
2020-05-07 10:54:55 +00:00
itFailsFirefox(
'should detect touch when applying viewport with touches',
async () => {
const { page, server } = getTestState();
await page.setViewport({ width: 800, height: 600, hasTouch: true });
await page.addScriptTag({ url: server.PREFIX + '/modernizr.js' });
expect(await page.evaluate(() => Modernizr.touchevents)).toBe(true);
}
);
itFailsFirefox('should support landscape emulation', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/mobile.html');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => screen.orientation.type)).toBe(
'portrait-primary'
);
await page.setViewport(iPhoneLandscape.viewport);
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => screen.orientation.type)).toBe(
'landscape-primary'
);
await page.setViewport({ width: 100, height: 100 });
expect(await page.evaluate(() => screen.orientation.type)).toBe(
'portrait-primary'
);
});
});
2020-05-07 10:54:55 +00:00
describe('Page.emulate', function () {
it('should work', async () => {
const { page, server } = getTestState();
await page.goto(server.PREFIX + '/mobile.html');
await page.emulate(iPhone);
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => navigator.userAgent)).toContain(
'iPhone'
);
});
2020-05-07 10:54:55 +00:00
it('should support clicking', async () => {
const { page, server } = getTestState();
await page.emulate(iPhone);
await page.goto(server.PREFIX + '/input/button.html');
const button = await page.$('button');
2020-05-07 10:54:55 +00:00
await page.evaluate(
(button) => (button.style.marginTop = '200px'),
button
);
await button.click();
expect(await page.evaluate(() => result)).toBe('Clicked');
});
});
2020-05-07 10:54:55 +00:00
describe('Page.emulateMedia [deprecated]', function () {
/* emulateMedia is deprecated in favour of emulateMediaType but we
* don't want to remove it from Puppeteer just yet. We can't check
* that emulateMedia === emulateMediaType because when running tests
* with COVERAGE=1 the methods get rewritten. So instead we
* duplicate the tests for emulateMediaType and ensure they pass
* when calling the deprecated emulateMedia method.
*
* If you update these tests, you should update emulateMediaType's
* tests, and vice-versa.
*/
2020-05-07 10:54:55 +00:00
itFailsFirefox('should work', async () => {
const { page } = getTestState();
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
true
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(
false
);
await page.emulateMedia('print');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
false
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
await page.emulateMedia(null);
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
true
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(
false
);
});
2020-05-07 10:54:55 +00:00
it('should throw in case of bad argument', async () => {
const { page } = getTestState();
let error = null;
2020-05-07 10:54:55 +00:00
await page.emulateMedia('bad').catch((error_) => (error = error_));
expect(error.message).toBe('Unsupported media type: bad');
});
});
2020-05-07 10:54:55 +00:00
describe('Page.emulateMediaType', function () {
/* NOTE! Updating these tests? Update the emulateMedia tests above
* too (and see the big comment for why we have these duplicated).
*/
2020-05-07 10:54:55 +00:00
itFailsFirefox('should work', async () => {
const { page } = getTestState();
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
true
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(
false
);
await page.emulateMediaType('print');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
false
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
await page.emulateMediaType(null);
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(
true
);
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(
false
);
});
2020-05-07 10:54:55 +00:00
it('should throw in case of bad argument', async () => {
const { page } = getTestState();
let error = null;
2020-05-07 10:54:55 +00:00
await page.emulateMediaType('bad').catch((error_) => (error = error_));
expect(error.message).toBe('Unsupported media type: bad');
});
});
2020-05-07 10:54:55 +00:00
describe('Page.emulateMediaFeatures', function () {
itFailsFirefox('should work', async () => {
const { page } = getTestState();
await page.emulateMediaFeatures([
2020-05-07 10:54:55 +00:00
{ name: 'prefers-reduced-motion', value: 'reduce' },
]);
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(
() => matchMedia('(prefers-reduced-motion: reduce)').matches
)
).toBe(true);
expect(
await page.evaluate(
() => matchMedia('(prefers-reduced-motion: no-preference)').matches
)
).toBe(false);
await page.emulateMediaFeatures([
2020-05-07 10:54:55 +00:00
{ name: 'prefers-color-scheme', value: 'light' },
]);
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: light)').matches
)
).toBe(true);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: dark)').matches
)
).toBe(false);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: no-preference)').matches
)
).toBe(false);
await page.emulateMediaFeatures([
2020-05-07 10:54:55 +00:00
{ name: 'prefers-color-scheme', value: 'dark' },
]);
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: dark)').matches
)
).toBe(true);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: light)').matches
)
).toBe(false);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: no-preference)').matches
)
).toBe(false);
await page.emulateMediaFeatures([
2020-05-07 10:54:55 +00:00
{ name: 'prefers-reduced-motion', value: 'reduce' },
{ name: 'prefers-color-scheme', value: 'light' },
]);
2020-05-07 10:54:55 +00:00
expect(
await page.evaluate(
() => matchMedia('(prefers-reduced-motion: reduce)').matches
)
).toBe(true);
expect(
await page.evaluate(
() => matchMedia('(prefers-reduced-motion: no-preference)').matches
)
).toBe(false);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: light)').matches
)
).toBe(true);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: dark)').matches
)
).toBe(false);
expect(
await page.evaluate(
() => matchMedia('(prefers-color-scheme: no-preference)').matches
)
).toBe(false);
});
2020-05-07 10:54:55 +00:00
it('should throw in case of bad argument', async () => {
const { page } = getTestState();
let error = null;
2020-05-07 10:54:55 +00:00
await page
.emulateMediaFeatures([{ name: 'bad', value: '' }])
.catch((error_) => (error = error_));
expect(error.message).toBe('Unsupported media feature: bad');
});
});
2020-05-07 10:54:55 +00:00
describeFailsFirefox('Page.emulateTimezone', function () {
it('should work', async () => {
const { page } = getTestState();
page.evaluate(() => {
globalThis.date = new Date(1479579154987);
});
await page.emulateTimezone('America/Jamaica');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => date.toString())).toBe(
'Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)'
);
await page.emulateTimezone('Pacific/Honolulu');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => date.toString())).toBe(
'Sat Nov 19 2016 08:12:34 GMT-1000 (Hawaii-Aleutian Standard Time)'
);
await page.emulateTimezone('America/Buenos_Aires');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => date.toString())).toBe(
'Sat Nov 19 2016 15:12:34 GMT-0300 (Argentina Standard Time)'
);
await page.emulateTimezone('Europe/Berlin');
2020-05-07 10:54:55 +00:00
expect(await page.evaluate(() => date.toString())).toBe(
'Sat Nov 19 2016 19:12:34 GMT+0100 (Central European Standard Time)'
);
});
2020-05-07 10:54:55 +00:00
it('should throw for invalid timezone IDs', async () => {
const { page } = getTestState();
let error = null;
2020-05-07 10:54:55 +00:00
await page.emulateTimezone('Foo/Bar').catch((error_) => (error = error_));
expect(error.message).toBe('Invalid timezone ID: Foo/Bar');
2020-05-07 10:54:55 +00:00
await page.emulateTimezone('Baz/Qux').catch((error_) => (error = error_));
expect(error.message).toBe('Invalid timezone ID: Baz/Qux');
});
});
});