regressify 1.0.0

package/.browserslistrc

@@ -0,0 +1,7 @@
+Chrome >= 100
+and_chr >= 100
+Firefox >= 100
+and_ff >= 100
+Edge >= 100
+Safari >= 14
+ios_saf >= 14

package/.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+end_of_line = lf
+# editorconfig-tools is unable to ignore longs strings or urls
+max_line_length = 150
+
+[CHANGELOG.md]
+indent_size = false

package/.engine_scripts/auto-scroll.js

@@ -0,0 +1,63 @@
+module.exports = async () => {
+  const SCROLL_DISTANCE = 100;
+  const SCROLL_DOWN_MAX = 100;
+  const SCROLL_TOP_MAX = 100;
+
+  if (!!window.visualTestScrollingBottom) {
+    return;
+  }
+
+  const scrollToBottom = async () => {
+    window.visualTestScrollingBottom = true;
+    let counter = 0;
+    let lastScrollY = 0;
+    await new Promise((resolve) => {
+      const timer = setInterval(() => {
+        if (window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight || counter > SCROLL_DOWN_MAX) {
+          // you're at the bottom of the page
+          clearInterval(timer);
+          window.visualTestScrollingBottom = false;
+          resolve();
+          return;
+        }
+
+        if (lastScrollY >= Math.ceil(window.scrollY)) {
+          counter++;
+        } else {
+          lastScrollY = Math.ceil(window.scrollY);
+          counter = 0;
+        }
+
+        window.scrollBy(0, SCROLL_DISTANCE);
+      }, 100);
+    });
+  };
+
+  const scrollToTop = async () => {
+    await new Promise((resolve) => {
+      const timer = setInterval(() => {
+        if (!window.visualTestScrollingBottom) {
+          clearInterval(timer);
+          resolve();
+          return;
+        }
+      }, 100);
+    });
+    await new Promise((resolve) => {
+      let counter = 0;
+      const timer = setInterval(() => {
+        if (window.scrollY === 0 || counter > SCROLL_TOP_MAX) {
+          clearInterval(timer);
+          resolve();
+          return;
+        }
+
+        counter++;
+        window.scrollTo(0, 0);
+      }, 100);
+    });
+  };
+
+  await scrollToBottom();
+  await scrollToTop();
+};

package/.engine_scripts/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "backstop_data",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/.engine_scripts/playwright/actions.js

