Unable to Login with Casper onBefore Script

[angelariggs]

Versions:

BackstopJS: 3.1.9

Custom backstop.js file:

/* Quick guide to BackstopJS commands

  backstop reference --configPath=backstop.js --pathFile=paths --env=local --refHost=http://site.dev
  backstop test --configPath=backstop.js --pathFile=paths --env=local --testHost=http://site.dev

  Remember that the `--env` parameter needs to be the same for reference and test commands, even if you're comparing two different environments.

*/

var args = require('minimist')(process.argv.slice(2)); // grabs the process args
// var dotenv = require('dotenv').config(); // if sites have basic auth
var defaultPaths = ['/']; // default path just checks the homepage
var scenarios = []; // The array that'll have the URL paths to check

var environments = {
  'dev': 'https://dev.site',
  'staging': 'https://test.site',
  'prod': 'https://prod.site'
};
var default_environment = 'prod';

// Set the environments that are being compared
if (!args.env) {
  args.env = default_environment;
}
else if (!environments.hasOwnProperty(args.env)) {
  // @todo notify of unknown environment?
  args.env = default_environment;
}

// Site for reference screenshots
if (!args.refHost) {
  args.refHost = environments[args.env];
}

// Site for test screenshots
if (!args.testHost) {
  args.testHost = environments[args.env];
}

// Setting the directories to save screenshots
var saveDirectories = {
  "bitmaps_reference": "./backstop_data/"+args.env+"_reference",
  "bitmaps_test": "./backstop_data/"+args.env+"_test",
  "html_report": "./backstop_data/"+args.env+"_html_report",
  "ci_report": "./backstop_data/"+args.env+"_ci_report"
};


// Work out which paths to use: an array from a file, a supplied array, or the default
  // We'll be using the array from the `paths.js` file
if (args.pathFile) {
  var pathConfig = require('./'+args.pathFile+'.js'); // use paths.js file
  var paths = pathConfig.array;
} else if (args.paths) {
  pathString = args.paths; // pass in a comma-separated list of paths in terminal
  var paths = pathString.split(',');
} else {
  var paths = defaultPaths; // use the default of just the homepage
}

// Scenarios are a default part of config for BackstopJS
// Explanations for the sections below are at https://www.npmjs.com/package/backstopjs
for (var k = 0; k < paths.length; k++) {
  scenarios.push (
    {
      "label": paths[k],
      "referenceUrl": args.refHost+paths[k],
      "url": args.testHost+paths[k],
      "hideSelectors": [],
      "removeSelectors": [],
      "selectors": ["document"], // "document" will snapshot the entire page
      "delay": 1000,
      "misMatchThreshold" : 0.1
    }
  );
}

// BackstopJS configuration
module.exports =
{
  "id": "project_"+args.env+"_config",
  "viewports": [
    {
      "name": "desktop",
      "width": 1600,
      "height": 2000
    },
    {
      "name": "mobile",
      "width": 375,
      "height": 2000
    }
  ],
  "onBeforeScript": "onBefore.js",
  "scenarios":
    scenarios,
  "paths":
    saveDirectories,
  "casperFlags": ["--ignore-ssl-errors=true", "--ssl-protocol=any"],
  "engine": "chromy",
      "engineOptions": {
        chromeFlags: ["--allow-insecure-localhost"]
      },
  "report": ["browser"],
  "startingPort": 9333,
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50,
  "debug": true
};

onBefore.js file:

I used the file in /backstop_data/engine_scripts/onBefore.js

module.exports = function (engine, scenario, vp) {

  casper.waitUntilVisible('form.form', function() {
    casper.fill('form.form', {
      email: 'name@email.com',
      password: 'xxxxxxx'
    }, true);
  });

  console.log('onBefore.js has run for ' + vp.label + '.');
};

Error message

COMMAND | Executing core for `test`
createBitmaps | Selected 1 of 1 scenarios.
searching for 2 available ports.
These ports will be used: [9333,9334]
Starting Chromy: {"chromeFlags":["--allow-insecure-localhost","--window-size=1600,2000"],"port":9333,"waitTimeout":30000,"visible":false}
Starting Chromy: {"chromeFlags":["--allow-insecure-localhost","--window-size=375,2000"],"port":9334,"waitTimeout":30000,"visible":false}
      COMMAND | Command `test` ended with an error after [0.012s]
      COMMAND | ReferenceError: casper is not defined
                    at module.exports (/Users/angelariggs/Sites/project/tests/backstop/backstop_data/engine_scripts/onBefore.js:7:3)
                    at processScenarioView (/usr/local/lib/node_modules/backstopjs/core/util/runChromy.js:177:32)
                    at module.exports (/usr/local/lib/node_modules/backstopjs/core/util/runChromy.js:32:10)
                    at Promise.resolve.then.el (/usr/local/lib/node_modules/backstopjs/node_modules/p-map/index.js:46:16)
                    at <anonymous>
                    at process._tickCallback (internal/process/next_tick.js:188:7)
                    at Function.Module.runMain (module.js:695:11)
                    at startup (bootstrap_node.js:188:16)
                    at bootstrap_node.js:609:3

[garris]

Hi There Angela! Looks like your engine is set to Chrome?

Also, FWIW: The scripts were reorganized in the latest version (to better organize for multiple engines).

Does this help?

[angelariggs]

Aha! Ok, let me try putting the script there, and updating the config to "onBeforeScript": "./casper/onBefore.js".

[garris]

Yes -- and set engine: 'casper' too. That will fix the issue.

[angelariggs]

I'm diving into this a little more. When I change the engine value in config to casper, I'm getting blank screenshots (with or without the onBefore script). I'm seeing Remote Error > ReferenceError: Can't find variable: Set in terminal, and I think it's referencing a js file (https://dev.site/static/js/main.7c10b502.js).

[angelariggs]

I see this issue that may be the thing: #187

[garris]

Ah. Phantom is quite old. I highly recommend starting any new projects using the latest version of backstop with engine puppeteer. That is going to give you super consistent results and double the speed.