use resemble's more accurate rawMisMatchPercentage value (#1337)

Author: PhilippMi

README.md

@@ -817,6 +817,8 @@ By specifying `resembleOutputOptions` in your backstop.json file you can modify
 
 Instead of calling resemble`s ignoreAntialiasing(), you may set it as a property in the config. (See [example](examples/simpleReactApp/backstop.json))
 
+Per default, Backstop uses Resemble's misMatchPercentage value. However, this value only detects mismatches above 0.01%. If you need more precision and want to use a `misMatchThreshold` below `0.01` (e.g. for large screenshots or small changes), you can set `usePreciseMatching` in the `resembleOutputOptions`. (See [example](examples/simpleReactApp/backstop.json))
+
 ```json
 "resembleOutputOptions": {
   "errorColor": {

core/util/compare/compare-resemble.js

@@ -2,15 +2,17 @@ var resemble = require('@mirzazeyrek/node-resemble-js');
 
 module.exports = function (referencePath, testPath, misMatchThreshold, resembleOutputSettings, requireSameDimensions) {
   return new Promise(function (resolve, reject) {
-    resemble.outputSettings(resembleOutputSettings || {});
-    var comparison = resemble(referencePath).compareTo(testPath);
+    const resembleSettings = resembleOutputSettings || {};
+    resemble.outputSettings(resembleSettings);
+    const comparison = resemble(referencePath).compareTo(testPath);
 
-    if (resembleOutputSettings && resembleOutputSettings.ignoreAntialiasing) {
+    if (resembleSettings.ignoreAntialiasing) {
       comparison.ignoreAntialiasing();
     }
 
     comparison.onComplete(data => {
-      if ((requireSameDimensions === false || data.isSameDimensions === true) && data.misMatchPercentage <= misMatchThreshold) {
+      const misMatchPercentage = resembleSettings.usePreciseMatching ? data.rawMisMatchPercentage : data.misMatchPercentage;
+      if ((requireSameDimensions === false || data.isSameDimensions === true) && misMatchPercentage <= misMatchThreshold) {
         return resolve(data);
       }
       reject(data);

core/util/compare/index.js

@@ -53,7 +53,7 @@ function comparePair (pair, report, config, compareConfig) {
     }
   }
 
-  var resembleOutputSettings = config.resembleOutputOptions;
+  const resembleOutputSettings = config.resembleOutputOptions;
   return compareImages(referencePath, testPath, pair, resembleOutputSettings, Test);
 }
 

core/util/engineTools.js

@@ -30,7 +30,7 @@ function genHash (str) {
   return hash.toString().replace(/^-/, 0);
 }
 
-function getRequireSameDimentions (scenario, config) {
+function getRequireSameDimensions (scenario, config) {
   if (scenario.requireSameDimensions !== undefined) {
     return scenario.requireSameDimensions;
   } else if (config.requireSameDimensions !== undefined) {
@@ -114,7 +114,7 @@ function generateTestPair (config, scenario, viewport, variantOrScenarioLabelSaf
     selector: selector,
     fileName: fileName,
     label: scenario.label,
-    requireSameDimensions: getRequireSameDimentions(scenario, config),
+    requireSameDimensions: getRequireSameDimensions(scenario, config),
     misMatchThreshold: getMisMatchThreshHold(scenario, config),
     url: scenario.url,
     referenceUrl: scenario.referenceUrl,
@@ -126,7 +126,7 @@ function generateTestPair (config, scenario, viewport, variantOrScenarioLabelSaf
 module.exports = {
   generateTestPair: generateTestPair,
   getMisMatchThreshHold: getMisMatchThreshHold,
-  getRequireSameDimentions: getRequireSameDimentions,
+  getRequireSameDimensions: getRequireSameDimensions,
   ensureFileSuffix: ensureFileSuffix,
   glueStringsWithSlash: glueStringsWithSlash,
   genHash: genHash,

examples/simpleReactApp/backstop.json

@@ -40,7 +40,8 @@
   },
   "report": ["browser"],
   "resembleOutputOptions": {
-    "ignoreAntialiasing": true
+    "ignoreAntialiasing": true,
+    "usePreciseMatching": true
   },
   "debug": false
 }

test/core/util/compare/compare-resemble_spec.js

@@ -4,6 +4,7 @@ const path = require('path');
 const REF_IMG1 = path.join(__dirname, 'refImage-1.png');
 const REF_IMG1_OPTIMIZED = path.join(__dirname, 'refImage-1-optimized.png');
 const REF_IMG2 = path.join(__dirname, 'refImage-2.png');
+const REF_IMG3 = path.join(__dirname, 'refImage-3.png');
 
 describe('compare-resemble', function () {
   it('should resolve if the same image is compared', function () {
@@ -13,6 +14,18 @@ describe('compare-resemble', function () {
     return compareResemble(REF_IMG1, REF_IMG1_OPTIMIZED, 0, {});
   });
   it('should reject if two images exceed the mismatchThreshold', function (cb) {
-    compareResemble(REF_IMG1, REF_IMG2, 0, {}).catch(() => cb());
+    compareResemble(REF_IMG1, REF_IMG2, 0, {}).then(
+      () => cb(new Error('should have rejected')),
+      () => cb()
+    );
+  });
+  it('should use resemble\'s rounded misMatchPercentage value per default', function () {
+    return compareResemble(REF_IMG1, REF_IMG3, 0, {});
+  });
+  it('should use resemble\'s more precise rawMisMatchPercentage value if specified', function (cb) {
+    compareResemble(REF_IMG1, REF_IMG3, 0, { usePreciseMatching: true }, true).then(
+      () => cb(new Error('should have rejected')),
+      () => cb()
+    );
   });
 });