Engine options update (#584)

* add engineOptions to config Enables setting/overriding of Chromy options. **Please note:** - Setting `port` is way not advised. - Setting `--window-size` will override values used in your viewport settings. * Update README.md * Update README.md * Update README.md * add engineOptions to config Enables setting/overriding of Chromy options. **Please note:** - Setting `port` is way not advised. - Setting `--window-size` will override values used in your viewport settings. * fix chromy options issue * fix chromy options issue * fix cli/index.js * travis issue?
garris · Nov 1, 2017 · 4f6db12 · 4f6db12
1 parent ced3926
commit 4f6db12
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -499,7 +499,7 @@ The default port used by BackstopJS is 3001.   You can change it by setting the
 -->
 
 ### Setting Casper command-line flags
-This is for you if for some reason you find yourself needing advanced configuration access to CasperJS.  You can set CasperJS flags via `casperFlags` like so...
+See casperjs documentation for more info on instance options.  An example config below...
 
 ```json
 "casperFlags": [
@@ -510,6 +510,25 @@ This is for you if for some reason you find yourself needing advanced configurat
 ]
 ```
 
+### Setting Chromy option flags
+Chromy enables a lot of behavior via constructor options.  See Chromy documentation for more info.  
+
+**NOTE:** Backstop sets defaults for many Chromy properties. Setting a parameter value with engineOptions will override any default value set by backstop. _But please watch out for the following..._
+- (TLDR) Setting `port` is _very_ _very_ not advised.
+- Setting `chromeFlags` will override all chromeFlags properties set by backstop -- **EXCEPT FOR `--window-size`***...  (i.e. `--window-size` flag will be added by backstop if not found in chromeFlags) 
+- Setting `--window-size` explicitly in `chromeFlags` will override values used in your viewport settings.
+
+
+An example config below...
+
+```js
+"engineOptions": {
+  waitTimeout: 120000,
+  chromePath: /path/to/chrome,
+  chromeFlags: ['--disable-gpu', '--force-device-scale-factor=1']
+}
+```
+
 ### Integration options (local install)
 
 TLDR; run the example here...

diff --git a/core/util/runChromy.js b/core/util/runChromy.js
@@ -50,26 +50,54 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
 
   const engineScriptsPath = config.env.engine_scripts || config.env.casper_scripts || config.env.engine_scripts_default;
   const isReference = config.isReference;
-  const engineFlags = (Array.isArray(config.hostFlags) && config.hostFlags) || (Array.isArray(config.engineFlags) && config.engineFlags) || [];
   /**
    *  =============
    *  START CHROMY SESSION
    *  =============
    */
-  const w = viewport.width || viewport.viewport.width;
-  const h = viewport.height || viewport.viewport.height;
-  const windowFlag = /--window-size=/i.test(engineFlags.toString()) ? null : '--window-size={w},{h}'.replace(/{w}/, w).replace(/{h}/, h);
-  let flags = (engineFlags.length && engineFlags) || ['--disable-gpu', '--force-device-scale-factor=1', '--disable-infobars=true'];
-  flags = windowFlag ? flags.concat(windowFlag) : flags;
-  const port = CHROMY_STARTING_PORT_NUMBER + runId;
-
-  console.log('Starting Chromy:', `port:${port}`, flags.toString());
-  let chromy = new Chromy({
-    chromeFlags: flags,
-    port: port,
+  const VP_W = viewport.width || viewport.viewport.width;
+  const VP_H = viewport.height || viewport.viewport.height;
+
+  const DEFAULT_CHROME_FLAGS = ['--disable-gpu', '--force-device-scale-factor=1', '--disable-infobars=true'];
+  const PORT = CHROMY_STARTING_PORT_NUMBER + runId;
+  let defaultOptions = {
+    chromeFlags: undefined,
+    port: PORT,
     waitTimeout: TEST_TIMEOUT,
     visible: config.debugWindow || false
-  }).chain();
+  };
+
+  // This option is depricated.
+  const chromeFlags = (Array.isArray(config.hostFlags) && config.hostFlags) || (Array.isArray(config.engineFlags) && config.engineFlags) || [];
+
+  // set up engineOptions obj
+  let engineOptions = {};
+  if (typeof config.engineOptions === 'object') {
+    engineOptions = config.engineOptions;
+  } else {
+    // Check for (legacy) chromeFlags setting if there is no engineOptions config. chromeFlags option is depricated.
+    if (chromeFlags.length) {
+      console.warn('***The chromeFlags property is depricated -- please see documentation for recommended way of setting chromeFlags.***');
+      engineOptions.chromeFlags = chromeFlags;
+    }
+  }
+
+  // create base chromyOptions with default & config engineOptions
+  let chromyOptions = Object.assign({}, defaultOptions, engineOptions);
+
+  // if chromeFlags has not been explicitly set, then set it. (this is the expected case)
+  if (!chromyOptions.chromeFlags) {
+    chromyOptions.chromeFlags = DEFAULT_CHROME_FLAGS;
+  }
+
+  // if --window-size= has not been explicity set, then set it. (this is the expected case)
+  if (!/--window-size=/i.test(chromyOptions.chromeFlags.toString())) {
+    chromyOptions.chromeFlags = chromyOptions.chromeFlags.concat('--window-size=' + VP_W + ',' + VP_H + '');
+    // chromyOptions.chromeFlags = chromyOptions.chromeFlags.concat(`--window-size=${VP_W},${VP_H}`);
+  }
+
+  console.log('Starting Chromy:', JSON.stringify(chromyOptions));
+  let chromy = new Chromy(chromyOptions).chain();
 
   /**
    * =================
@@ -109,7 +137,7 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
   // --- set up console output ---
   chromy.console(function (text, consoleObj) {
     if (console[consoleObj.level]) {
-      console[consoleObj.level](port + ' ' + (consoleObj.level).toUpperCase() + ' > ', text);
+      console[consoleObj.level](PORT + ' ' + (consoleObj.level).toUpperCase() + ' > ', text);
     }
   });
 
@@ -119,9 +147,9 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
       return v ? parseInt(v[2], 10) : 0;
     })
     .result(chromeVersion => {
-      console.info(`${port} Chrome v${chromeVersion} detected.`);
+      console.info(`${PORT} Chrome v${chromeVersion} detected.`);
       if (chromeVersion < MIN_CHROME_VERSION) {
-        console.warn(`${port} ***WARNING! CHROME VERSION ${MIN_CHROME_VERSION} OR GREATER IS REQUIRED. PLEASE UPDATE YOUR CHROME APP!***`);
+        console.warn(`${PORT} ***WARNING! CHROME VERSION ${MIN_CHROME_VERSION} OR GREATER IS REQUIRED. PLEASE UPDATE YOUR CHROME APP!***`);
       }
     });
 
@@ -145,7 +173,7 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
     if (fs.existsSync(beforeScriptPath)) {
       require(beforeScriptPath)(chromy, scenario, viewport, isReference);
     } else {
-      console.warn(port, ' WARNING: script not found: ' + beforeScriptPath);
+      console.warn(PORT, ' WARNING: script not found: ' + beforeScriptPath);
     }
   }
 
@@ -185,9 +213,9 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
   if (config.debug) {
     chromy
       .evaluate(_ => document.head.outerHTML)
-      .result(headStr => console.log(port + 'HEAD > ', headStr))
+      .result(headStr => console.log(PORT + 'HEAD > ', headStr))
       .evaluate(_ => document.body.outerHTML)
-      .result(htmlStr => console.log(port + 'BODY > ', htmlStr));
+      .result(htmlStr => console.log(PORT + 'BODY > ', htmlStr));
   }
 
   // --- REMOVE SELECTORS ---
@@ -220,7 +248,7 @@ function processScenarioView (scenario, variantOrScenarioLabelSafe, scenarioLabe
     if (fs.existsSync(readyScriptPath)) {
       require(readyScriptPath)(chromy, scenario, viewport, isReference);
     } else {
-      console.warn(port, 'WARNING: script not found: ' + readyScriptPath);
+      console.warn(PORT, 'WARNING: script not found: ' + readyScriptPath);
     }
   }