backstop engine config

backstop_data/engine_scripts/casper/clickAndHoverHelper.js

+var WAIT_TIMEOUT = 5000;
+
+module.exports = function (casper, scenario) {
+  var waitFor = require('./waitForHelperHelper')(casper, WAIT_TIMEOUT);
+  var hoverSelector = scenario.hoverSelector;
+  var clickSelector = scenario.clickSelector;
+  var postInteractionWait = scenario.postInteractionWait;
+
+  if (hoverSelector) {
+    waitFor(hoverSelector);
+    casper.then(function () {
+      casper.mouse.move(hoverSelector);
+    });
+  }
+
+  if (clickSelector) {
+    waitFor(clickSelector);
+    casper.then(function () {
+      casper.click(clickSelector);
+    });
+  }
+
+  // TODO: if postInteractionWait === integer then do ==> wait(postInteractionWait) || elsevvv
+  waitFor(postInteractionWait);
+};

backstop_data/engine_scripts/casper/loadCookies.js

+var fs = require('fs');
+
+module.exports = function (casper, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  casper.page.cookies = cookies;
+  console.log('Cookie state restored with cookies:', JSON.stringify(cookies, null, 2));
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onBefore.js

+module.exports = function (casper, scenario, vp) {
+  require('./loadCookies')(casper, scenario);
+  casper.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36');
+};

backstop_data/engine_scripts/casper/onReady.js

+module.exports = function (casper, scenario, vp) {
+  console.log('SCENARIO> ' + scenario.label);
+  require('./clickAndHoverHelper')(casper, scenario);
+  // add more helpers here...
+};

backstop_data/engine_scripts/casper/waitForHelperHelper.js

+var TIMEOUT_DEFAULT = 2000;
+
+module.exports = function (casper, timeout) {
+  var TIMEOUT = timeout || TIMEOUT_DEFAULT;
+
+  return function waitFor (selector) {
+    if (selector) {
+      casper.waitForSelector(
+        selector,
+        function () {},
+        function () {
+          console.error('NOT FOUND > ' + selector);
+        },
+        TIMEOUT
+      );
+    }
+  };
+};

backstop_data/engine_scripts/chromy/clickAndHoverHelper.js

+module.exports = function (chromy, scenario) {
+  var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  var clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  var scrollToSelector = scenario.scrollToSelectors || scenario.scrollToSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      chromy
+        .wait(keyPressSelectorItem.selector)
+        .insert(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    chromy
+      .wait(hoverSelector)
+      .rect(hoverSelector)
+      .result(function (rect) {
+        chromy.mouseMoved(rect.left, rect.top);
+      });
+  }
+
+  if (clickSelector) {
+    chromy
+      .wait(clickSelector)
+      .click(clickSelector);
+  }
+
+  if (postInteractionWait) {
+    chromy.wait(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    chromy
+      .wait(scrollToSelector)
+      .evaluate(`window._scrollToSelector = '${scrollToSelector}'`)
+      .evaluate(function () {
+        document.querySelector(window._scrollToSelector).scrollIntoView();
+      });
+  }
+};

backstop_data/engine_scripts/chromy/loadCookies.js

+var fs = require('fs');
+
+module.exports = function (chromy, scenario) {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN FOR CHROMY USAGE
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+    return cookie;
+  });
+
+  // SET COOKIES VIA CHROMY
+  chromy.setCookie(cookies);
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

backstop_data/engine_scripts/chromy/onBefore.js

+module.exports = function (chromy, scenario, vp) {
+  require('./loadCookies')(chromy, scenario);
+
+  // IGNORE ANY CERT WARNINGS
+  chromy.ignoreCertificateErrors();
+};

backstop_data/engine_scripts/chromy/onReady.js

+module.exports = function (chromy, scenario, vp) {
+  console.log('SCENARIO > ' + scenario.label);
+  require('./clickAndHoverHelper')(chromy, scenario);
+  // add more ready handlers here...
+};

backstop_data/engine_scripts/cookies.json

+[
+  {
+    "domain": ".www.yourdomain.com",
+    "path": "/",
+    "name": "yourCookieName",
+    "value": "yourCookieValue",
+    "expirationDate": 1798790400,
+    "hostOnly": false,
+    "httpOnly": false,
+    "secure": false,
+    "session": false,
+    "sameSite": "no_restriction"
+  }
+]

backstop_data/engine_scripts/puppet/clickAndHoverHelper.js

+module.exports = async (page, scenario) => {
+  var hoverSelector = scenario.hoverSelectors || scenario.hoverSelector;
+  var clickSelector = scenario.clickSelectors || scenario.clickSelector;
+  var keyPressSelector = scenario.keyPressSelectors || scenario.keyPressSelector;
+  var scrollToSelector = scenario.scrollToSelector;
+  var postInteractionWait = scenario.postInteractionWait; // selector [str] | ms [int]
+
+  if (keyPressSelector) {
+    for (const keyPressSelectorItem of [].concat(keyPressSelector)) {
+      await page.waitFor(keyPressSelectorItem.selector);
+      await page.type(keyPressSelectorItem.selector, keyPressSelectorItem.keyPress);
+    }
+  }
+
+  if (hoverSelector) {
+    for (const hoverSelectorIndex of [].concat(hoverSelector)) {
+      await page.waitFor(hoverSelectorIndex);
+      await page.hover(hoverSelectorIndex);
+    }
+  }
+
+  if (clickSelector) {
+    for (const clickSelectorIndex of [].concat(clickSelector)) {
+      await page.waitFor(clickSelectorIndex);
+      await page.click(clickSelectorIndex);
+    }
+  }
+
+  if (postInteractionWait) {
+    await page.waitFor(postInteractionWait);
+  }
+
+  if (scrollToSelector) {
+    await page.waitFor(scrollToSelector);
+    await page.evaluate(scrollToSelector => {
+      document.querySelector(scrollToSelector).scrollIntoView();
+    }, scrollToSelector);
+  }
+};

backstop_data/engine_scripts/puppet/ignoreCSP.js

+/**
+ * IGNORE CSP HEADERS
+ * Listen to all requests. If a request matches scenario.url
+ * then fetch the request again manually, strip out CSP headers
+ * and respond to the original request without CSP headers.
+ * Allows `ignoreHTTPSErrors: true` BUT... requires `debugWindow: true`
+ *
+ * see https://github.com/GoogleChrome/puppeteer/issues/1229#issuecomment-380133332
+ * this is the workaround until Page.setBypassCSP lands... https://github.com/GoogleChrome/puppeteer/pull/2324
+ *
+ * @param      {REQUEST}  request
+ * @return     {VOID}
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./removeCSP')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fetch = require('node-fetch');
+const https = require('https');
+const agent = new https.Agent({
+  rejectUnauthorized: false
+});
+
+module.exports = async function (page, scenario) {
+  const intercept = async (request, targetUrl) => {
+    const requestUrl = request.url();
+
+    // FIND TARGET URL REQUEST
+    if (requestUrl === targetUrl) {
+      const cookiesList = await page.cookies(requestUrl);
+      const cookies = cookiesList.map(cookie => `${cookie.name}=${cookie.value}`).join('; ');
+      const headers = Object.assign(request.headers(), { cookie: cookies });
+      const options = {
+        headers: headers,
+        body: request.postData(),
+        method: request.method(),
+        follow: 20,
+        agent
+      };
+
+      const result = await fetch(requestUrl, options);
+
+      const buffer = await result.buffer();
+      let cleanedHeaders = result.headers._headers || {};
+      cleanedHeaders['content-security-policy'] = '';
+      await request.respond({
+        body: buffer,
+        headers: cleanedHeaders,
+        status: result.status
+      });
+    } else {
+      request.continue();
+    }
+  };
+
+  await page.setRequestInterception(true);
+  page.on('request', req => {
+    intercept(req, scenario.url);
+  });
+};

backstop_data/engine_scripts/puppet/interceptImages.js

+/**
+ * INTERCEPT IMAGES
+ * Listen to all requests. If a request matches IMAGE_URL_RE
+ * then stub the image with data from IMAGE_STUB_URL
+ *
+ * Use this in an onBefore script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    require('./interceptImages')(page, scenario);
+  }
+  ```
+ *
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const IMAGE_URL_RE = /\.gif|\.jpg|\.png/i;
+const IMAGE_STUB_URL = path.resolve(__dirname, '../../imageStub.jpg');
+const IMAGE_DATA_BUFFER = fs.readFileSync(IMAGE_STUB_URL);
+const HEADERS_STUB = {};
+
+module.exports = async function (page, scenario) {
+  const intercept = async (request, targetUrl) => {
+    if (IMAGE_URL_RE.test(request.url())) {
+      await request.respond({
+        body: IMAGE_DATA_BUFFER,
+        headers: HEADERS_STUB,
+        status: 200
+      });
+    } else {
+      request.continue();
+    }
+  };
+  await page.setRequestInterception(true);
+  page.on('request', intercept);
+};

backstop_data/engine_scripts/puppet/loadCookies.js

+var fs = require('fs');
+
+module.exports = async (page, scenario) => {
+  var cookies = [];
+  var cookiePath = scenario.cookiePath;
+
+  // READ COOKIES FROM FILE IF EXISTS
+  if (fs.existsSync(cookiePath)) {
+    cookies = JSON.parse(fs.readFileSync(cookiePath));
+  }
+
+  // MUNGE COOKIE DOMAIN
+  cookies = cookies.map(cookie => {
+    cookie.url = 'https://' + cookie.domain;
+    delete cookie.domain;
+    return cookie;
+  });
+
+  // SET COOKIES
+  const setCookies = async () => {
+    return Promise.all(
+      cookies.map(async (cookie) => {
+        await page.setCookie(cookie);
+      })
+    );
+  };
+  await setCookies();
+  console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+};

backstop_data/engine_scripts/puppet/onBefore.js

+module.exports = async (page, scenario, vp) => {
+  await require('./loadCookies')(page, scenario);
+};

backstop_data/engine_scripts/puppet/onReady.js

+module.exports = async (page, scenario, vp) => {
+  console.log('SCENARIO > ' + scenario.label);
+  await require('./clickAndHoverHelper')(page, scenario);
+
+  // add more ready handlers here...
+};