2019-11-19 05:18:28 +03:00
|
|
|
/**
|
|
|
|
* Copyright 2018 Google Inc. All rights reserved.
|
2019-12-11 00:21:51 +03:00
|
|
|
* Modifications copyright (c) Microsoft Corporation.
|
2019-11-19 05:18:28 +03:00
|
|
|
*
|
|
|
|
* 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.
|
|
|
|
*/
|
|
|
|
|
2020-02-11 00:20:13 +03:00
|
|
|
/**
|
|
|
|
* @type {PageTestSuite}
|
|
|
|
*/
|
2020-02-14 02:12:54 +03:00
|
|
|
module.exports.describe = function({testRunner, expect, playwright, headless, FFOX, CHROMIUM, WEBKIT, MAC, WIN}) {
|
2019-11-23 01:46:34 +03:00
|
|
|
const {describe, xdescribe, fdescribe} = testRunner;
|
2019-12-20 02:47:35 +03:00
|
|
|
const {it, fit, xit, dit} = testRunner;
|
2019-11-19 05:18:28 +03:00
|
|
|
const {beforeAll, beforeEach, afterAll, afterEach} = testRunner;
|
|
|
|
const iPhone = playwright.devices['iPhone 6'];
|
|
|
|
const iPhoneLandscape = playwright.devices['iPhone 6 landscape'];
|
|
|
|
|
|
|
|
describe('Page.viewport', function() {
|
|
|
|
it('should get the proper viewport size', async({page, server}) => {
|
2020-02-07 06:02:55 +03:00
|
|
|
expect(page.viewportSize()).toEqual({width: 800, height: 600});
|
|
|
|
await page.setViewportSize({width: 123, height: 456});
|
|
|
|
expect(page.viewportSize()).toEqual({width: 123, height: 456});
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it('should support mobile emulation', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: iPhone.viewport });
|
|
|
|
const page = await context.newPage();
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
|
2020-02-07 06:02:55 +03:00
|
|
|
await page.setViewportSize({width: 400, height: 300});
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(400);
|
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it('should not have touch by default', async({page, server}) => {
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
|
|
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(false);
|
2020-02-07 06:02:55 +03:00
|
|
|
await page.goto(server.PREFIX + '/detect-touch.html');
|
|
|
|
expect(await page.evaluate(() => document.body.textContent.trim())).toBe('NO');
|
|
|
|
});
|
|
|
|
it('should support touch emulation', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: iPhone.viewport });
|
|
|
|
const page = await context.newPage();
|
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(await page.evaluate(() => 'ontouchstart' in window)).toBe(true);
|
|
|
|
expect(await page.evaluate(dispatchTouch)).toBe('Received touch');
|
|
|
|
|
|
|
|
function dispatchTouch() {
|
|
|
|
let fulfill;
|
|
|
|
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-02-07 06:02:55 +03:00
|
|
|
it('should be detectable by Modernizr', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: iPhone.viewport });
|
|
|
|
const page = await context.newPage();
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.goto(server.PREFIX + '/detect-touch.html');
|
|
|
|
expect(await page.evaluate(() => document.body.textContent.trim())).toBe('YES');
|
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it('should detect touch when applying viewport with touches', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: { width: 800, height: 600, isMobile: true } });
|
|
|
|
const page = await context.newPage();
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.addScriptTag({url: server.PREFIX + '/modernizr.js'});
|
|
|
|
expect(await page.evaluate(() => Modernizr.touchevents)).toBe(true);
|
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it.skip(FFOX)('should support landscape emulation', async({newContext, server}) => {
|
|
|
|
const context1 = await newContext({ viewport: iPhone.viewport });
|
|
|
|
const page1 = await context1.newPage();
|
|
|
|
await page1.goto(server.PREFIX + '/mobile.html');
|
|
|
|
expect(await page1.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(false);
|
|
|
|
const context2 = await newContext({ viewport: iPhoneLandscape.viewport });
|
|
|
|
const page2 = await context2.newPage();
|
|
|
|
expect(await page2.evaluate(() => matchMedia('(orientation: landscape)').matches)).toBe(true);
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it.skip(FFOX || WEBKIT)('should fire orientationchange event', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: { width: 300, height: 400, isMobile: true } });
|
|
|
|
const page = await context.newPage();
|
2020-01-03 22:01:13 +03:00
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
|
|
await page.evaluate(() => {
|
|
|
|
window.counter = 0;
|
|
|
|
window.addEventListener('orientationchange', () => console.log(++window.counter));
|
|
|
|
});
|
|
|
|
|
|
|
|
const event1 = page.waitForEvent('console');
|
2020-02-07 06:02:55 +03:00
|
|
|
await page.setViewportSize({width: 400, height: 300});
|
2020-01-03 22:01:13 +03:00
|
|
|
expect((await event1).text()).toBe('1');
|
|
|
|
|
|
|
|
const event2 = page.waitForEvent('console');
|
2020-02-07 06:02:55 +03:00
|
|
|
await page.setViewportSize({width: 300, height: 400});
|
2020-01-03 22:01:13 +03:00
|
|
|
expect((await event2).text()).toBe('2');
|
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it.skip(FFOX)('default mobile viewports to 980 width', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: {width: 320, height: 480, isMobile: true} });
|
|
|
|
const page = await context.newPage();
|
2020-01-09 07:15:30 +03:00
|
|
|
await page.goto(server.PREFIX + '/empty.html');
|
|
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(980);
|
|
|
|
});
|
2020-02-07 06:02:55 +03:00
|
|
|
it.skip(FFOX)('respect meta viewport tag', async({newContext, server}) => {
|
|
|
|
const context = await newContext({ viewport: {width: 320, height: 480, isMobile: true} });
|
|
|
|
const page = await context.newPage();
|
2020-01-09 07:15:30 +03:00
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(320);
|
|
|
|
});
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
describe('Page.emulate', function() {
|
2020-01-10 04:06:06 +03:00
|
|
|
it('should work', async({newPage, server}) => {
|
2019-12-18 23:23:33 +03:00
|
|
|
const page = await newPage({ viewport: iPhone.viewport, userAgent: iPhone.userAgent });
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.goto(server.PREFIX + '/mobile.html');
|
|
|
|
expect(await page.evaluate(() => window.innerWidth)).toBe(375);
|
|
|
|
expect(await page.evaluate(() => navigator.userAgent)).toContain('iPhone');
|
|
|
|
});
|
2020-01-10 04:06:06 +03:00
|
|
|
it('should support clicking', async({newPage, server}) => {
|
2019-12-18 23:23:33 +03:00
|
|
|
const page = await newPage({ viewport: iPhone.viewport, userAgent: iPhone.userAgent });
|
2019-11-19 05:18:28 +03:00
|
|
|
await page.goto(server.PREFIX + '/input/button.html');
|
|
|
|
const button = await page.$('button');
|
|
|
|
await page.evaluate(button => button.style.marginTop = '200px', button);
|
|
|
|
await button.click();
|
|
|
|
expect(await page.evaluate(() => result)).toBe('Clicked');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-12-14 03:36:56 +03:00
|
|
|
describe('Page.emulateMedia type', function() {
|
2019-11-19 05:18:28 +03:00
|
|
|
it('should work', async({page, server}) => {
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
2020-01-06 01:39:16 +03:00
|
|
|
await page.emulateMedia({ media: 'print' });
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
2019-11-22 22:24:56 +03:00
|
|
|
await page.emulateMedia({});
|
2019-11-26 02:00:04 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
2020-01-06 01:39:16 +03:00
|
|
|
await page.emulateMedia({ media: '' });
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
|
|
});
|
2019-11-22 22:24:56 +03:00
|
|
|
it('should throw in case of bad type argument', async({page, server}) => {
|
2019-11-19 05:18:28 +03:00
|
|
|
let error = null;
|
2020-01-06 01:39:16 +03:00
|
|
|
await page.emulateMedia({ media: 'bad' }).catch(e => error = e);
|
|
|
|
expect(error.message).toBe('Unsupported media: bad');
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-12-14 04:34:02 +03:00
|
|
|
describe('Page.emulateMedia colorScheme', function() {
|
2019-11-19 05:18:28 +03:00
|
|
|
it('should work', async({page, server}) => {
|
2019-11-26 02:00:04 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
2019-11-19 05:18:28 +03: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);
|
2019-11-26 02:00:04 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
2019-11-19 05:18:28 +03: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);
|
2019-12-14 04:34:02 +03:00
|
|
|
if (!WEBKIT) {
|
|
|
|
// WebKit will always provide the value.
|
|
|
|
await page.emulateMedia({ colorScheme: 'no-preference' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(true);
|
|
|
|
}
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
|
|
|
it('should throw in case of bad argument', async({page, server}) => {
|
|
|
|
let error = null;
|
2019-11-26 02:00:04 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'bad' }).catch(e => error = e);
|
|
|
|
expect(error.message).toBe('Unsupported color scheme: bad');
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
2020-01-11 02:53:48 +03:00
|
|
|
it.skip(FFOX)('should work during navigation', async({page, server}) => {
|
|
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
|
|
const navigated = page.goto(server.EMPTY_PAGE);
|
|
|
|
for (let i = 0; i < 9; i++) {
|
2020-02-13 03:27:45 +03:00
|
|
|
await Promise.all([
|
|
|
|
page.emulateMedia({ colorScheme: ['dark', 'light'][i & 1] }),
|
|
|
|
new Promise(f => setTimeout(f, 1)),
|
|
|
|
]);
|
2020-01-11 02:53:48 +03:00
|
|
|
}
|
|
|
|
await navigated;
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
|
|
|
|
});
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
|
|
|
|
2020-02-13 04:02:59 +03:00
|
|
|
describe.skip(FFOX)('BrowserContext({timezoneId})', function() {
|
2019-12-18 23:23:33 +03:00
|
|
|
it('should work', async ({ newPage }) => {
|
|
|
|
const func = () => new Date(1479579154987).toString();
|
|
|
|
{
|
|
|
|
const page = await newPage({ timezoneId: 'America/Jamaica' });
|
2020-02-13 08:25:17 +03:00
|
|
|
expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)');
|
2019-12-18 23:23:33 +03:00
|
|
|
}
|
|
|
|
{
|
|
|
|
const page = await newPage({ timezoneId: 'Pacific/Honolulu' });
|
2020-02-13 08:25:17 +03:00
|
|
|
expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 08:12:34 GMT-1000 (Hawaii-Aleutian Standard Time)');
|
2019-12-18 23:23:33 +03:00
|
|
|
}
|
|
|
|
{
|
|
|
|
const page = await newPage({ timezoneId: 'America/Buenos_Aires' });
|
2020-02-13 08:25:17 +03:00
|
|
|
expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 15:12:34 GMT-0300 (Argentina Standard Time)');
|
2019-12-18 23:23:33 +03:00
|
|
|
}
|
|
|
|
{
|
|
|
|
const page = await newPage({ timezoneId: 'Europe/Berlin' });
|
2020-02-13 08:25:17 +03:00
|
|
|
expect(await page.evaluate(func)).toBe('Sat Nov 19 2016 19:12:34 GMT+0100 (Central European Standard Time)');
|
2019-12-18 23:23:33 +03:00
|
|
|
}
|
2019-11-19 05:18:28 +03:00
|
|
|
});
|
|
|
|
|
2019-12-18 23:23:33 +03:00
|
|
|
it('should throw for invalid timezone IDs', async({newPage}) => {
|
2019-11-19 05:18:28 +03:00
|
|
|
let error = null;
|
2019-12-18 23:23:33 +03:00
|
|
|
await newPage({ timezoneId: 'Foo/Bar' }).catch(e => error = e);
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(error.message).toBe('Invalid timezone ID: Foo/Bar');
|
2019-12-18 23:23:33 +03:00
|
|
|
await newPage({ timezoneId: 'Baz/Qux' }).catch(e => error = e);
|
2019-11-19 05:18:28 +03:00
|
|
|
expect(error.message).toBe('Invalid timezone ID: Baz/Qux');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-02-13 23:24:17 +03:00
|
|
|
describe.skip(CHROMIUM || FFOX)('BrowserContext({language})', function() {
|
|
|
|
it('should affect accept-language header', async({newPage, server}) => {
|
2020-02-14 00:37:59 +03:00
|
|
|
const page = await newPage({ locale: 'fr-CH' });
|
2020-02-13 23:24:17 +03:00
|
|
|
const [request] = await Promise.all([
|
|
|
|
server.waitForRequest('/empty.html'),
|
|
|
|
page.goto(server.EMPTY_PAGE),
|
|
|
|
]);
|
2020-02-14 02:12:54 +03:00
|
|
|
expect(request.headers['accept-language'].substr(0, 5)).toBe('fr-CH');
|
|
|
|
});
|
|
|
|
it('should affect navigator.language', async({newPage, server}) => {
|
|
|
|
const page = await newPage({ locale: 'fr-CH' });
|
2020-02-13 23:24:17 +03:00
|
|
|
expect(await page.evaluate(() => navigator.language)).toBe('fr-CH');
|
|
|
|
});
|
|
|
|
it('should format number', async({newPage, server}) => {
|
|
|
|
{
|
|
|
|
const page = await newPage();
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
expect(await page.evaluate(() => (1000000.50).toLocaleString())).toBe('1,000,000.5');
|
|
|
|
}
|
|
|
|
{
|
2020-02-14 00:37:59 +03:00
|
|
|
const page = await newPage({ locale: 'fr-CH' });
|
2020-02-13 23:24:17 +03:00
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2020-02-14 02:12:54 +03:00
|
|
|
const formatted = MAC ? '1\u00A0000\u00A0000,5' : '1\u202F000\u202F000,5';
|
|
|
|
expect(await page.evaluate(() => (1000000.50).toLocaleString())).toBe(formatted);
|
2020-02-13 23:24:17 +03:00
|
|
|
}
|
|
|
|
});
|
|
|
|
it('should format date', async({newPage, server}) => {
|
|
|
|
{
|
|
|
|
const page = await newPage();
|
|
|
|
await page.goto(server.EMPTY_PAGE);
|
2020-02-14 02:12:54 +03:00
|
|
|
const formatted = WIN ? 'Sat Nov 19 2016 10:12:34 GMT-0800 (Pacific Standard Time)' : 'Sat Nov 19 2016 10:12:34 GMT-0800 (PST)';
|
|
|
|
expect(await page.evaluate(() => new Date(1479579154987).toString())).toBe(formatted);
|
2020-02-13 23:24:17 +03:00
|
|
|
}
|
|
|
|
{
|
2020-02-14 00:37:59 +03:00
|
|
|
const page = await newPage({ locale: 'de-de', timezoneId: 'Europe/Berlin' });
|
2020-02-13 23:24:17 +03:00
|
|
|
await page.goto(server.EMPTY_PAGE);
|
|
|
|
expect(await page.evaluate(() => new Date(1479579154987).toString())).toBe(
|
|
|
|
'Sat Nov 19 2016 19:12:34 GMT+0100 (Mitteleuropäische Normalzeit)');
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2020-02-12 06:10:57 +03:00
|
|
|
describe('focus', function() {
|
|
|
|
it.skip(!headless)('should think that it is focused by default', async({page}) => {
|
|
|
|
expect(await page.evaluate('document.hasFocus()')).toBe(true);
|
|
|
|
});
|
|
|
|
});
|
2019-11-19 05:18:28 +03:00
|
|
|
};
|