From 1ee657823e2ef86e9b7e883180c28111a7f92ae1 Mon Sep 17 00:00:00 2001 From: Pavel Feldman Date: Tue, 18 Feb 2020 09:16:32 -0800 Subject: [PATCH] feat(viewport): update defaults to 1280x720, fix Firefox (#1038) --- docs/api.md | 4 ++-- src/browserContext.ts | 2 +- src/firefox/ffBrowser.ts | 24 +++++++++++++++++------- test/emulation.spec.js | 11 +++++++++-- 4 files changed, 29 insertions(+), 12 deletions(-) diff --git a/docs/api.md b/docs/api.md index 0a36c69d9b..41ce16ab69 100644 --- a/docs/api.md +++ b/docs/api.md @@ -184,7 +184,7 @@ Indicates that the browser is connected. - `options` <[Object]> - `ignoreHTTPSErrors` Whether to ignore HTTPS errors during navigation. Defaults to `false`. - `bypassCSP` Toggles bypassing page's Content-Security-Policy. - - `viewport` Sets a consistent viewport for each page. Defaults to an 800x600 viewport. `null` disables the default viewport. + - `viewport` Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport. - `width` <[number]> page width in pixels. - `height` <[number]> page height in pixels. - `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`. @@ -217,7 +217,7 @@ Creates a new browser context. It won't share cookies/cache with other browser c - `options` <[Object]> - `ignoreHTTPSErrors` Whether to ignore HTTPS errors during navigation. Defaults to `false`. - `bypassCSP` Toggles bypassing page's Content-Security-Policy. - - `viewport` Sets a consistent viewport for each page. Defaults to an 800x600 viewport. `null` disables the default viewport. + - `viewport` Sets a consistent viewport for each page. Defaults to an 1280x720 viewport. `null` disables the default viewport. - `width` <[number]> page width in pixels. - `height` <[number]> page height in pixels. - `deviceScaleFactor` <[number]> Specify device scale factor (can be thought of as dpr). Defaults to `1`. diff --git a/src/browserContext.ts b/src/browserContext.ts index 39ac5859c5..346a9d92f3 100644 --- a/src/browserContext.ts +++ b/src/browserContext.ts @@ -63,7 +63,7 @@ export class BrowserContext extends platform.EventEmitter { this._timeoutSettings = new TimeoutSettings(); this._options = { ...options }; if (!this._options.viewport && this._options.viewport !== null) - this._options.viewport = { width: 800, height: 600 }; + this._options.viewport = { width: 1280, height: 720 }; if (this._options.viewport) this._options.viewport = { ...this._options.viewport }; if (this._options.geolocation) diff --git a/src/firefox/ffBrowser.ts b/src/firefox/ffBrowser.ts index 578aeee12f..a684efd336 100644 --- a/src/firefox/ffBrowser.ts +++ b/src/firefox/ffBrowser.ts @@ -67,13 +67,23 @@ export class FFBrowser extends platform.EventEmitter implements Browser { } async newContext(options: BrowserContextOptions = {}): Promise { - const viewport = options.viewport ? { - viewportSize: { width: options.viewport.width, height: options.viewport.height }, - isMobile: !!options.viewport.isMobile, - deviceScaleFactor: options.viewport.deviceScaleFactor || 1, - hasTouch: !!options.viewport.isMobile, - } : undefined; - const {browserContextId} = await this._connection.send('Target.createBrowserContext', { + let viewport; + if (options.viewport) { + viewport = { + viewportSize: { width: options.viewport.width, height: options.viewport.height }, + isMobile: !!options.viewport.isMobile, + deviceScaleFactor: options.viewport.deviceScaleFactor || 1, + hasTouch: !!options.viewport.isMobile, + }; + } else if (options.viewport !== null) { + viewport = { + viewportSize: { width: 1280, height: 720 }, + isMobile: false, + deviceScaleFactor: 1, + hasTouch: false, + }; + } + const { browserContextId } = await this._connection.send('Target.createBrowserContext', { userAgent: options.userAgent, bypassCSP: options.bypassCSP, javaScriptDisabled: options.javaScriptEnabled === false ? true : undefined, diff --git a/test/emulation.spec.js b/test/emulation.spec.js index 9c50f56a0b..c7fea1b257 100644 --- a/test/emulation.spec.js +++ b/test/emulation.spec.js @@ -25,11 +25,18 @@ module.exports.describe = function({testRunner, expect, playwright, headless, FF const iPhone = playwright.devices['iPhone 6']; const iPhoneLandscape = playwright.devices['iPhone 6 landscape']; - describe('Page.viewport', function() { + describe('BrowserContext({viewport})', function() { it('should get the proper viewport size', async({page, server}) => { - expect(page.viewportSize()).toEqual({width: 800, height: 600}); + expect(page.viewportSize()).toEqual({width: 1280, height: 720}); + expect(await page.evaluate(() => window.innerWidth)).toBe(1280); + expect(await page.evaluate(() => window.innerHeight)).toBe(720); + }); + it('should set the proper viewport size', async({page, server}) => { + expect(page.viewportSize()).toEqual({width: 1280, height: 720}); await page.setViewportSize({width: 123, height: 456}); expect(page.viewportSize()).toEqual({width: 123, height: 456}); + expect(await page.evaluate(() => window.innerWidth)).toBe(123); + expect(await page.evaluate(() => window.innerHeight)).toBe(456); }); it('should support mobile emulation', async({newContext, server}) => { const context = await newContext({ viewport: iPhone.viewport });