@@ -0,0 +1,174 @@
+const fs = require('fs');
+const path = require('path');
+const chalkImport = import('chalk').then((m) => m.default);
+
+module.exports = async (currentPage, scenario) => {
+  if (!scenario.actions) {
+    return;
+  }
+
+  const chalk = await chalkImport;
+  const logPrefix = chalk.yellow(`[${scenario.index} of ${scenario.total}] `);
+
+  for (let i = 0; i < scenario.actions.length; i++) {
+    let page = currentPage;
+    let action = scenario.actions[i];
+
+    if (!action) {
+      continue;
+    }
+
+    if (!!action.frame) {
+      const frames = typeof action.frame === 'string' ? [action.frame] : action.frame;
+      for (let j = 0; j < frames.length; j++) {
+        await page.waitForSelector(frames[j]);
+        const handle = await page.locator(frames[j]).elementHandle();
+        page = await handle.contentFrame();
+      }
+    }
+
+    if (!!action.check) {
+      console.log(logPrefix + 'check:', action.check);
+      await page.waitForSelector(action.check);
+      await page.check(action.check);
+    }
+
+    if (!!action.click) {
+      console.log(logPrefix + 'Click:', action.click);
+      await page.waitForSelector(action.click);
+      await page.click(action.click);
+    }
+
+    if (!!action.focus) {
+      console.log(logPrefix + 'Focus:', action.focus);
+      await page.waitForSelector(action.focus);
+      let el = await page.locator(action.focus);
+      el.focus();
+    }
+
+    if (!!action.hide) {
+      console.log(logPrefix + 'Hide:', action.hide);
+      await page.waitForSelector(action.hide);
+      let el = await page.locator(action.hide);
+      await el.evaluate((node) => node.style.setProperty('visibility', 'hidden', 'important'));
+    }
+
+    if (!!action.hover) {
+      console.log(logPrefix + 'Hover:', action.hover);
+      await page.waitForSelector(action.hover);
+      await page.locator(action.hover).hover();
+    }
+
+    if (!!action.input) {
+      if (typeof action.value != 'undefined' && !!action.file) {
+        throw '`input` action must not contains both `value` and `file`';
+      }
+
+      if (typeof action.value != 'undefined') {
+        console.log(logPrefix + 'Input:', action.input, action.value);
+        await page.waitForSelector(action.input);
+        await page.click(action.input);
+        let el = await page.locator(action.input);
+
+        if (!action.append) {
+          await el.evaluate((node) => (node.value = ''));
+        }
+
+        await el.type(action.value);
+      } else if (!!action.file) {
+        console.log(logPrefix + 'Input:', action.input, action.file);
+        await page.waitForSelector(action.input);
+        let el = await page.locator(action.input);
+
+        const files = typeof action.file === 'string' ? [action.file] : action.file;
+        let normalizedPaths = [];
+
+        files.forEach((file) => {
+          if (path.isAbsolute(file)) {
+            throw '`file` must be relative path to "visual_tests" folder';
+          }
+
+          const filePath = path.join('./visual_tests', file);
+          if (!fs.existsSync(filePath)) {
+            throw `file does not exist: ${file}`;
+          }
+
+          normalizedPaths.push(filePath);
+        });
+
+        if (action.useFileChooser) {
+          const fileChooserPromise = page.waitForEvent('filechooser');
+          el.click();
+          const fileChooser = await fileChooserPromise;
+          await fileChooser.setFiles(normalizedPaths);
+        } else {
+          el.setInputFiles(normalizedPaths);
+        }
+      }
+    }
+
+    if (!!action.remove) {
+      console.log(logPrefix + 'Remove:', action.remove);
+      await page.waitForSelector(action.remove);
+      let el = await page.locator(action.hide);
+      await el.evaluate((node) => node.style.setProperty('display', 'none', 'important'));
+    }
+
+    if (!!action.press) {
+      console.log(logPrefix + 'Press:', action.press);
+      await page.waitForSelector(action.press);
+      await page.locator(action.press).press(action.key);
+    }
+
+    if (!!action.scroll) {
+      console.log(logPrefix + 'Scroll:', action.scroll);
+      await page.waitForSelector(action.scroll);
+      await page.evaluate((scrollToSelector) => {
+        document.querySelector(scrollToSelector).scrollIntoView();
+      }, action.scroll);
+    }
+
+    if (!!action.select) {
+      console.log(logPrefix + 'Select:', action.select);
+      if (!!action.value && !!action.label) {
+        throw 'Select action must have only either `value` or `label`, not both.';
+      }
+
+      if (!action.value && !action.label) {
+        throw 'Select action must have only either `value` or `label`';
+      }
+
+      await page.waitForSelector(action.select);
+
+      let el = await page.locator(action.select);
+      if (!!action.value) {
+        await el.selectOption(action.value);
+      } else if (!!action.label) {
+        el.selectOption({ label: action.label });
+      }
+    }
+
+    if (!!action.uncheck) {
+      console.log(logPrefix + 'uncheck:', action.uncheck);
+      await page.waitForSelector(action.uncheck);
+      await page.uncheck(action.uncheck);
+    }
+
+    if (!!action.wait) {
+      console.log(logPrefix + 'Wait:', action.wait);
+      let url = action.url;
+      if (!!url) {
+        if (!!scenario.getTestUrl) {
+          url = scenario.getTestUrl(url);
+        }
+        await page.waitForURL(url);
+      }
+
+      if (parseInt(action.wait) > 0) {
+        await page.waitForTimeout(action.wait);
+      } else {
+        await page.waitForSelector(action.wait);
+      }
+    }
+  }
+};

package/.engine_scripts/playwright/clickAndHoverHelper.js

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

package/.engine_scripts/playwright/embedFiles.js

@@ -0,0 +1,28 @@
+const fs = require('fs');
+const chalkImport = import('chalk').then((m) => m.default);
+
+const embedCss = async (scenario, page) => {
+  if (scenario.useCssOverride) {
+    await require('./overrideCSS')(page, scenario);
+  }
+};
+
+const embedJs = async (scenario, page) => {
+  const jsOnReadyPath = scenario.jsOnReadyPath;
+  const chalk = await chalkImport;
+  const logPrefix = chalk.yellow(`[${scenario.index} of ${scenario.total}] `);
+
+  if (!jsOnReadyPath) {
+    return;
+  } else if (!fs.existsSync(jsOnReadyPath)) {
+    console.log(logPrefix + 'File not exist: ' + jsOnReadyPath);
+  } else {
+    const jsOnReadyScript = fs.readFileSync(jsOnReadyPath, 'utf-8');
+    await page.evaluate(jsOnReadyScript).then(() => console.log(logPrefix + '`onReady` script executed for: ' + scenario.label));
+  }
+};
+
+module.exports = async (scenario, page) => {
+  await embedJs(scenario, page);
+  await embedCss(scenario, page);
+};

package/.engine_scripts/playwright/interceptImages.js

