jaredpalmer / cypress-image-snapshot

Catch visual regressions in Cypress
MIT License
888 stars 160 forks source link

Unable to record multiple snapshots in a single test #93

Open badeball opened 5 years ago

badeball commented 5 years ago

Hey,

Due to the removing of screenshots after reading their content [1], Cypress isn't able to name consecutive screenshots in accordance to the docs [2]. This is quite unpractical if one wants to do multiple snapshot comparisons in a single test.

[1] https://github.com/palmerhq/cypress-image-snapshot/blob/v3.1.1/src/plugin.js#L70 [2] https://docs.cypress.io/api/commands/screenshot.html#Notes

jackjocross commented 5 years ago

Naming should work as you described, I'm surprised this hasn't come up yet.

We delete the screenshots so that multiple cypress open runs don't create duplicate snapshots. A better way to delete the screenshots might be to keep track of the screenshots and delete them using Cypress' test:after:run event.

sebinsua commented 5 years ago

@crosscompile

We've been experimenting a little bit and think we have a solution.

It turned out that we were not able to call cy.task(taskName) from within Cypress.on('test:after:run', fn).

However, we could send a task from after (should this be afterEach?) as the issue above confirms.

Therefore, there were three changes we had to make in order for everything to work:

  1. Rather than removing the screenshotPath on https://github.com/palmerhq/cypress-image-snapshot/blob/215eb0ff6846a418489009913c5329c93614db4b/src/plugin.js#L70 we pushed it onto a module-level screenshotPaths array.

  2. We registered a Clean screenshots task here https://github.com/palmerhq/cypress-image-snapshot/blob/215eb0ff6846a418489009913c5329c93614db4b/src/plugin.js#L133-L136 which does

    screenshotPaths.forEach(screenshotPath => fs.removeSync(screenshotPath));
    screenshotPaths = [];
    return null;
  3. Finally, we registered an after block in https://github.com/palmerhq/cypress-image-snapshot/blob/215eb0ff6846a418489009913c5329c93614db4b/src/command.js#L68

    after(() => {
      cy.task('Clean screenshots');
    });

    We're not 100% sure whether this is the best place to register after, however it does ensure that cleanup happens all the time.

Happy to turn this into a PR if you think it's valuable?

Optimus2297 commented 3 years ago

the tool is creating multiple copies of same image, but it should only create one image and compare with it, and also the diff folder is not getting created.