Build Node app around BackstopJS

Author: ataylorme

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module"
+    },
+    "env": {
+        "node": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "semi": 2,
+	"no-unused-vars": 2,
+	"no-console": 0
+    }
+}

.gitignore

@@ -0,0 +1,62 @@
+#Backstop JS
+backstop_data
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Andrew Taylor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,42 @@
+# Automating your QA with Visual Regression Testing Example Repository
+
+This repository is an example for my talk [Automating your QA with Visual Regression Testing](https://2019.europe.wordcamp.org/session/automating-your-qa-with-visual-regression-testing/) at WordCamp Europe 2019. It uses [BackstopJS](https://github.com/garris/BackstopJS/) and [Node JS](https://nodejs.org/) to automate visual QA. The slides for the talk can be found [here](https://goo.gl/V7QtNw).
+
+## Prerequisites
+
+You will need:
+
+* A local development environment with [Node JS/NPM](https://docs.npmjs.com/getting-started/installing-node)
+* [Google Chrome](https://www.google.com/chrome/)
+* A live, web-accessible WordPress site
+* Another environment of the WordPress site above (e.g. local, staging, etc.)
+
+### Getting The Code
+
+Either clone this repository using Git or download the [`master` branch `.zip` file](https://github.com/ataylorme/wordcamp-europe-2019-visual-regression-testing-workshop/archive/master.zip).
+
+## Instructions
+
+After setting up the repository locally (see above) you will need to:
+
+1. Run the command `npm install` to download dependencies
+1. Run the command `npm run start`
+    * Type the number of a site from the list or enter _all_ to test all sites in `src/sitesToTest.js`
+1. Check out the results from the sample test
+    * They should open in your browser automatically
+1. Edit `src/sitesToTest.js`
+    * This is where the list of sites to test is stored
+    * Try changing to one (or more) of your sites
+    * `BackstopReferenceBaseUrl` is your non-production environment (local, staging, etc.) URL
+    * `BackstopTestUrl` is your production site URL
+    * Adjust `pathsToTest`, which is the array of URIs to test for each site
+1. Edit `src/backstopConfig.js` to adjust viewports, delay, hidden selectors, etc.
+1. Run the command `npm run build`.
+    * This command needs to be run anytime you edit items in `src`
+1. Run the command `npm run start`.
+    * To test a single site, enter its number from the list, or enter `all` to test all sites in `src/sitesToTest.js`
+
+**Troubleshooting**
+If you are having issues with the script hanging or BackstopJS taking a long time there may be headless Chrome instances that didn't close properly.
+
+Try `pkill -f "(chrome)?(--headless)"` on Mac/Linux or `Get-CimInstance Win32_Process -Filter "Name = 'chrome.exe' AND CommandLine LIKE '%--headless%'" | %{Stop-Process $_.ProcessId}` in Windows PowerShell.

dist/backstopConfig.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = backstopConfig;
+
+function untrailingSlashIt(string) {
+  return string.replace(/\/$/, "");
+}
+
+function backstopConfig(nonProductionBaseUrl, productionBaseUrl, pathsToTest, siteName) {
+  const backstopDataDir = `backstop_data/${siteName}`;
+  const delayTime = 1500;
+  const acceptableThreshold = 0.1;
+  const config = {
+    'id': siteName,
+    asyncCaptureLimit: 10,
+    'viewports': [{
+      'name': 'phone',
+      'width': 320,
+      'height': 480
+    }, {
+      'name': 'desktop',
+      'width': 1920,
+      'height': 1080
+    }],
+    'scenarios': [{
+      'label': 'Homepage',
+      'url': nonProductionBaseUrl,
+      'referenceUrl': productionBaseUrl,
+      'hideSelectors': [],
+      'selectors': ['document'],
+      'readyEvent': null,
+      'delay': delayTime,
+      'misMatchThreshold': acceptableThreshold
+    }],
+    'paths': {
+      'ci_report': `${backstopDataDir}/ci_report`,
+      'html_report': `${backstopDataDir}/html_report`,
+      'bitmaps_reference': `${backstopDataDir}/bitmaps_reference`,
+      'bitmaps_test': `${backstopDataDir}/bitmaps_test`,
+      'compare_data': `${backstopDataDir}/bitmaps_test/compare.json`,
+      'casper_scripts': `${backstopDataDir}/casper_scripts`,
+      'engine_scripts': `${backstopDataDir}/engine_scripts`
+    },
+    'engine': 'puppeteer',
+    'report': ['browser', 'CI'],
+    'casperFlags': [],
+    'debug': false,
+    'port': 3001
+  };
+  const scenarios = pathsToTest.map(function (path) {
+    return {
+      'label': path,
+      'url': untrailingSlashIt(nonProductionBaseUrl) + path,
+      'referenceUrl': untrailingSlashIt(productionBaseUrl) + path,
+      'hideSelectors': [],
+      'selectors': ['document'],
+      'readyEvent': null,
+      'delay': delayTime,
+      'misMatchThreshold': acceptableThreshold
+    };
+  });
+  config.scenarios = config.scenarios.concat(scenarios);
+  return config;
+}

dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _visualRegressionTests = _interopRequireDefault(require("./visualRegressionTests"));
+
+var _testAllSites = _interopRequireDefault(require("./testAllSites"));
+
+var _minimist = _interopRequireDefault(require("minimist"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local dependencies
+// External dependencies
+const args = (0, _minimist.default)(process.argv.slice(2), {}); // https://nodejs.org/api/process.html#process_process_platform
+// const isWindows = process.platform === "win32";
+
+if (Object.prototype.hasOwnProperty.call(args, 'all')) {
+  (0, _testAllSites.default)();
+} else {
+  (0, _visualRegressionTests.default)();
+}

dist/sitesToTest.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const sitesToTest = {
+  'return-to-pantheon-test': {
+    label: 'Return to Pantheon Test',
+    productionBaseUrl: 'https://live-return-to-pantheon-test.pantheonsite.io/',
+    nonProductionBaseUrl: 'https://dev-return-to-pantheon-test.pantheonsite.io/',
+    pathsToTest: ["/2018/04/", "/2018/04/04/hello-world/"]
+  },
+  'wordpress-at-scale': {
+    label: 'WordPress at Scale',
+    productionBaseUrl: 'https://scalewp.io/',
+    nonProductionBaseUrl: 'https://dev-wp-microsite.pantheonsite.io/',
+    pathsToTest: ["/resources", "/elastic-architecture", "/page-caching", "/object-caching", "/query-performance", "/searching-for-scale", "/a-real-world-scalable-architecture", "/development-and-workflow"]
+  }
+};
+var _default = sitesToTest;
+exports.default = _default;

dist/testAllSites.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+
+var _sitesToTest = _interopRequireDefault(require("./sitesToTest"));
+
+var _fancyLog = _interopRequireDefault(require("fancy-log"));
+
+var _ansiColors = _interopRequireDefault(require("ansi-colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local dependencies
+// External dependencies
+const {
+  execSync
+} = require('child_process');
+
+function _default() {
+  const siteCount = Object.keys(_sitesToTest.default).length;
+  let i = 1;
+
+  for (var site in _sitesToTest.default) {
+    (0, _fancyLog.default)(_ansiColors.default.yellow(`Testing site ${i} of ${siteCount}...`)); // https://nodejs.org/docs/latest/api/child_process.html#child_process_child_process_execsync_command_options
+
+    execSync(`node dist/index.js --site=${site}`, {
+      stdio: [0, 1, 2]
+    });
+    i++;
+  }
+
+  (0, _fancyLog.default)(_ansiColors.default.green(`Done testing ${siteCount} sites!`));
+}

dist/throwError.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = throwError;
+
+function throwError(message) {
+  console.error(message);
+  process.exit(0);
+}

dist/visualRegressionTestSite.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = _default;
+
+var _throwError = _interopRequireDefault(require("./throwError"));
+
+var _backstopConfig = _interopRequireDefault(require("./backstopConfig"));
+
+var _sitesToTest = _interopRequireDefault(require("./sitesToTest"));
+
+var _path = _interopRequireDefault(require("path"));
+
+var _backstopjs = _interopRequireDefault(require("backstopjs"));
+
+var _fancyLog = _interopRequireDefault(require("fancy-log"));
+
+var _ansiColors = _interopRequireDefault(require("ansi-colors"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local dependencies
+// External dependencies
+function _default(siteToTest) {
+  const siteExists = Object.prototype.hasOwnProperty.call(_sitesToTest.default, siteToTest);
+
+  let rootDir = _path.default.dirname(require.main.filename);
+
+  if (rootDir.endsWith('dist')) {
+    rootDir = rootDir.substring(0, rootDir.indexOf('/dist'));
+  }
+
+  if (!siteExists) {
+    (0, _throwError.default)(_ansiColors.default.red(`${_ansiColors.default.gray(siteToTest)} is not a valid site. Check the name you entered against the ${_ansiColors.default.gray('sitesToTest.js')} config file`));
+  }
+
+  _sitesToTest.default[siteToTest].name = siteToTest;
+  const site = _sitesToTest.default[siteToTest];
+  (0, _fancyLog.default)(_ansiColors.default.yellow(`Testing: ${site.label}`));
+  (0, _fancyLog.default)(`Generating configuration for ${site.label}`);
+  const currentConfig = (0, _backstopConfig.default)(site.nonProductionBaseUrl, site.productionBaseUrl, site.pathsToTest, site.name);
+  (0, _fancyLog.default)(`Running Backstop tests for ${site.label}`);
+  (0, _backstopjs.default)('reference', {
+    config: currentConfig
+  }).then(() => {
+    (0, _fancyLog.default)(`Backstop JS reference complete for ${site.label}! Starting tests.`);
+    (0, _backstopjs.default)('test', {
+      config: currentConfig
+    }).then(() => {
+      (0, _fancyLog.default)(_ansiColors.default.yellow(`Report saved to ${_ansiColors.default.gray(`${rootDir}/backstop_data/${site.name}/html_report/index.html`)}`));
+      (0, _fancyLog.default)(_ansiColors.default.green(`Backstop JS tests passed for ${site.label}!`));
+    }).catch(() => {
+      (0, _fancyLog.default)(`Report saved to "${rootDir}/backstop_data/${site.name}/html_report/index.html"`);
+      (0, _throwError.default)(_ansiColors.default.red(`Backstop JS tests failed for ${_ansiColors.default.gray(site.label)}!`));
+    });
+  }).catch(() => {
+    (0, _throwError.default)(_ansiColors.default.red(`Backstop JS reference failed for ${_ansiColors.default.gray(site.label)}! Please check the BackstopReferenceBaseUrl`));
+  });
+}