feat(viewport): update defaults to 1280x720, fix Firefox (#1038)

docs/api.md

@@ -184,7 +184,7 @@ Indicates that the browser is connected.
 - `options` <[Object]>
   - `ignoreHTTPSErrors` <?[boolean]> Whether to ignore HTTPS errors during navigation. Defaults to `false`.
   - `bypassCSP` <?[boolean]> Toggles bypassing page's Content-Security-Policy.
-  - `viewport` <?[Object]> Sets a consistent viewport for each page. Defaults to an 800x600 viewport. `null` disables the default viewport.
+  - `viewport` <?[Object]> 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` <?[boolean]> Whether to ignore HTTPS errors during navigation. Defaults to `false`.
   - `bypassCSP` <?[boolean]> Toggles bypassing page's Content-Security-Policy.
-  - `viewport` <?[Object]> Sets a consistent viewport for each page. Defaults to an 800x600 viewport. `null` disables the default viewport.
+  - `viewport` <?[Object]> 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`.

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)

src/firefox/ffBrowser.ts

@@ -67,13 +67,23 @@ export class FFBrowser extends platform.EventEmitter implements Browser {
   }
 
   async newContext(options: BrowserContextOptions = {}): Promise<BrowserContext> {
-    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,

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 });