@@ -0,0 +1,31 @@
+/**
+ * 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) {
+  page.route(IMAGE_URL_RE, route => {
+    route.fulfill({
+      body: IMAGE_DATA_BUFFER,
+      headers: HEADERS_STUB,
+      status: 200
+    });
+  });
+};

package/.engine_scripts/playwright/loadCookies.js

@@ -0,0 +1,26 @@
+const fs = require('fs');
+const YAML = require('js-yaml');
+const chalkImport = import('chalk').then((m) => m.default);
+
+module.exports = async (browserContext, scenario) => {
+  let cookies = [];
+  const cookiePath = scenario.cookiePath;
+  const chalk = await chalkImport;
+  const logPrefix = chalk.yellow(`[${scenario.index} of ${scenario.total}] `);
+
+  // Read Cookies from File, if exists
+  if (!!cookiePath && fs.existsSync(cookiePath)) {
+    let content = fs.readFileSync(cookiePath);
+    if (cookiePath.endsWith('.json')) {
+      cookies = JSON.parse(content);
+    } else if (cookiePath.endsWith('.yaml') || cookiePath.endsWith('.yml')) {
+      cookies = YAML.load(content);
+    }
+  }
+
+  // Add cookies to browser
+  browserContext.addCookies(cookies);
+
+  // console.log('Cookie state restored with:', JSON.stringify(cookies, null, 2));
+  console.log(logPrefix + 'Cookie state restored for: ' + scenario.label);
+};

package/.engine_scripts/playwright/login-user.js

@@ -0,0 +1,143 @@
+const fs = require('fs');
+const YAML = require('js-yaml');
+const { clearInterval } = require('timers');
+const globalData = {
+  domain1: {
+    isSiginingIn: false,
+    cookies: undefined,
+    domain: '',
+  },
+};
+// loginAndSaveCookies.ts
+const getSignInData = async () => {
+  const signInPath = 'visual_tests/_signing-in.yaml';
+  let signInConfig = [];
+  // Read Cookies from File, if exists
+  if (!!signInPath && fs.existsSync(signInPath)) {
+    let content = fs.readFileSync(signInPath);
+    if (signInPath.endsWith('.json')) {
+      signInConfig = JSON.parse(content);
+    } else if (signInPath.endsWith('.yaml') || signInPath.endsWith('.yml')) {
+      signInConfig = YAML.load(content);
+    }
+  }
+
+  return signInConfig;
+};
+const sleep = (time) => {
+  return new Promise((r) => {
+    setTimeout(() => {
+      r(true);
+    }, time);
+  });
+};
+const waitForCondition = (condition = () => true, intervalCheckTime = 1000, maxCheckTime = 30000) => {
+  return new Promise((resolve, reject) => {
+    if (condition()) {
+      resolve(true);
+      return;
+    }
+    let totalCheckedTime = 0;
+    let intervalCheckId = setInterval(() => {
+      totalCheckedTime += intervalCheckTime;
+      if (condition()) {
+        clearInterval(intervalCheckId);
+        resolve(true);
+        return;
+      }
+      if (totalCheckedTime >= maxCheckTime) {
+        clearInterval(intervalCheckId);
+        resolve(false);
+        return;
+      }
+    }, intervalCheckTime);
+  });
+};
+
+const executeSignIn = async (browserContext, domain) => {
+  try {
+    const pageUrl = domain;
+    const signInConfig = await getSignInData();
+    const sigInForPage = signInConfig.find((a) => a.domain.includes(pageUrl.host));
+    if (!sigInForPage) {
+      console.warn('not found signin config for page url', pageUrl);
+      return;
+    }
+
+    console.log('found signin config for page url', pageUrl);
+    const page = await browserContext.newPage();
+
+    console.log('navigate to sigin url', sigInForPage.loginUrl);
+    // Navigate to the login page
+    await page.goto(sigInForPage.loginUrl);
+
+    const inputData = async (selector, value) => {
+      await page.waitForSelector(selector);
+      console.log('found selector', selector);
+      let el = await page.locator(selector);
+      await el.fill(value);
+    };
+    await inputData(sigInForPage.userNameSelector, sigInForPage.userName);
+    await inputData(sigInForPage.passwordSelector, sigInForPage.password);
+
+    await page.waitForSelector(sigInForPage.loginButtonSelector);
+    console.log('found selector login button');
+    await Promise.all([page.click(sigInForPage.loginButtonSelector), page.waitForNavigation()]);
+
+    page.close();
+
+    console.log('sign in successfully', page.url());
+    // Save cookies after login
+    cookies = await browserContext.cookies();
+    const loggingCookies = cookies.map((a) => a.name).sort();
+    console.log('cookies', loggingCookies);
+    return cookies;
+  } catch (error) {
+    console.error('sign in error', error, domain);
+    return undefined;
+  }
+};
+const waitForOtherSiginingIn = async (signInData) => {
+  const isSignedIn = await waitForCondition(() => !signInData.isSiginingIn, 1000, 10000);
+  return isSignedIn;
+};
+const getOrSetSignInData = async (browserContext, loginScenario) => {
+  const pageUrl = new URL(loginScenario.url);
+  const signInDomain = pageUrl.host;
+  const signInData = (globalData[signInDomain] = globalData[signInDomain] || {
+    isSiginingIn: false,
+    cookies: undefined,
+    signInDomain: new URL(`${pageUrl.protocol}//${pageUrl.host}`),
+  });
+
+  if (!signInData.isSiginingIn) {
+    console.log('first signin was called');
+    // lock current signin for domain
+    signInData.isSiginingIn = true;
+    signInData.cookies = await executeSignIn(browserContext, signInData.signInDomain);
+    // release lock for domain
+    signInData.isSiginingIn = false;
+  } else {
+    const isSignedInSuccessfully = await waitForOtherSiginingIn(signInData);
+    if (isSignedInSuccessfully) {
+      console.log('cookies is populated by others, reuse it');
+    } else {
+      console.log('cookies is not populated by others, start logging in user');
+      signInData.cookies = await executeSignIn(browserContext, signInData.signInDomain);
+    }
+  }
+
+  return signInData;
+};
+module.exports = async function (browserContext, loginScenario) {
+  if (!loginScenario.requiredLogin) {
+    console.log('testing scenario run as anonymous user ', loginScenario.label);
+    return;
+  }
+  console.log('testing scenario required login cookies ', loginScenario.label);
+  let signInData = await getOrSetSignInData(browserContext, loginScenario);
+  if (signInData?.cookies) {
+    browserContext.addCookies(signInData.cookies);
+    console.log('------login cookies restored for ', loginScenario.label);
+  }
+};

package/.engine_scripts/playwright/onBefore.js

@@ -0,0 +1,4 @@
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+  await require('./login-user')(browserContext, scenario);
+  await require('./loadCookies')(browserContext, scenario);
+};

package/.engine_scripts/playwright/onReady.js

@@ -0,0 +1,38 @@
+const autoScroll = require('../auto-scroll');
+const scrollTop = require('../scroll-top');
+const chalkImport = import('chalk').then((m) => m.default);
+
+module.exports = async (page, scenario, viewport, isReference, browserContext) => {
+  await require('./embedFiles')(scenario, page);
+  await page.evaluate(autoScroll);
+  const chalk = await chalkImport;
+  const logPrefix = chalk.yellow(`[${scenario.index} of ${scenario.total}] `);
+
+  page.on('load', async (data) => {
+    try {
+      await require('./embedFiles')(scenario, data);
+      await data.evaluate(require('../auto-scroll'));
+    } catch (error) {
+      console.log(logPrefix + error);
+    }
+  });
+
+  console.log(logPrefix + 'SCENARIO > ' + scenario.label);
+
+  if (!!scenario.actions) {
+    await require('./actions')(page, scenario);
+  } else {
+    await require('./clickAndHoverHelper')(page, scenario);
+  }
+
+  if (!scenario.noScrollTop) {
+    await page.evaluate(scrollTop);
+  }
+
+  // add more ready handlers here...
+  // await page.waitForLoadState('load', { timeout: 5000 });
+
+  if (scenario.postInteractionWait) {
+    await page.waitForTimeout(scenario.postInteractionWait);
+  }
+};

package/.engine_scripts/playwright/overrideCSS.js

@@ -0,0 +1,39 @@
+const fs = require('fs');
+const path = require('path');
+const chalkImport = import('chalk').then((m) => m.default);
+
+/**
+ * OVERRIDE CSS
+ * Apply this CSS to the loaded page, as a way to override styles.
+ *
+ * Use this in an onReady script E.G.
+  ```
+  module.exports = async function(page, scenario) {
+    await require('./overrideCSS')(page, scenario);
+  }
+  ```
+ *
+ */
+
+module.exports = async (page, scenario) => {
+  const cssOverridePath = scenario.cssOverridePath;
+  const chalk = await chalkImport;
+  const logPrefix = chalk.yellow(`[${scenario.index} of ${scenario.total}] `);
+
+  if (!cssOverridePath) {
+    return;
+  } else if (!fs.existsSync(cssOverridePath)) {
+    console.log(logPrefix + 'File not exist: ' + cssOverridePath);
+    return;
+  }
+
+  // const override = fs.readFileSync(cssOverridePath, 'utf-8');
+
+  // inject arbitrary css to override styles
+  await page.addStyleTag({
+    path: cssOverridePath,
+  });
+
+  console.log(logPrefix + 'BACKSTOP_TEST_CSS_OVERRIDE injected for: ' + scenario.label);
+  // console.log(override);
+};

package/.engine_scripts/puppet/clickAndHoverHelper.js

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