Snapshots for running all specs don't use individual spec snapshots

[James-E-Adams]

Hi!

I haven't had a chance to investigate this super deeply.

But if you run all the tests specs together from the cypress open ui - cypress-image-snapshot is generating snapshots under an All Specs folder, rather than using the snapshots stored under each respective spec's folder.

From a quick glance in the code this isn't intentional, and I can see a related issue:

#17

Is it possible that the same issue is reoffending in later versions?

Versions:
Cypress: 3.1.2
cypress-image-snapshot: 2.3.5

[jackjocross]

Yikes, this looks related to:

• screenshots saved in different folders when invoked from app vs. cli cypress-io/cypress#2091 (comment)
• Screenshots saved under 'All Specs' directory when running all specs cypress-io/cypress#2319

This bug basically makes snapshot testing "All Tests" in interactive mode useless and is also difficult to workaround since Cypress.spec.name is set to All Tests during this type of run.

I think ideally it would be fixed in cypress-io/cypress#1586 but it doesn't look like that has been worked on yet. I'm open to finding ways of getting around this in the meantime.

[TimoKorinth]

What about adding an optional flag to the configuration, to change the snapshots output directory structure to a flat one?! The default file names could still be named after test suite name + test name, but all images will be stored on one level (in one output directory). Independent from the run-mode.

[mfolnovic]

There's this workaround: meinaart/cypress-plugin-snapshots#10 (comment)

Has anyone else tried it with cypress-image-snapshot? For some reason, it doesn't have any effect in my case.

[webdevisme]

Yeh, it's not working for me either :(

[malykhinvi]

Looks like a proper fix for that issue will be possible when cypress-io/cypress#1586 is addressed. In the meanwhile, we could use the following workaround #158.

@jaredpalmer what do you think about that workaround?

[wilcoschoneveld]

I have a new workaround for this, based on #158.

The workaround is to set the relativePath to "" such that it saves all snapshots to the root snapshots directory, e.g. cypress/snapshots.

1. Install patch-package from npm and setup properly
2. Download this patch and save to your patches directory

And that's it!

Also, in our tests, we make sure to give a name to the image snapshots to make them unique.

Here's the diff for the patch:

diff --git a/node_modules/cypress-image-snapshot/plugin.js b/node_modules/cypress-image-snapshot/plugin.js
index 106d726..4ca37b5 100644
--- a/node_modules/cypress-image-snapshot/plugin.js
+++ b/node_modules/cypress-image-snapshot/plugin.js
@@ -96,7 +96,9 @@ function matchImageSnapshotPlugin({ path: screenshotPath }) {
   // remove the cypress v5+ native retries suffix from the file name
   const snapshotIdentifier = name.replace(/ \(attempt [0-9]+\)/, '');
 
-  const relativePath = _path2.default.relative(screenshotsFolder, screenshotDir);
+  // always write snapshot images to root snapshots directory
+  // this is a workaround for https://github.com/jaredpalmer/cypress-image-snapshot/issues/61
+  const relativePath = "";
   const snapshotsDir = customSnapshotsDir ? _path2.default.join(process.cwd(), customSnapshotsDir, relativePath) : _path2.default.join(screenshotsFolder, '..', 'snapshots', relativePath);
 
   const snapshotKebabPath = _path2.default.join(snapshotsDir, `${snapshotIdentifier}${kebabSnap}`);

[Thebarda]

I there a way to have this issue patched in this repo through an option?