Cypress Blink Image Diff Plugin

cypress-blink-diff.js

const fs = require("fs-extra");
const BlinkDiff = require("blink-diff");
const path = require("path");

module.exports = function diffImage(props) {
  const imageName = path.basename(props.path);
  if (imageName.endsWith("(failed).png")) {
    return;
  }
  // There's already a folder 'screengrabs' created before Cypress runs
  const snapshotPath = path.join("cypress", "screengrabs", imageName);

  if (fs.pathExistsSync(snapshotPath)) {
    // There's already a folder 'screendiff' created before Cypress runs
    const diffPath = path.join("cypress", "screendiff", imageName);
    const diff = new BlinkDiff({
      imageAPath: props.path,
      imageBPath: snapshotPath,
      thresholdType: BlinkDiff.THRESHOLD_PERCENT,
      threshold: 0.0001,
      imageOutputPath: diffPath
    });
    return new Promise((resolve, reject) => {
      diff.run((error, result) => {
        fs.removeSync(props.path);
        if (error) {
          resolve(
            "Failed to run blink-diff due to this error: ",
            error.message
          );
          console.error(error);
        } else {
          const pixelDiff = (result.differences / result.dimension) * 100;
          if (diff.hasPassed(result.code)) {
            fs.removeSync(diffPath);
            resolve("Screengrab didn't match by " + pixelDiff.toFixed(3));
            console.log("Screengrab didn't match by " + pixelDiff.toFixed(3));
          } else {
            reject(
              new Error(
                "Screengrab didn't match by " +
                  pixelDiff.toFixed(3) +
                  "%. Check file " +
                  imageName
              )
            );
          }
        }
      });
    });
  } else {
    fs.moveSync(props.path, snapshotPath);
    return Promise.resolve("Success");
  }
};

// Usage in cypress/plugins/index.js
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
  on("after:screenshot", diffImage);
};