Backstop Visual Regression

.ci/test/visual-regression/backstopConfig.js

@@ -1,66 +1,67 @@
-// Stash dev URL, removing any trailing slash
-const devURL = process.env.DEV_SITE_URL.replace(/\/$/, "");
+// // Stash dev URL, removing any trailing slash
+// const devURL = process.env.DEV_SITE_URL.replace(/\/$/, "");
 
-// Stash multidev URL, removing any trailing slash
-const multidevURL = process.env.MULTIDEV_SITE_URL.replace(/\/$/, "");
+// // Stash multidev URL, removing any trailing slash
+// const multidevURL = process.env.MULTIDEV_SITE_URL.replace(/\/$/, "");
 
-const pathsToTest = {
-    'Homepage': '/',
-    'Hello World': '/hello-world/',
-}
+// const pathsToTest = {
+//     'Homepage': '/',
+//     'Hello World': '/hello-world/',
+// }
 
-let scenariosToTest = [];
+// let scenariosToTest = [];
 
-for (let [key, value] of Object.entries(pathsToTest)) {
-    scenariosToTest.push({
-        label: key,
-        url: multidevURL + value,
-        referenceUrl: devURL + value,
-        hideSelectors: [],
-        removeSelectors: [],
-        selectorExpansion: true,
-        selectors: [
-            'document',
-        ],
-        readyEvent: null,
-        delay: 1500,
-        misMatchThreshold: 0.1
-    })
-}
+// for (let [key, value] of Object.entries(pathsToTest)) {
+//     scenariosToTest.push({
+//         label: key,
+//         url: multidevURL + value,
+//         referenceUrl: devURL + value,
+//         hideSelectors: [],
+//         removeSelectors: [],
+//         selectorExpansion: true,
+//         selectors: [
+//             'document',
+//         ],
+//         readyEvent: null,
+//         delay: 1500,
+//         misMatchThreshold: 0.1
+//     })
+// }
 
-module.exports = {
-    id: 'test',
-    viewports: [{
-            name: 'phone',
-            width: 320,
-            height: 480
-        },
-        {
-            name: 'tablet',
-            width: 1024,
-            height: 768
-        },
-        {
-            "name": "desktop",
-            "width": 1920,
-            "height": 1080
-        }
-    ],
-    scenarios: scenariosToTest,
-    paths: {
-        bitmaps_reference: 'backstop_data/bitmaps_reference',
-        bitmaps_test: 'backstop_data/bitmaps_test',
-        html_report: 'backstop_data/html_report',
-        ci_report: 'backstop_data/ci_report'
-    },
-    report: ['browser', 'CI'],
-    debug: false,
-    engine: 'puppeteer',
-    engineOptions: {
-        args: ['--no-sandbox']
-    },
-    asyncCaptureLimit: 5,
-    asyncCompareLimit: 50,
-    debug: false,
-    debugWindow: false
-};
+// module.exports = {
+//     id: 'test',
+//     viewports: [
+//         {
+//             "label": "mobile-1",
+//             "width": 360,
+//             "height": 800
+//         },   
+//         {
+//             "label": "tablet",
+//             "width": 768,
+//             "height": 1024
+//         },
+//         {
+//             "label": "desktop-1",
+//             "width": 1280,
+//             "height": 720
+//         },
+//     ],
+//     scenarios: scenariosToTest,
+//     paths: {
+//         bitmaps_reference: 'backstop_data/bitmaps_reference',
+//         bitmaps_test: 'backstop_data/bitmaps_test',
+//         html_report: 'backstop_data/html_report',
+//         ci_report: 'backstop_data/ci_report'
+//     },
+//     report: ['browser', 'CI'],
+//     debug: false,
+//     engine: 'puppeteer',
+//     engineOptions: {
+//         args: ['--no-sandbox']
+//     },
+//     asyncCaptureLimit: 5,
+//     asyncCompareLimit: 50,
+//     debug: false,
+//     debugWindow: false
+// };

.ci/test/visual-regression/run

@@ -66,11 +66,11 @@ curl -I "$DEV_SITE_URL" >/dev/null
 
 # Backstop visual regression
 echo -e "\nRunning backstop reference on ${DEV_SITE_URL}..."
-backstop reference --config=.ci/test/visual-regression/backstopConfig.js
+backstop reference --config=backstop/pantheon.js
 
 # Backstop test
 echo -e "\nRunning backstop test on ${MULTIDEV_SITE_URL}..."
-VISUAL_REGRESSION_RESULTS=$(backstop test --config=.ci/test/visual-regression/backstopConfig.js || echo 'true')
+VISUAL_REGRESSION_RESULTS=$(backstop test --config=backstop/pantheon.js || echo 'true')
 
 echo "${VISUAL_REGRESSION_RESULTS}"
 

.gitignore

@@ -38,7 +38,9 @@ web/private/scripts/quicksilver
 
 # Add directories containing build assets below.
 # Keep all additions above the "cut" line.
-
+node_modules
+backstop_data
+backstop/shared/live-links.json
 
 
 # :::::::::::::::::::::: cut ::::::::::::::::::::::

backstop/local.js

@@ -0,0 +1,6 @@
+const configMaker = require('./shared/config-maker');
+const id = 'backstop_local';
+const referenceDomain = 'FIXME:domain';
+const testDomain = 'http://FIXME:app-name.lndo.site';
+
+module.exports = configMaker({ id, referenceDomain, testDomain });

