@o3r/testing 13.0.0-next.6 → 13.0.0-prerelease.2

package/visual-test/utils.js

@@ -10,18 +10,29 @@ exports.toggleVisualTestingRender = toggleVisualTestingRender;
  * @note this function is evaluated in the context of the page and should not use external variables
  * @param ignoreClass
  */
-function prepareVisualTesting(ignoreClass) {
-    if (ignoreClass === void 0) { ignoreClass = 'e2e-ignore'; }
-    var visualTestingCss = document.createElement('style');
-    var visualTestingClass = 'visual-testing-render';
-    visualTestingCss.textContent = "\n    .".concat(visualTestingClass, " .").concat(ignoreClass, " {position: relative;}\n\n    .").concat(visualTestingClass, " .").concat(ignoreClass, ":before {\n      z-index: 999;\n      content: '';\n      width: 100%;\n      height: 100%;\n      background: grey;\n      position: absolute;\n      left: 0;\n      top: 0;\n  }");
+function prepareVisualTesting(ignoreClass = 'e2e-ignore') {
+    const visualTestingCss = document.createElement('style');
+    const visualTestingClass = 'visual-testing-render';
+    visualTestingCss.textContent = `
+    .${visualTestingClass} .${ignoreClass} {position: relative;}
+
+    .${visualTestingClass} .${ignoreClass}:before {
+      z-index: 999;
+      content: '';
+      width: 100%;
+      height: 100%;
+      background: grey;
+      position: absolute;
+      left: 0;
+      top: 0;
+  }`;
     document.head.append(visualTestingCss);
 }
 /**
  * Determine if the visual testing is enabled
  */
 function isVisualTestingEnabled() {
-    var visualTestingClass = 'visual-testing-render';
+    const visualTestingClass = 'visual-testing-render';
     return document.body.classList.contains(visualTestingClass);
 }
 /**
@@ -30,7 +41,7 @@ function isVisualTestingEnabled() {
  * @param enabled
  */
 function toggleVisualTestingRender(enabled) {
-    var visualTestingClass = 'visual-testing-render';
+    const visualTestingClass = 'visual-testing-render';
     if (enabled) {
         document.body.classList.add(visualTestingClass);
     }

package/visual-test/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/visual-test/utils.ts"],"names":[],"mappings":";;AAOA,oDAkBC;AAKD,wDAGC;AAOD,8DAOC;AA/CD;;;;;;GAMG;AACH,SAAgB,oBAAoB,CAAC,WAA0B;IAA1B,4BAAA,EAAA,0BAA0B;IAC7D,IAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,IAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,gBAAgB,CAAC,WAAW,GAAG,iBAC1B,kBAAkB,eAAK,WAAW,4CAElC,kBAAkB,eAAK,WAAW,wLASrC,CAAC;IAEH,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,SAAgB,sBAAsB;IACpC,IAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC9D,CAAC;AAED;;;;GAIG;AACH,SAAgB,yBAAyB,CAAC,OAAgB;IACxD,IAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,CAAC;SAAM,CAAC;QACN,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;AACH,CAAC","sourcesContent":["/**\n * Prepare css rule to hide specific blocks\n *\n * Should be called only once during the visual test.\n * @note this function is evaluated in the context of the page and should not use external variables\n * @param ignoreClass\n */\nexport function prepareVisualTesting(ignoreClass = 'e2e-ignore') {\n  const visualTestingCss = document.createElement('style');\n  const visualTestingClass = 'visual-testing-render';\n  visualTestingCss.textContent = `\n    .${visualTestingClass} .${ignoreClass} {position: relative;}\n\n    .${visualTestingClass} .${ignoreClass}:before {\n      z-index: 999;\n      content: '';\n      width: 100%;\n      height: 100%;\n      background: grey;\n      position: absolute;\n      left: 0;\n      top: 0;\n  }`;\n\n  document.head.append(visualTestingCss);\n}\n\n/**\n * Determine if the visual testing is enabled\n */\nexport function isVisualTestingEnabled() {\n  const visualTestingClass = 'visual-testing-render';\n  return document.body.classList.contains(visualTestingClass);\n}\n\n/**\n * Toggle the visual testing view : if it is active, will hide tagged components as grey blocks.\n * @note this function is evaluated in the context of the page and cannot use external code\n * @param enabled\n */\nexport function toggleVisualTestingRender(enabled: boolean) {\n  const visualTestingClass = 'visual-testing-render';\n  if (enabled) {\n    document.body.classList.add(visualTestingClass);\n  } else {\n    document.body.classList.remove(visualTestingClass);\n  }\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/visual-test/utils.ts"],"names":[],"mappings":";;AAOA,oDAkBC;AAKD,wDAGC;AAOD,8DAOC;AA/CD;;;;;;GAMG;AACH,SAAgB,oBAAoB,CAAC,WAAW,GAAG,YAAY;IAC7D,MAAM,gBAAgB,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACzD,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,gBAAgB,CAAC,WAAW,GAAG;OAC1B,kBAAkB,KAAK,WAAW;;OAElC,kBAAkB,KAAK,WAAW;;;;;;;;;IASrC,CAAC;IAEH,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AACzC,CAAC;AAED;;GAEG;AACH,SAAgB,sBAAsB;IACpC,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,OAAO,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;AAC9D,CAAC;AAED;;;;GAIG;AACH,SAAgB,yBAAyB,CAAC,OAAgB;IACxD,MAAM,kBAAkB,GAAG,uBAAuB,CAAC;IACnD,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAClD,CAAC;SAAM,CAAC;QACN,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;IACrD,CAAC;AACH,CAAC","sourcesContent":["/**\n * Prepare css rule to hide specific blocks\n *\n * Should be called only once during the visual test.\n * @note this function is evaluated in the context of the page and should not use external variables\n * @param ignoreClass\n */\nexport function prepareVisualTesting(ignoreClass = 'e2e-ignore') {\n  const visualTestingCss = document.createElement('style');\n  const visualTestingClass = 'visual-testing-render';\n  visualTestingCss.textContent = `\n    .${visualTestingClass} .${ignoreClass} {position: relative;}\n\n    .${visualTestingClass} .${ignoreClass}:before {\n      z-index: 999;\n      content: '';\n      width: 100%;\n      height: 100%;\n      background: grey;\n      position: absolute;\n      left: 0;\n      top: 0;\n  }`;\n\n  document.head.append(visualTestingCss);\n}\n\n/**\n * Determine if the visual testing is enabled\n */\nexport function isVisualTestingEnabled() {\n  const visualTestingClass = 'visual-testing-render';\n  return document.body.classList.contains(visualTestingClass);\n}\n\n/**\n * Toggle the visual testing view : if it is active, will hide tagged components as grey blocks.\n * @note this function is evaluated in the context of the page and cannot use external code\n * @param enabled\n */\nexport function toggleVisualTestingRender(enabled: boolean) {\n  const visualTestingClass = 'visual-testing-render';\n  if (enabled) {\n    document.body.classList.add(visualTestingClass);\n  } else {\n    document.body.classList.remove(visualTestingClass);\n  }\n}\n"]}

package/visual-test/visual-test.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-test.d.ts","sourceRoot":"","sources":["../../src/visual-test/visual-test.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AAEjB,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,eAAe,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,iBAAiB,CAMjD,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6GAA6G;IAC7G,UAAU,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,0FAA0F;IAC1F,sBAAsB,CAAC,EAAE;QAAE,kBAAkB,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,6GAA6G;IAC7G,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB;sBAEb,gBAAgB,aAAa,gBAAgB;;;;EA8BlE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,wBAAwB,EAAE,MAAM,EAAE,kBAAkB,SAAqB,QASjK;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,oBAAoB,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,QAYxI;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,GAAG,gBAAgB,CA4B9I;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAC3B,aAAa,EAAE,MAAM,EACrB,wBAAwB,EAAE,MAAM,EAChC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,oBAAoB,SAAY,EAChC,SAAS,SAAI,EACb,YAAY,UAAQ,EACpB,sBAAsB,SAA0B,oBAUjD"}
+{"version":3,"file":"visual-test.d.ts","sourceRoot":"","sources":["../../src/visual-test/visual-test.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,GAAG,EACJ,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,oBAAoB,EACpB,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AAEjB,wDAAwD;AACxD,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,UAAU,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,eAAe,EAAE,MAAM,CAAC;IACxB,iDAAiD;IACjD,WAAW,EAAE,MAAM,CAAC;IACpB,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,uDAAuD;AACvD,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,iBAAiB,CAMjD,CAAC;AAEX;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6GAA6G;IAC7G,UAAU,CAAC,EAAE;QAAE,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,0FAA0F;IAC1F,sBAAsB,CAAC,EAAE;QAAE,kBAAkB,EAAE,MAAM,CAAA;KAAE,CAAC;IACxD,6GAA6G;IAC7G,IAAI,CAAC,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,cAAc,EAAE,MAAM,CAAA;KAAE,CAAC;IACzE,yCAAyC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;GAGG;AACH,wBAAgB,mBAAmB;sBAEb,gBAAgB,aAAa,gBAAgB;;;;EA+BlE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,wBAAwB,EAAE,MAAM,EAAE,kBAAkB,SAAqB,QASjK;AAED;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,oBAAoB,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,QAYxI;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,oBAAoB,EAAE,MAAM,GAAG,gBAAgB,CA4B9I;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAC3B,aAAa,EAAE,MAAM,EACrB,wBAAwB,EAAE,MAAM,EAChC,MAAM,EAAE,MAAM,EACd,YAAY,EAAE,MAAM,EACpB,oBAAoB,SAAY,EAChC,SAAS,SAAI,EACb,YAAY,UAAQ,EACpB,sBAAsB,SAA0B,oBAUjD"}

package/visual-test/visual-test.js

@@ -6,10 +6,10 @@ exports.saveScreenshot = saveScreenshot;
 exports.writeScreenshotsDiff = writeScreenshotsDiff;
 exports.compareScreenshot = compareScreenshot;
 exports.o3rVisualTest = o3rVisualTest;
-var fs = require("node:fs");
-var path = require("node:path");
-var pixelmatch = require("pixelmatch");
-var pngjs_1 = require("pngjs");
+const fs = require("node:fs");
+const path = require("node:path");
+const pixelmatch_1 = require("pixelmatch");
+const pngjs_1 = require("pngjs");
 var utils_1 = require("./utils");
 Object.defineProperty(exports, "prepareVisualTesting", { enumerable: true, get: function () { return utils_1.prepareVisualTesting; } });
 Object.defineProperty(exports, "toggleVisualTestingRender", { enumerable: true, get: function () { return utils_1.toggleVisualTestingRender; } });
@@ -27,7 +27,7 @@ exports.visualTestMessages = {
  */
 function toBeVisuallySimilar() {
     return {
-        compare: function (actual, _expected) {
+        compare: (actual, _expected) => {
             if (actual.generateMode) {
                 return {
                     pass: true,
@@ -37,19 +37,19 @@ function toBeVisuallySimilar() {
             if (actual.baseScreenshotNotFound) {
                 return {
                     pass: false,
-                    message: "".concat(exports.visualTestMessages.baseImgNotFound, " ").concat(actual.baseScreenshotNotFound.baseScreenshotPath)
+                    message: `${exports.visualTestMessages.baseImgNotFound} ${actual.baseScreenshotNotFound.baseScreenshotPath}`
                 };
             }
             if (actual.imagesSize) {
                 return {
                     pass: false,
-                    message: "".concat(exports.visualTestMessages.imagesSize, " ").concat(actual.imagesSize.screenshotName)
+                    message: `${exports.visualTestMessages.imagesSize} ${actual.imagesSize.screenshotName}`
                 };
             }
             if (actual.diff && actual.diff.actualDiff > actual.diff.threshold) {
                 return {
                     pass: false,
-                    message: "".concat(actual.diff.actualDiff, " > ").concat(actual.diff.threshold, " : ").concat(exports.visualTestMessages.diffMessage, " ").concat(actual.diff.screenshotName)
+                    message: `${actual.diff.actualDiff} > ${actual.diff.threshold} : ${exports.visualTestMessages.diffMessage} ${actual.diff.screenshotName}`
                 };
             }
             return {
@@ -70,14 +70,13 @@ function toBeVisuallySimilar() {
  * @param filenameWithoutExtension file name to save the screenshot - .png will be added at the end
  * @param distScreenshotsDir Name of the directory to save the screenshots
  */
-function saveScreenshot(screenshot, scenarioName, device, filenameWithoutExtension, distScreenshotsDir) {
-    if (distScreenshotsDir === void 0) { distScreenshotsDir = 'dist-screenshots'; }
-    var screenshotsDir = path.resolve(distScreenshotsDir, scenarioName, "".concat(device.replace(/ +/g, '_')));
+function saveScreenshot(screenshot, scenarioName, device, filenameWithoutExtension, distScreenshotsDir = 'dist-screenshots') {
+    const screenshotsDir = path.resolve(distScreenshotsDir, scenarioName, `${device.replace(/ +/g, '_')}`);
     if (!fs.existsSync(screenshotsDir)) {
         fs.mkdirSync(screenshotsDir, { recursive: true });
     }
-    var fullFileName = "".concat(filenameWithoutExtension, ".png");
-    var stream = fs.createWriteStream(path.resolve(screenshotsDir, fullFileName));
+    const fullFileName = `${filenameWithoutExtension}.png`;
+    const stream = fs.createWriteStream(path.resolve(screenshotsDir, fullFileName));
     stream.write(Buffer.from(screenshot, 'base64'));
     stream.end();
 }
@@ -91,13 +90,13 @@ function saveScreenshot(screenshot, scenarioName, device, filenameWithoutExtensi
  * @param currentImg the actual taken screenshot image
  */
 function writeScreenshotsDiff(pathToScenarioReport, screenshotsDirName, diff, baseImage, currentImg) {
-    var destScreenshotsDiffDir = path.join(pathToScenarioReport, 'screenshots-diff', screenshotsDirName);
+    const destScreenshotsDiffDir = path.join(pathToScenarioReport, 'screenshots-diff', screenshotsDirName);
     if (!fs.existsSync(destScreenshotsDiffDir)) {
         fs.mkdirSync(destScreenshotsDiffDir, { recursive: true });
     }
-    var diffPath = path.resolve(destScreenshotsDiffDir, 'diff.png');
-    var oldPath = path.resolve(destScreenshotsDiffDir, 'old.png');
-    var newPath = path.resolve(destScreenshotsDiffDir, 'new.png');
+    const diffPath = path.resolve(destScreenshotsDiffDir, 'diff.png');
+    const oldPath = path.resolve(destScreenshotsDiffDir, 'old.png');
+    const newPath = path.resolve(destScreenshotsDiffDir, 'new.png');
     fs.writeFileSync(diffPath, pngjs_1.PNG.sync.write(diff));
     fs.writeFileSync(oldPath, pngjs_1.PNG.sync.write(baseImage));
     fs.writeFileSync(newPath, pngjs_1.PNG.sync.write(currentImg));
@@ -111,17 +110,17 @@ function writeScreenshotsDiff(pathToScenarioReport, screenshotsDirName, diff, ba
  * @returns An object of visual test result type
  */
 function compareScreenshot(screenshot, baseImagePath, threshold, pathToScenarioReport) {
-    var baseImageExists = fs.existsSync(baseImagePath);
+    const baseImageExists = fs.existsSync(baseImagePath);
     if (baseImageExists) {
-        var baseImage = pngjs_1.PNG.sync.read(fs.readFileSync(baseImagePath));
-        var width = baseImage.width, height = baseImage.height;
-        var diff = new pngjs_1.PNG({ width: width, height: height });
-        var screenshotBuffer = Buffer.from(screenshot, 'base64');
-        var currentImg = pngjs_1.PNG.sync.read(screenshotBuffer);
-        var diffDirName = path.basename(baseImagePath, '.png');
-        var result = void 0;
+        const baseImage = pngjs_1.PNG.sync.read(fs.readFileSync(baseImagePath));
+        const { width, height } = baseImage;
+        const diff = new pngjs_1.PNG({ width, height });
+        const screenshotBuffer = Buffer.from(screenshot, 'base64');
+        const currentImg = pngjs_1.PNG.sync.read(screenshotBuffer);
+        const diffDirName = path.basename(baseImagePath, '.png');
+        let result;
         try {
-            result = pixelmatch(baseImage.data, currentImg.data, diff.data, width, height, { threshold: 0.1 });
+            result = (0, pixelmatch_1.default)(baseImage.data, currentImg.data, diff.data, width, height, { threshold: 0.1 });
         }
         catch (err) {
             if (!err.toString().includes('Image sizes do not match.')) {
@@ -130,11 +129,11 @@ function compareScreenshot(screenshot, baseImagePath, threshold, pathToScenarioR
             writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);
             return { imagesSize: { screenshotName: diffDirName } };
         }
-        var pr = Math.round(100 * 100 * result / (width * height)) / 100;
+        const pr = Math.round(100 * 100 * result / (width * height)) / 100;
         if (pr > threshold) {
             writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);
         }
-        return { diff: { actualDiff: pr, threshold: threshold, screenshotName: diffDirName } };
+        return { diff: { actualDiff: pr, threshold, screenshotName: diffDirName } };
     }
     else {
         return { baseScreenshotNotFound: { baseScreenshotPath: baseImagePath } };
@@ -152,18 +151,14 @@ function compareScreenshot(screenshot, baseImagePath, threshold, pathToScenarioR
  * @param generateMode If true it will generate the screenshot file without screenshots comparison
  * @param baseScreenshotsDirPath The folder path to search base screenshots; used only in compare mode
  */
-function o3rVisualTest(screenshotObj, filenameWithoutExtension, device, scenarioName, pathToScenarioReport, threshold, generateMode, baseScreenshotsDirPath) {
-    if (pathToScenarioReport === void 0) { pathToScenarioReport = 'reports'; }
-    if (threshold === void 0) { threshold = 0; }
-    if (generateMode === void 0) { generateMode = false; }
-    if (baseScreenshotsDirPath === void 0) { baseScreenshotsDirPath = 'dist-screenshots-base'; }
+function o3rVisualTest(screenshotObj, filenameWithoutExtension, device, scenarioName, pathToScenarioReport = 'reports', threshold = 0, generateMode = false, baseScreenshotsDirPath = 'dist-screenshots-base') {
     if (generateMode) {
         saveScreenshot(screenshotObj, scenarioName, device, filenameWithoutExtension);
         return { generateMode: true };
     }
     else {
-        var baseImagePath = path.resolve(baseScreenshotsDirPath, scenarioName, device, "".concat(filenameWithoutExtension, ".png"));
-        var visualTestResult = compareScreenshot(screenshotObj, baseImagePath, threshold, pathToScenarioReport);
+        const baseImagePath = path.resolve(baseScreenshotsDirPath, scenarioName, device, `${filenameWithoutExtension}.png`);
+        const visualTestResult = compareScreenshot(screenshotObj, baseImagePath, threshold, pathToScenarioReport);
         return visualTestResult;
     }
 }

package/visual-test/visual-test.js.map

@@ -1 +1 @@
-{"version":3,"file":"visual-test.js","sourceRoot":"","sources":["../../src/visual-test/visual-test.ts"],"names":[],"mappings":"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","sourcesContent":["import * as fs from 'node:fs';\nimport * as path from 'node:path';\nimport * as pixelmatch from 'pixelmatch';\nimport {\n  PNG,\n} from 'pngjs';\n\nexport {\n  prepareVisualTesting,\n  toggleVisualTestingRender,\n} from './utils';\n\n/** Error types returned by visual testing comparison */\nexport interface VisualTestMessage {\n  /** Error message when base image and actual image have different sizes */\n  imagesSize: string;\n  /** Error message when base screensot not found */\n  baseImgNotFound: string;\n  /** Error message when the threshold is passed */\n  diffMessage: string;\n  /** The message in case of success */\n  success: string;\n  /** The message in case of generate mode run */\n  generateMode: string;\n}\n\n/** Error messages in case of visual testing failure */\nexport const visualTestMessages: Readonly<VisualTestMessage> = {\n  imagesSize: 'Image sizes do not match for:',\n  diffMessage: 'Diff between images is greater than threshold for:',\n  baseImgNotFound: 'Base screenshot file not found:',\n  success: 'Visual test successful',\n  generateMode: 'Run in generate screenshot mode'\n} as const;\n\n/**\n * Object returned by a visual test operation\n */\nexport interface VisualTestResult {\n  /** Error object when base image and actual image have different sizes; Contains the screenshot ffile name */\n  imagesSize?: { screenshotName: string };\n  /** Error object when base screensot not found. Contains the not found path as a string */\n  baseScreenshotNotFound?: { baseScreenshotPath: string };\n  /** Object containing the actual diff between images as percentage, the threshold and screenshot file name */\n  diff?: { actualDiff: number; threshold: number; screenshotName: string };\n  /** Run only generation of screenshots */\n  generateMode?: boolean;\n}\n\n/**\n * Visual test matcher\n * Based on the VisualTestResult object return by compareScreenshots function, this matcher will compute the error messages\n */\nexport function toBeVisuallySimilar() {\n  return {\n    compare: (actual: VisualTestResult, _expected: VisualTestResult) => {\n      if (actual.generateMode) {\n        return {\n          pass: true,\n          message: visualTestMessages.generateMode\n        };\n      }\n      if (actual.baseScreenshotNotFound) {\n        return {\n          pass: false,\n          message: `${visualTestMessages.baseImgNotFound} ${actual.baseScreenshotNotFound.baseScreenshotPath}` };\n      }\n      if (actual.imagesSize) {\n        return {\n          pass: false,\n          message: `${visualTestMessages.imagesSize} ${actual.imagesSize.screenshotName}`\n        };\n      }\n      if (actual.diff && actual.diff.actualDiff > actual.diff.threshold) {\n        return {\n          pass: false,\n          message: `${actual.diff.actualDiff} > ${actual.diff.threshold} : ${visualTestMessages.diffMessage} ${actual.diff.screenshotName}`\n        };\n      }\n      return {\n        pass: true,\n        message: visualTestMessages.success\n      };\n    }\n  };\n}\n\n/**\n * It will create a file for the passed screenshot object.\n * The path of the new file will be calculated using the parameters\n * Ex: ./dist-screenshots\\OWBooking\\windows_chrome_91\\fare-page-after-click-on-continue-0.png\n * distScreenshotsDir/scenarionName/device/filenameWithoutExtension.png\n * @param screenshot The screenshot object captured. Ex: for protractor - browser.takeScreenshot()\n * @param scenarioName E2e Scenario class name\n * @param device Details of the platform on which the test is run. If there are spaces the helper will do the concatenation. Ex: `Windows 10 chrome 89`\n * @param filenameWithoutExtension file name to save the screenshot - .png will be added at the end\n * @param distScreenshotsDir Name of the directory to save the screenshots\n */\nexport function saveScreenshot(screenshot: string, scenarioName: string, device: string, filenameWithoutExtension: string, distScreenshotsDir = 'dist-screenshots') {\n  const screenshotsDir = path.resolve(distScreenshotsDir, scenarioName, `${device.replace(/ +/g, '_')}`);\n  if (!fs.existsSync(screenshotsDir)) {\n    fs.mkdirSync(screenshotsDir, { recursive: true });\n  }\n  const fullFileName = `${filenameWithoutExtension}.png`;\n  const stream = fs.createWriteStream(path.resolve(screenshotsDir, fullFileName));\n  stream.write(Buffer.from(screenshot, 'base64'));\n  stream.end();\n}\n\n/**\n * Write the 3 images (base/new/diff) on the reports folder\n * The path inside the reports forlder will be calculated using the parameters\n * @param pathToScenarioReport Path where the scenario report is saved inside reports folder\n * @param screenshotsDirName Name of the directory which will contain the 3 images\n * @param diff diff image\n * @param baseImage the base image\n * @param currentImg the actual taken screenshot image\n */\nexport function writeScreenshotsDiff(pathToScenarioReport: string, screenshotsDirName: string, diff: PNG, baseImage: PNG, currentImg: PNG) {\n  const destScreenshotsDiffDir = path.join(pathToScenarioReport, 'screenshots-diff', screenshotsDirName);\n  if (!fs.existsSync(destScreenshotsDiffDir)) {\n    fs.mkdirSync(destScreenshotsDiffDir, { recursive: true });\n  }\n\n  const diffPath = path.resolve(destScreenshotsDiffDir, 'diff.png');\n  const oldPath = path.resolve(destScreenshotsDiffDir, 'old.png');\n  const newPath = path.resolve(destScreenshotsDiffDir, 'new.png');\n  fs.writeFileSync(diffPath, PNG.sync.write(diff));\n  fs.writeFileSync(oldPath, PNG.sync.write(baseImage));\n  fs.writeFileSync(newPath, PNG.sync.write(currentImg));\n}\n\n/**\n * Compare images helper function. If the comparison fails the 3 images (base/new/diff) will be written inside the reports folder of the actual scenario\n * @param screenshot Actual captured screenshot object\n * @param baseImagePath The path to the base screenshot\n * @param threshold The diff between base screenshot and the current one should not be bigger than this value.\n * @param pathToScenarioReport Path where the scenario report is saved inside reports folder. Used to compute the path to write diff images in case there is a diff at comparison\n * @returns An object of visual test result type\n */\nexport function compareScreenshot(screenshot: string, baseImagePath: string, threshold: number, pathToScenarioReport: string): VisualTestResult {\n  const baseImageExists = fs.existsSync(baseImagePath);\n  if (baseImageExists) {\n    const baseImage = PNG.sync.read(fs.readFileSync(baseImagePath));\n    const { width, height } = baseImage;\n    const diff = new PNG({ width, height });\n\n    const screenshotBuffer = Buffer.from(screenshot, 'base64');\n    const currentImg = PNG.sync.read(screenshotBuffer);\n    const diffDirName = path.basename(baseImagePath, '.png');\n    let result;\n    try {\n      result = pixelmatch(baseImage.data, currentImg.data, diff.data, width, height, { threshold: 0.1 });\n    } catch (err: any) {\n      if (!err.toString().includes('Image sizes do not match.')) {\n        throw err;\n      }\n      writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);\n      return { imagesSize: { screenshotName: diffDirName } };\n    }\n    const pr = Math.round(100 * 100 * result / (width * height)) / 100;\n    if (pr > threshold) {\n      writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);\n    }\n    return { diff: { actualDiff: pr, threshold, screenshotName: diffDirName } };\n  } else {\n    return { baseScreenshotNotFound: { baseScreenshotPath: baseImagePath } };\n  }\n}\n\n/**\n * Helper function to perform a visual test operation\n * @param screenshotObj Ex: for protractor browser.takeScreenshot()\n * @param filenameWithoutExtension file name to save the screenshot - .png will be added at the end\n * @param device os followed by browser version - ex: `Windows 10 chrome 89`\n * @param scenarioName E2e Scenario class name\n * @param pathToScenarioReport Path used in compare mode for saving the base,new,diff images in reports in case there is a diff\n * @param threshold The diff between base screenshot and the current one should not be bigger than this value.\n * If the diff is bigger, 3 png files will be created: base screenshot, new screenshot and diff image\n * @param generateMode If true it will generate the screenshot file without screenshots comparison\n * @param baseScreenshotsDirPath The folder path to search base screenshots; used only in compare mode\n */\nexport function o3rVisualTest(\n  screenshotObj: string,\n  filenameWithoutExtension: string,\n  device: string,\n  scenarioName: string,\n  pathToScenarioReport = 'reports',\n  threshold = 0,\n  generateMode = false,\n  baseScreenshotsDirPath = 'dist-screenshots-base'\n) {\n  if (generateMode) {\n    saveScreenshot(screenshotObj, scenarioName, device, filenameWithoutExtension);\n    return { generateMode: true };\n  } else {\n    const baseImagePath = path.resolve(baseScreenshotsDirPath, scenarioName, device, `${filenameWithoutExtension}.png`);\n    const visualTestResult = compareScreenshot(screenshotObj, baseImagePath, threshold, pathToScenarioReport);\n    return visualTestResult;\n  }\n}\n"]}
+{"version":3,"file":"visual-test.js","sourceRoot":"","sources":["../../src/visual-test/visual-test.ts"],"names":[],"mappings":";;;AAqDA,kDAiCC;AAaD,wCASC;AAWD,oDAYC;AAUD,8CA4BC;AAcD,sCAkBC;AAzMD,8BAA8B;AAC9B,kCAAkC;AAClC,2CAAoC;AACpC,iCAEe;AAEf,iCAGiB;AAFf,6GAAA,oBAAoB,OAAA;AACpB,kHAAA,yBAAyB,OAAA;AAiB3B,uDAAuD;AAC1C,QAAA,kBAAkB,GAAgC;IAC7D,UAAU,EAAE,+BAA+B;IAC3C,WAAW,EAAE,oDAAoD;IACjE,eAAe,EAAE,iCAAiC;IAClD,OAAO,EAAE,wBAAwB;IACjC,YAAY,EAAE,iCAAiC;CACvC,CAAC;AAgBX;;;GAGG;AACH,SAAgB,mBAAmB;IACjC,OAAO;QACL,OAAO,EAAE,CAAC,MAAwB,EAAE,SAA2B,EAAE,EAAE;YACjE,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;gBACxB,OAAO;oBACL,IAAI,EAAE,IAAI;oBACV,OAAO,EAAE,0BAAkB,CAAC,YAAY;iBACzC,CAAC;YACJ,CAAC;YACD,IAAI,MAAM,CAAC,sBAAsB,EAAE,CAAC;gBAClC,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,GAAG,0BAAkB,CAAC,eAAe,IAAI,MAAM,CAAC,sBAAsB,CAAC,kBAAkB,EAAE;iBACrG,CAAC;YACJ,CAAC;YACD,IAAI,MAAM,CAAC,UAAU,EAAE,CAAC;gBACtB,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,GAAG,0BAAkB,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE;iBAChF,CAAC;YACJ,CAAC;YACD,IAAI,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;gBAClE,OAAO;oBACL,IAAI,EAAE,KAAK;oBACX,OAAO,EAAE,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,MAAM,MAAM,CAAC,IAAI,CAAC,SAAS,MAAM,0BAAkB,CAAC,WAAW,IAAI,MAAM,CAAC,IAAI,CAAC,cAAc,EAAE;iBAClI,CAAC;YACJ,CAAC;YACD,OAAO;gBACL,IAAI,EAAE,IAAI;gBACV,OAAO,EAAE,0BAAkB,CAAC,OAAO;aACpC,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC;AAED;;;;;;;;;;GAUG;AACH,SAAgB,cAAc,CAAC,UAAkB,EAAE,YAAoB,EAAE,MAAc,EAAE,wBAAgC,EAAE,kBAAkB,GAAG,kBAAkB;IAChK,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,kBAAkB,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;IACvG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;QACnC,EAAE,CAAC,SAAS,CAAC,cAAc,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IACpD,CAAC;IACD,MAAM,YAAY,GAAG,GAAG,wBAAwB,MAAM,CAAC;IACvD,MAAM,MAAM,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC,CAAC;IAChF,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAChD,MAAM,CAAC,GAAG,EAAE,CAAC;AACf,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,oBAAoB,CAAC,oBAA4B,EAAE,kBAA0B,EAAE,IAAS,EAAE,SAAc,EAAE,UAAe;IACvI,MAAM,sBAAsB,GAAG,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;IACvG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,sBAAsB,CAAC,EAAE,CAAC;QAC3C,EAAE,CAAC,SAAS,CAAC,sBAAsB,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,UAAU,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAChE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAChE,EAAE,CAAC,aAAa,CAAC,QAAQ,EAAE,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IACjD,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;IACrD,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;AACxD,CAAC;AAED;;;;;;;GAOG;AACH,SAAgB,iBAAiB,CAAC,UAAkB,EAAE,aAAqB,EAAE,SAAiB,EAAE,oBAA4B;IAC1H,MAAM,eAAe,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACrD,IAAI,eAAe,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,WAAG,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC;QAChE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,WAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;QAExC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;QAC3D,MAAM,UAAU,GAAG,WAAG,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACnD,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;QACzD,IAAI,MAAM,CAAC;QACX,IAAI,CAAC;YACH,MAAM,GAAG,IAAA,oBAAU,EAAC,SAAS,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC;QACrG,CAAC;QAAC,OAAO,GAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,2BAA2B,CAAC,EAAE,CAAC;gBAC1D,MAAM,GAAG,CAAC;YACZ,CAAC;YACD,oBAAoB,CAAC,oBAAoB,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;YACrF,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,CAAC;QACzD,CAAC;QACD,MAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,MAAM,GAAG,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,GAAG,GAAG,CAAC;QACnE,IAAI,EAAE,GAAG,SAAS,EAAE,CAAC;YACnB,oBAAoB,CAAC,oBAAoB,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;QACvF,CAAC;QACD,OAAO,EAAE,IAAI,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,EAAE,CAAC;IAC9E,CAAC;SAAM,CAAC;QACN,OAAO,EAAE,sBAAsB,EAAE,EAAE,kBAAkB,EAAE,aAAa,EAAE,EAAE,CAAC;IAC3E,CAAC;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,SAAgB,aAAa,CAC3B,aAAqB,EACrB,wBAAgC,EAChC,MAAc,EACd,YAAoB,EACpB,oBAAoB,GAAG,SAAS,EAChC,SAAS,GAAG,CAAC,EACb,YAAY,GAAG,KAAK,EACpB,sBAAsB,GAAG,uBAAuB;IAEhD,IAAI,YAAY,EAAE,CAAC;QACjB,cAAc,CAAC,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,wBAAwB,CAAC,CAAC;QAC9E,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;IAChC,CAAC;SAAM,CAAC;QACN,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,wBAAwB,MAAM,CAAC,CAAC;QACpH,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,aAAa,EAAE,aAAa,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;QAC1G,OAAO,gBAAgB,CAAC;IAC1B,CAAC;AACH,CAAC","sourcesContent":["import * as fs from 'node:fs';\nimport * as path from 'node:path';\nimport pixelmatch from 'pixelmatch';\nimport {\n  PNG,\n} from 'pngjs';\n\nexport {\n  prepareVisualTesting,\n  toggleVisualTestingRender,\n} from './utils';\n\n/** Error types returned by visual testing comparison */\nexport interface VisualTestMessage {\n  /** Error message when base image and actual image have different sizes */\n  imagesSize: string;\n  /** Error message when base screensot not found */\n  baseImgNotFound: string;\n  /** Error message when the threshold is passed */\n  diffMessage: string;\n  /** The message in case of success */\n  success: string;\n  /** The message in case of generate mode run */\n  generateMode: string;\n}\n\n/** Error messages in case of visual testing failure */\nexport const visualTestMessages: Readonly<VisualTestMessage> = {\n  imagesSize: 'Image sizes do not match for:',\n  diffMessage: 'Diff between images is greater than threshold for:',\n  baseImgNotFound: 'Base screenshot file not found:',\n  success: 'Visual test successful',\n  generateMode: 'Run in generate screenshot mode'\n} as const;\n\n/**\n * Object returned by a visual test operation\n */\nexport interface VisualTestResult {\n  /** Error object when base image and actual image have different sizes; Contains the screenshot ffile name */\n  imagesSize?: { screenshotName: string };\n  /** Error object when base screensot not found. Contains the not found path as a string */\n  baseScreenshotNotFound?: { baseScreenshotPath: string };\n  /** Object containing the actual diff between images as percentage, the threshold and screenshot file name */\n  diff?: { actualDiff: number; threshold: number; screenshotName: string };\n  /** Run only generation of screenshots */\n  generateMode?: boolean;\n}\n\n/**\n * Visual test matcher\n * Based on the VisualTestResult object return by compareScreenshots function, this matcher will compute the error messages\n */\nexport function toBeVisuallySimilar() {\n  return {\n    compare: (actual: VisualTestResult, _expected: VisualTestResult) => {\n      if (actual.generateMode) {\n        return {\n          pass: true,\n          message: visualTestMessages.generateMode\n        };\n      }\n      if (actual.baseScreenshotNotFound) {\n        return {\n          pass: false,\n          message: `${visualTestMessages.baseImgNotFound} ${actual.baseScreenshotNotFound.baseScreenshotPath}`\n        };\n      }\n      if (actual.imagesSize) {\n        return {\n          pass: false,\n          message: `${visualTestMessages.imagesSize} ${actual.imagesSize.screenshotName}`\n        };\n      }\n      if (actual.diff && actual.diff.actualDiff > actual.diff.threshold) {\n        return {\n          pass: false,\n          message: `${actual.diff.actualDiff} > ${actual.diff.threshold} : ${visualTestMessages.diffMessage} ${actual.diff.screenshotName}`\n        };\n      }\n      return {\n        pass: true,\n        message: visualTestMessages.success\n      };\n    }\n  };\n}\n\n/**\n * It will create a file for the passed screenshot object.\n * The path of the new file will be calculated using the parameters\n * Ex: ./dist-screenshots\\OWBooking\\windows_chrome_91\\fare-page-after-click-on-continue-0.png\n * distScreenshotsDir/scenarionName/device/filenameWithoutExtension.png\n * @param screenshot The screenshot object captured. Ex: for protractor - browser.takeScreenshot()\n * @param scenarioName E2e Scenario class name\n * @param device Details of the platform on which the test is run. If there are spaces the helper will do the concatenation. Ex: `Windows 10 chrome 89`\n * @param filenameWithoutExtension file name to save the screenshot - .png will be added at the end\n * @param distScreenshotsDir Name of the directory to save the screenshots\n */\nexport function saveScreenshot(screenshot: string, scenarioName: string, device: string, filenameWithoutExtension: string, distScreenshotsDir = 'dist-screenshots') {\n  const screenshotsDir = path.resolve(distScreenshotsDir, scenarioName, `${device.replace(/ +/g, '_')}`);\n  if (!fs.existsSync(screenshotsDir)) {\n    fs.mkdirSync(screenshotsDir, { recursive: true });\n  }\n  const fullFileName = `${filenameWithoutExtension}.png`;\n  const stream = fs.createWriteStream(path.resolve(screenshotsDir, fullFileName));\n  stream.write(Buffer.from(screenshot, 'base64'));\n  stream.end();\n}\n\n/**\n * Write the 3 images (base/new/diff) on the reports folder\n * The path inside the reports forlder will be calculated using the parameters\n * @param pathToScenarioReport Path where the scenario report is saved inside reports folder\n * @param screenshotsDirName Name of the directory which will contain the 3 images\n * @param diff diff image\n * @param baseImage the base image\n * @param currentImg the actual taken screenshot image\n */\nexport function writeScreenshotsDiff(pathToScenarioReport: string, screenshotsDirName: string, diff: PNG, baseImage: PNG, currentImg: PNG) {\n  const destScreenshotsDiffDir = path.join(pathToScenarioReport, 'screenshots-diff', screenshotsDirName);\n  if (!fs.existsSync(destScreenshotsDiffDir)) {\n    fs.mkdirSync(destScreenshotsDiffDir, { recursive: true });\n  }\n\n  const diffPath = path.resolve(destScreenshotsDiffDir, 'diff.png');\n  const oldPath = path.resolve(destScreenshotsDiffDir, 'old.png');\n  const newPath = path.resolve(destScreenshotsDiffDir, 'new.png');\n  fs.writeFileSync(diffPath, PNG.sync.write(diff));\n  fs.writeFileSync(oldPath, PNG.sync.write(baseImage));\n  fs.writeFileSync(newPath, PNG.sync.write(currentImg));\n}\n\n/**\n * Compare images helper function. If the comparison fails the 3 images (base/new/diff) will be written inside the reports folder of the actual scenario\n * @param screenshot Actual captured screenshot object\n * @param baseImagePath The path to the base screenshot\n * @param threshold The diff between base screenshot and the current one should not be bigger than this value.\n * @param pathToScenarioReport Path where the scenario report is saved inside reports folder. Used to compute the path to write diff images in case there is a diff at comparison\n * @returns An object of visual test result type\n */\nexport function compareScreenshot(screenshot: string, baseImagePath: string, threshold: number, pathToScenarioReport: string): VisualTestResult {\n  const baseImageExists = fs.existsSync(baseImagePath);\n  if (baseImageExists) {\n    const baseImage = PNG.sync.read(fs.readFileSync(baseImagePath));\n    const { width, height } = baseImage;\n    const diff = new PNG({ width, height });\n\n    const screenshotBuffer = Buffer.from(screenshot, 'base64');\n    const currentImg = PNG.sync.read(screenshotBuffer);\n    const diffDirName = path.basename(baseImagePath, '.png');\n    let result;\n    try {\n      result = pixelmatch(baseImage.data, currentImg.data, diff.data, width, height, { threshold: 0.1 });\n    } catch (err: any) {\n      if (!err.toString().includes('Image sizes do not match.')) {\n        throw err;\n      }\n      writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);\n      return { imagesSize: { screenshotName: diffDirName } };\n    }\n    const pr = Math.round(100 * 100 * result / (width * height)) / 100;\n    if (pr > threshold) {\n      writeScreenshotsDiff(pathToScenarioReport, diffDirName, diff, baseImage, currentImg);\n    }\n    return { diff: { actualDiff: pr, threshold, screenshotName: diffDirName } };\n  } else {\n    return { baseScreenshotNotFound: { baseScreenshotPath: baseImagePath } };\n  }\n}\n\n/**\n * Helper function to perform a visual test operation\n * @param screenshotObj Ex: for protractor browser.takeScreenshot()\n * @param filenameWithoutExtension file name to save the screenshot - .png will be added at the end\n * @param device os followed by browser version - ex: `Windows 10 chrome 89`\n * @param scenarioName E2e Scenario class name\n * @param pathToScenarioReport Path used in compare mode for saving the base,new,diff images in reports in case there is a diff\n * @param threshold The diff between base screenshot and the current one should not be bigger than this value.\n * If the diff is bigger, 3 png files will be created: base screenshot, new screenshot and diff image\n * @param generateMode If true it will generate the screenshot file without screenshots comparison\n * @param baseScreenshotsDirPath The folder path to search base screenshots; used only in compare mode\n */\nexport function o3rVisualTest(\n  screenshotObj: string,\n  filenameWithoutExtension: string,\n  device: string,\n  scenarioName: string,\n  pathToScenarioReport = 'reports',\n  threshold = 0,\n  generateMode = false,\n  baseScreenshotsDirPath = 'dist-screenshots-base'\n) {\n  if (generateMode) {\n    saveScreenshot(screenshotObj, scenarioName, device, filenameWithoutExtension);\n    return { generateMode: true };\n  } else {\n    const baseImagePath = path.resolve(baseScreenshotsDirPath, scenarioName, device, `${filenameWithoutExtension}.png`);\n    const visualTestResult = compareScreenshot(screenshotObj, baseImagePath, threshold, pathToScenarioReport);\n    return visualTestResult;\n  }\n}\n"]}

package/visual-testing-reporter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visual-testing-reporter/index.ts"],"names":[],"mappings":"AAWA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,QAAQ,EACb,KAAK,KAAK,EACX,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,EAAE,CAAC;AAMlE;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,qBAAa,+BAAgC,YAAW,QAAQ;IAC9D,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;gBAExB,OAAO,EAAE,4BAA4B;IAIjD;;OAEG;IACI,aAAa;IAIpB;;OAEG;IACI,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK;IAI1C;;OAEG;IACU,KAAK;CAiBnB;AAED,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/visual-testing-reporter/index.ts"],"names":[],"mappings":"AAQA,OAAO,EACL,KAAK,UAAU,EACf,KAAK,QAAQ,EACb,KAAK,KAAK,EACX,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,qBAAqB,EAAE,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,4BAA4B;IAC3C,qCAAqC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,qBAAa,+BAAgC,YAAW,QAAQ;IAC9D,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAS;gBAExB,OAAO,EAAE,4BAA4B;IAIjD;;OAEG;IACI,aAAa;IAIpB;;OAEG;IACI,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK;IAI1C;;OAEG;IACU,KAAK;CAgCnB;AAED,eAAe,+BAA+B,CAAC"}

package/visual-testing-reporter/index.js

@@ -1,63 +1,60 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisualTestingPlaywrightReporter = void 0;
-var tslib_1 = require("tslib");
-var promises_1 = require("node:fs/promises");
-var node_path_1 = require("node:path");
+const promises_1 = require("node:fs/promises");
+const node_path_1 = require("node:path");
 /**
  * Playwright reporter for visual testing
  */
-var VisualTestingPlaywrightReporter = /** @class */ (function () {
-    function VisualTestingPlaywrightReporter(options) {
+class VisualTestingPlaywrightReporter {
+    constructor(options) {
         this.outputFile = options.outputFile || (0, node_path_1.join)(process.cwd(), 'playwright-reports/visual-testing/report.json');
     }
     /**
      * @inheritdoc
      */
-    VisualTestingPlaywrightReporter.prototype.printsToStdio = function () {
+    printsToStdio() {
         return false;
-    };
+    }
     /**
      * @inheritdoc
      */
-    VisualTestingPlaywrightReporter.prototype.onBegin = function (_, suite) {
+    onBegin(_, suite) {
         this.suite = suite;
-    };
+    }
     /**
      * @inheritdoc
      */
-    VisualTestingPlaywrightReporter.prototype.onEnd = function () {
-        return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var screenshotsToUpdate;
-            return tslib_1.__generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        screenshotsToUpdate = this.suite.allTests().flatMap(function (test) {
-                            return test.results.flatMap(function (result) {
-                                return result.errors
-                                    .map(function (error) { return error.matcherResult; })
-                                    .filter(function (matcherResult) {
-                                    return (matcherResult === null || matcherResult === void 0 ? void 0 : matcherResult.name) === 'toHaveScreenshot'
-                                        && typeof matcherResult.actual === 'string'
-                                        && typeof matcherResult.expected === 'string'
-                                        && !matcherResult.pass;
-                                })
-                                    .map(function (_a) {
-                                    var actual = _a.actual, expected = _a.expected;
-                                    return ({ actual: actual, expected: expected });
-                                });
-                            });
-                        });
-                        return [4 /*yield*/, (0, promises_1.mkdir)((0, node_path_1.dirname)(this.outputFile), { recursive: true })];
-                    case 1:
-                        _a.sent();
-                        return [2 /*return*/, (0, promises_1.writeFile)(this.outputFile, JSON.stringify(screenshotsToUpdate, null, 2))];
+    async onEnd() {
+        const fileNameExtractor = /snapshot:\s*(?<browser>[\w-]+)[\\/]+(?<filename>[\w-]+)\.(?<extension>\w+)/i;
+        const screenshotsToUpdate = this.suite.allTests().flatMap((test) => test.results.flatMap((result) => result.errors
+            .reduce((acc, error) => {
+            if (error.matcherResult?.name === 'toHaveScreenshot'
+                && typeof error.matcherResult.actual === 'string'
+                && typeof error.matcherResult.expected === 'string'
+                && !error.matcherResult.pass) {
+                // Playwright <= 1.51
+                acc.push({ actual: error.matcherResult.actual, expected: error.matcherResult.expected });
+            }
+            else if (fileNameExtractor.test(error.message)) {
+                // Playwright > 1.51
+                const { filename, extension } = fileNameExtractor.exec(error.message).groups;
+                if (filename && extension) {
+                    const attachmentMatcherActual = new RegExp(`[\\\\/]${filename}-actual.${extension}`);
+                    const attachmentMatcherExpected = new RegExp(`[\\\\/]${filename}-expected.${extension}`);
+                    const actual = result.attachments.find((attachment) => attachmentMatcherActual.test(attachment.name));
+                    const expected = result.attachments.find((attachment) => attachmentMatcherExpected.test(attachment.name));
+                    if (actual?.path && expected?.path) {
+                        acc.push({ actual: actual.path, expected: expected.path });
+                    }
                 }
-            });
-        });
-    };
-    return VisualTestingPlaywrightReporter;
-}());
+            }
+            return acc;
+        }, [])));
+        await (0, promises_1.mkdir)((0, node_path_1.dirname)(this.outputFile), { recursive: true });
+        return (0, promises_1.writeFile)(this.outputFile, JSON.stringify(screenshotsToUpdate, null, 2));
+    }
+}
 exports.VisualTestingPlaywrightReporter = VisualTestingPlaywrightReporter;
 exports.default = VisualTestingPlaywrightReporter;
 //# sourceMappingURL=index.js.map

package/visual-testing-reporter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/visual-testing-reporter/index.ts"],"names":[],"mappings":";;;;AAAA,6CAG0B;AAC1B,uCAGmB;AAyCnB;;GAEG;AACH;IAIE,yCAAY,OAAqC;QAC/C,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,IAAA,gBAAI,EAAC,OAAO,CAAC,GAAG,EAAE,EAAE,+CAA+C,CAAC,CAAC;IAC/G,CAAC;IAED;;OAEG;IACI,uDAAa,GAApB;QACE,OAAO,KAAK,CAAC;IACf,CAAC;IAED;;OAEG;IACI,iDAAO,GAAd,UAAe,CAAa,EAAE,KAAY;QACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAED;;OAEG;IACU,+CAAK,GAAlB;;;;;;wBACQ,mBAAmB,GAAgC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,UAAC,IAAI;4BAC1F,OAAA,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,UAAC,MAAM;gCAC1B,OAAA,MAAM,CAAC,MAAM;qCACV,GAAG,CAAC,UAAC,KAAK,IAAK,OAAC,KAAa,CAAC,aAAa,EAA5B,CAA4B,CAAC;qCAC5C,MAAM,CAAC,UAAC,aAA4C;oCACnD,OAAA,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,MAAK,kBAAkB;2CACvC,OAAO,aAAa,CAAC,MAAM,KAAK,QAAQ;2CACxC,OAAO,aAAa,CAAC,QAAQ,KAAK,QAAQ;2CAC1C,CAAC,aAAa,CAAC,IAAI;gCAHtB,CAGsB,CACvB;qCACA,GAAG,CAAC,UAAC,EAAoB;wCAAlB,MAAM,YAAA,EAAE,QAAQ,cAAA;oCAAO,OAAA,CAAC,EAAE,MAAM,QAAA,EAAE,QAAQ,UAAA,EAAE,CAA0B;gCAA/C,CAA+C,CAAC;4BARjF,CAQiF,CAClF;wBAVD,CAUC,CACF,CAAC;wBACF,qBAAM,IAAA,gBAAK,EAAC,IAAA,mBAAO,EAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAA;;wBAA1D,SAA0D,CAAC;wBAC3D,sBAAO,IAAA,oBAAS,EAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAC;;;;KACjF;IACH,sCAAC;AAAD,CAAC,AA1CD,IA0CC;AA1CY,0EAA+B;AA4C5C,kBAAe,+BAA+B,CAAC","sourcesContent":["import {\n  mkdir,\n  writeFile,\n} from 'node:fs/promises';\nimport {\n  dirname,\n  join,\n} from 'node:path';\nimport type {\n  MatcherReturnType,\n} from '@playwright/test';\nimport {\n  type FullConfig,\n  type Reporter,\n  type Suite,\n} from '@playwright/test/reporter';\n\n/**\n * The screenshot information\n */\nexport interface ScreenshotInformation {\n  /**\n   * The path of the actual screenshot\n   */\n  actual: string;\n  /**\n   * The path of the expected screenshot\n   */\n  expected: string;\n}\n\n/**\n * The report of the visual testing campaign\n */\nexport type VisualTestingReporterReport = ScreenshotInformation[];\n\ntype ScreenshotMatcherReturnType = MatcherReturnType & ScreenshotInformation & {\n  name: 'toHaveScreenshot';\n};\n\n/**\n * Configuration for the visual testing reporter\n */\nexport interface VisualTestingReporterOptions {\n  /** The output file for the report */\n  outputFile?: string;\n}\n\n/**\n * Playwright reporter for visual testing\n */\nexport class VisualTestingPlaywrightReporter implements Reporter {\n  private suite!: Suite;\n  private readonly outputFile: string;\n\n  constructor(options: VisualTestingReporterOptions) {\n    this.outputFile = options.outputFile || join(process.cwd(), 'playwright-reports/visual-testing/report.json');\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public printsToStdio() {\n    return false;\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public onBegin(_: FullConfig, suite: Suite) {\n    this.suite = suite;\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public async onEnd() {\n    const screenshotsToUpdate: VisualTestingReporterReport = this.suite.allTests().flatMap((test) =>\n      test.results.flatMap((result) =>\n        result.errors\n          .map((error) => (error as any).matcherResult)\n          .filter((matcherResult: MatcherReturnType | undefined): matcherResult is ScreenshotMatcherReturnType =>\n            matcherResult?.name === 'toHaveScreenshot'\n            && typeof matcherResult.actual === 'string'\n            && typeof matcherResult.expected === 'string'\n            && !matcherResult.pass\n          )\n          .map(({ actual, expected }) => ({ actual, expected }) as ScreenshotInformation)\n      )\n    );\n    await mkdir(dirname(this.outputFile), { recursive: true });\n    return writeFile(this.outputFile, JSON.stringify(screenshotsToUpdate, null, 2));\n  }\n}\n\nexport default VisualTestingPlaywrightReporter;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/visual-testing-reporter/index.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  mkdir,\n  writeFile,\n} from 'node:fs/promises';\nimport {\n  dirname,\n  join,\n} from 'node:path';\nimport {\n  type FullConfig,\n  type Reporter,\n  type Suite,\n} from '@playwright/test/reporter';\n\n/**\n * The screenshot information\n */\nexport interface ScreenshotInformation {\n  /**\n   * The path of the actual screenshot\n   */\n  actual: string;\n  /**\n   * The path of the expected screenshot\n   */\n  expected: string;\n}\n\n/**\n * The report of the visual testing campaign\n */\nexport type VisualTestingReporterReport = ScreenshotInformation[];\n\n/**\n * Configuration for the visual testing reporter\n */\nexport interface VisualTestingReporterOptions {\n  /** The output file for the report */\n  outputFile?: string;\n}\n\n/**\n * Playwright reporter for visual testing\n */\nexport class VisualTestingPlaywrightReporter implements Reporter {\n  private suite!: Suite;\n  private readonly outputFile: string;\n\n  constructor(options: VisualTestingReporterOptions) {\n    this.outputFile = options.outputFile || join(process.cwd(), 'playwright-reports/visual-testing/report.json');\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public printsToStdio() {\n    return false;\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public onBegin(_: FullConfig, suite: Suite) {\n    this.suite = suite;\n  }\n\n  /**\n   * @inheritdoc\n   */\n  public async onEnd() {\n    const fileNameExtractor = /snapshot:\\s*(?<browser>[\\w-]+)[\\\\/]+(?<filename>[\\w-]+)\\.(?<extension>\\w+)/i;\n    const screenshotsToUpdate: VisualTestingReporterReport = this.suite.allTests().flatMap((test) =>\n      test.results.flatMap((result) =>\n        result.errors\n          .reduce((acc, error: any) => {\n            if (error.matcherResult?.name === 'toHaveScreenshot'\n              && typeof error.matcherResult.actual === 'string'\n              && typeof error.matcherResult.expected === 'string'\n              && !error.matcherResult.pass) {\n              // Playwright <= 1.51\n              acc.push({ actual: error.matcherResult.actual, expected: error.matcherResult.expected });\n            } else if (fileNameExtractor.test(error.message)) {\n              // Playwright > 1.51\n              const { filename, extension } = fileNameExtractor.exec(error.message)!.groups as RegExpExecArray['groups'] & { filename: string; extension: string };\n              if (filename && extension) {\n                const attachmentMatcherActual = new RegExp(`[\\\\\\\\/]${filename}-actual.${extension}`);\n                const attachmentMatcherExpected = new RegExp(`[\\\\\\\\/]${filename}-expected.${extension}`);\n                const actual = result.attachments.find((attachment) => attachmentMatcherActual.test(attachment.name));\n                const expected = result.attachments.find((attachment) => attachmentMatcherExpected.test(attachment.name));\n                if (actual?.path && expected?.path) {\n                  acc.push({ actual: actual.path, expected: expected.path });\n                }\n              }\n            }\n            return acc;\n          }, [] as ScreenshotInformation[])\n      )\n    );\n    await mkdir(dirname(this.outputFile), { recursive: true });\n    return writeFile(this.outputFile, JSON.stringify(screenshotsToUpdate, null, 2));\n  }\n}\n\nexport default VisualTestingPlaywrightReporter;\n"]}