Use CDP to set resolution + scale factor in Chrome e2e

packages/server/lib/browsers/protocol.js

@@ -17,13 +17,17 @@ function _getDelayMsForRetry (i) {
   }
 }
 
-function connectAsync (opts) {
+function _connectAsync (opts) {
   return Promise.fromCallback((cb) => {
     connect.createRetryingSocket({
       getDelayMsForRetry: _getDelayMsForRetry,
       ...opts,
     }, cb)
   })
+  .then((sock) => {
+    // can be closed, just needed to test the connection
+    sock.end()
+  })
   .catch((err) => {
     errors.throw('CDP_COULD_NOT_CONNECT', opts.port, err)
   })
@@ -37,7 +41,7 @@ const getWsTargetFor = (port) => {
   debug('Getting WS connection to CRI on port %d', port)
   la(is.port(port), 'expected port number', port)
 
-  return connectAsync({ port })
+  return _connectAsync({ port })
   .tapCatch((err) => {
     debug('failed to connect to CDP %o', { port, err })
   })
@@ -70,6 +74,7 @@ const getWsTargetFor = (port) => {
 }
 
 module.exports = {
+  _connectAsync,
   _getDelayMsForRetry,
   getWsTargetFor,
 }

packages/server/test/support/fixtures/projects/e2e/cypress/plugins/index.js

@@ -1,10 +1,41 @@
+require('@packages/ts/register')
+
 const _ = require('lodash')
+const CDP = require('chrome-remote-interface')
+const protocol = require(`${__dirname}/../../../../lib/browsers/protocol.js`)
 const Jimp = require('jimp')
 const path = require('path')
 const Promise = require('bluebird')
 
 const performance = require('../../../../test/support/helpers/performance')
 
+function setDeviceMetrics (args) {
+  const port = _.chain(args)
+  .find((arg) => arg.startsWith('--remote-debugging-port='))
+  .split('=')
+  .last()
+  .toNumber()
+  .value()
+
+  // run whenever the browser becomes available, not currently a hook for this
+  protocol._connectAsync({ port })
+  .then(() => {
+    return CDP({ port })
+  })
+  .then((client) => {
+    return client.send('Emulation.setDeviceMetricsOverride', {
+      width: 1280,
+      height: 720,
+      deviceScaleFactor: 1,
+      mobile: false,
+      screenWidth: 1280,
+      screenHeight: 720,
+    })
+  })
+
+  return _.constant(args)
+}
+
 module.exports = (on) => {
   // save some time by only reading the originals once
   let cache = {}
@@ -23,6 +54,13 @@ module.exports = (on) => {
     })
   }
 
+  on('before:browser:launch', (browser, args) => {
+    if (browser.family === 'chrome') {
+      // force chrome to 1x and 1280x720
+      return setDeviceMetrics(args)
+    }
+  })
+
   on('task', {
     'returns:undefined' () {},