diff --git a/README.md b/README.md index e298bfa4d..d483be0d2 100644 --- 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 index 818de88fd..2a6c88526 100644 --- 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); } }