feat: add possibility to change images dirname

Signed-off-by: Jakub Freisler <[email protected]>

Author: FRSgit

README.md

@@ -128,6 +128,10 @@ cy.matchImage({
   // whether to update images automatically, without making a diff - useful for CI
   // default: false
   updateImages: true,
+  // directory path in which screenshot images will be stored
+  // image visualiser will normalise path separators depending on OS it's being run within, so always use / for nested paths
+  // default: '__image_snapshots__'
+  imagesDir: 'this-might-be-your-custom/maybe-nested-directory',
   // maximum threshold above which the test should fail
   // default: 0.01
   maxDiffThreshold: 0.1

src/commands.ts

@@ -8,6 +8,7 @@ declare global {
       screenshotConfig?: Partial<Cypress.ScreenshotDefaultsOptions>;
       diffConfig?: Parameters<typeof pixelmatch>[5];
       updateImages?: boolean;
+      imagesDir?: string;
       maxDiffThreshold?: number;
     };
 
@@ -42,6 +43,11 @@ Cypress.Commands.add(
         | boolean
         | undefined) ||
       false;
+    const imagesDir =
+      options.imagesDir ||
+      (Cypress.env("pluginVisualRegressionImagesDir") as string | undefined) ||
+      "__image_snapshots__";
+
     const maxDiffThreshold =
       options.maxDiffThreshold ||
       (Cypress.env("pluginVisualRegressionMaxDiffThreshold") as
@@ -67,6 +73,7 @@ Cypress.Commands.add(
           TASK.getScreenshotPath,
           {
             title,
+            imagesDir,
             specPath: Cypress.spec.relative,
           },
           { log: false }

src/constants.ts

@@ -12,4 +12,5 @@ export const TASK = {
   getScreenshotPath: `${PLUGIN_NAME}-getScreenshotPath`,
   compareImages: `${PLUGIN_NAME}-compareImages`,
   approveImage: `${PLUGIN_NAME}-approveImage`,
+  doesFileExist: `${PLUGIN_NAME}-doesFileExist`,
 };

src/plugins.ts

@@ -64,22 +64,25 @@ export const initPlugin = (
   config: Cypress.PluginConfigOptions
 ) => {
   on("task", {
-    [TASK.getScreenshotPath]({ title, specPath }) {
+    [TASK.getScreenshotPath]({ title, imagesDir, specPath }) {
       return path.join(
         IMAGE_SNAPSHOT_PREFIX,
         path.dirname(specPath),
-        "__image_snapshots__",
+        ...imagesDir.split("/"),
         `${title}${FILE_SUFFIX.actual}.png`
       );
     },
+    [TASK.doesFileExist]({ path }) {
+      return fs.existsSync(path);
+    },
     [TASK.approveImage]({ img }) {
       const oldImg = img.replace(FILE_SUFFIX.actual, "");
       if (fs.existsSync(oldImg)) fs.unlinkSync(oldImg);
 
       const diffImg = img.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff);
       if (fs.existsSync(diffImg)) fs.unlinkSync(diffImg);
 
-      moveFile.sync(img, oldImg);
+      if (fs.existsSync(img)) moveFile.sync(img, oldImg);
 
       return null;
     },
@@ -163,7 +166,7 @@ export const initPlugin = (
   });
 
   on("after:screenshot", (details) => {
-    if (details.name.indexOf(IMAGE_SNAPSHOT_PREFIX) !== 0) return;
+    if (details.name?.indexOf(IMAGE_SNAPSHOT_PREFIX) !== 0) return;
 
     return new Promise((resolve, reject) => {
       const screenshotsFolder = getConfigVariableOrThrow(

src/support.ts

@@ -18,14 +18,19 @@ function generateOverlayTemplate(
   title: string,
   imgNewBase64: string,
   imgOldBase64: string,
-  imgDiffBase64: string
+  imgDiffBase64: string,
+  wasImageNotUpdatedYet: boolean
 ) {
   return `<div class="${OVERLAY_CLASS} runner" style="position:fixed;z-index:10;top:0;bottom:0;left:0;right:0">
   <header style="position:static">
   <nav style="display:flex;width:100%;align-items:center;justify-content:space-between;padding:10px 15px;">
     <h2>${title} - screenshot diff</h2>
     <form>
-      <button type="submit"><i class="fa fa-check"></i> Update screenshot</button>
+      ${
+        wasImageNotUpdatedYet
+          ? `<button type="submit"><i class="fa fa-check"></i> Update screenshot</button>`
+          : "Image was already updated, rerun test to see new comparison"
+      }
       <button type="button" data-type="close"><i class="fa fa-times"></i> Close</button>
     <form>
   </nav>
@@ -99,37 +104,57 @@ after(() => {
               imageCache,
               imgPath.replace(FILE_SUFFIX.actual, FILE_SUFFIX.diff),
               "base64"
-            ).then((imgDiff) => [imgNew, imgOld, imgDiff])
+            ).then((imgDiff) =>
+              cy
+                .task(TASK.doesFileExist, { path: imgPath }, { log: false })
+                .then(
+                  (wasImageNotUpdatedYet) =>
+                    [
+                      imgNew,
+                      imgOld,
+                      imgDiff,
+                      wasImageNotUpdatedYet as boolean,
+                    ] as const
+                )
+            )
           )
         )
-        .then(([imgNewBase64, imgOldBase64, imgDiffBase64]) => {
-          if (!top) return false;
-          queueClear();
-
-          Cypress.$(
-            generateOverlayTemplate(
-              title,
-              imgNewBase64,
-              imgOldBase64,
-              imgDiffBase64
-            )
-          ).appendTo(top.document.body);
-
-          const wrapper = Cypress.$(`.${OVERLAY_CLASS}`, top.document.body);
-          wrapper.on("click", 'button[data-type="close"]', function () {
-            wrapper.remove();
-          });
-
-          wrapper.on("submit", "form", function (e) {
-            e.preventDefault();
-
-            cy.task(TASK.approveImage, { img: imgPath }).then(() =>
-              wrapper.remove()
-            );
-
-            queueRun();
-          });
-        });
+        .then(
+          ([
+            imgNewBase64,
+            imgOldBase64,
+            imgDiffBase64,
+            wasImageNotUpdatedYet,
+          ]) => {
+            if (!top) return false;
+            queueClear();
+
+            Cypress.$(
+              generateOverlayTemplate(
+                title,
+                imgNewBase64,
+                imgOldBase64,
+                imgDiffBase64,
+                wasImageNotUpdatedYet
+              )
+            ).appendTo(top.document.body);
+
+            const wrapper = Cypress.$(`.${OVERLAY_CLASS}`, top.document.body);
+            wrapper.on("click", 'button[data-type="close"]', function () {
+              wrapper.remove();
+            });
+
+            wrapper.on("submit", "form", function (e) {
+              e.preventDefault();
+
+              cy.task(TASK.approveImage, { img: imgPath }).then(() =>
+                wrapper.remove()
+              );
+
+              queueRun();
+            });
+          }
+        );
 
       queueRun();