backstop/pantheon.js

@@ -0,0 +1,8 @@
+const configMaker = require('./shared/config-maker');
+const id = 'pantheon';
+// Stash dev URL, removing any trailing slash
+const referenceDomain = process.env.DEV_SITE_URL.replace(/\/$/, "");
+// Stash multidev URL, removing any trailing slash
+const testDomain = process.env.MULTIDEV_SITE_URL.replace(/\/$/, "");
+
+module.exports = configMaker({ id, referenceDomain, testDomain });

backstop/shared/base-config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  onBeforeScript: "puppet/onBefore.js",
+  onReadyScript: "puppet/onReady.js",
+  report: ['browser', 'CI'],
+  engine: 'puppeteer',
+  engineOptions: {
+    args: ['--no-sandbox']
+  },
+  engineFlags: [],
+  asyncCaptureLimit: 5,
+  asyncCompareLimit: 50,
+  debug: false,
+  debugWindow: false,
+}

backstop/shared/base-scenario.js

@@ -0,0 +1,15 @@
+module.exports = {
+  // cookiePath: 'backstop_data/engine_scripts/cookies.json',
+  readyEvent: '',
+  readySelector: '',
+  delay: 1000,
+  hideSelectors: [],
+  removeSelectors: [],
+  hoverSelector: '',
+  clickSelector: '',
+  postInteractionWait: '',
+  selectors: [],
+  selectorExpansion: true,
+  misMatchThreshold: 0.1,
+  requireSameDimensions: true,
+}

backstop/shared/config-maker.js

@@ -0,0 +1,12 @@
+const baseConfig = require('./base-config')
+const paths = require('./paths')
+const viewports = require('./viewports')
+const scenarios = require('./scenarios')
+const configMaker = ({ id, referenceDomain, testDomain }) => ({
+  ...baseConfig,
+  id,
+  paths,
+  viewports,
+  scenarios: scenarios(referenceDomain, testDomain),
+})
+module.exports = configMaker

backstop/shared/paths.js

@@ -0,0 +1,13 @@
+const dir = 'backstop_data'
+const locations = [
+  'bitmaps_reference',
+  'bitmaps_test',
+  'engine_scripts',
+  'html_report',
+  'ci_report',
+]
+const paths = locations.reduce((prev, curr) => {
+  prev[curr] = `${dir}/${curr}`
+  return prev
+}, {})
+module.exports = paths

backstop/shared/scenarios.js

@@ -0,0 +1,33 @@
+const baseScenario = require('./base-scenario')
+
+// URLs to test
+const links = [
+  {
+    label: 'Hompage',
+    path: '/',
+    // hideSelectors: ['.cookie-banner']
+  },
+  {
+    label: 'Page Test',
+    path: '/page-test'
+  },
+  // Project Specific Pages
+  // {
+  //   label: 'Template Projects Listing',
+  //   path: '/projects'
+  // }
+
+]
+
+module.exports = (referenceDomain, testDomain) =>
+  links.map(routeConfig => {
+    const config = Object.assign({},
+      baseScenario, 
+      {
+        url: `${testDomain}${routeConfig.path}`,
+        referenceUrl: `${referenceDomain}${routeConfig.path}`,
+      },
+      routeConfig
+    )
+    return config;
+  });

backstop/shared/viewports.js

@@ -0,0 +1,32 @@
+module.exports = [
+  {
+    "label": "mobile-1",
+    "width": 360,
+    "height": 800
+  },    
+  // {
+  //   "label": "mobile-2",
+  //   "width": 430,
+  //   "height": 932
+  // },
+  {
+    "label": "tablet",
+    "width": 768,
+    "height": 1024
+  },
+  {
+    "label": "desktop-1",
+    "width": 1280,
+    "height": 720
+  },
+  // {
+  //   "label": "desktop-2",
+  //   "width": 1366,
+  //   "height": 768
+  // },
+  {
+    "label": "desktop-3",
+    "width": 1440,
+    "height": 900
+  }
+]

backstop/staging.js

@@ -0,0 +1,5 @@
+const configMaker = require('./shared/config-maker')
+const id = 'backstop_staging'
+const referenceDomain = 'FIXME:domain';
+const testDomain = 'https://test-FIXME:app-name.pantheonsite.io'
+module.exports = configMaker({ id, referenceDomain, testDomain })

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "fixme",
+  "version": "0.0.1",
+  "main": "index.js",
+  "repository": "[email protected]:Threespot/FIXME:app-name.git",
+  "author": "Threespot <[email protected]>",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "backstopjs": "^6.3.22"
+  },
+  "scripts": {
+    "terminus:paths:live": "terminus remote:wp FIXME:app-name.live -- post list --post_status=published --post_type=page,post --fields=url,name --format=json > ./backstop/shared/live-links.json",
+    "backstop:local:ref": "npx backstop reference --config=backstop/local.js",
+    "backstop:local:test": "npx backstop test --config=backstop/local.js",
+    "backstop:openReport": "npx backstop openReport --config=backstop/local.js",
+    "backstop:staging:ref": "npx backstop reference --config=backstop/local.js",
+    "backstop:staging:test": "npx backstop test --config=backstop/staging.js"
+  }
+}