Update plugin to be compatible with Cypress 10

[admah]

Hello 👋 I'm writing on behalf of the Cypress DX team. We wanted to notify you that some changes may need to be made to this plugin to ensure that it works in Cypress 10.

For more information, here is our official plugin update guide.

[amir20]

I found my way to this issue. I believe this is the root cause for the error:

CypressError: `cy.task('Matching image snapshot')` failed with the following error:
 The 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task()

This plugin hasn't been updated for a while. Hopefully it can support v10.

[faith-berroya]

Hello. I tried this plugin for 9.6.0. Works great! But when I upgraded to 10.4.0 it showing me this error whenever I add the import 'cypress-plugin-snapshots/commands'; in e2e.js. All else in npm install and cypress.config.js are okay.

Do we have estimated timeline for this? (I removed the sensitive information in the screenshot)

Tried to reinstall cypress-plugin-snapshots but getting this error. When I also tried npm install --force crypto I'm back with the first error. It's like a loop.

[dhulme]

This plugin is not actively maintained. I suggest switching to an alternative like https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff

[faith-berroya]

Hello @dhulme I tried https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff on our project and works great in local. However when I try t o run it in CircleCI, we're using Docker, I'm getting this error. Not sure which esbuild should we install for this package to run in CI.

[dhulme]

@faith-berroya I'm not sure how the plugin could be generating this error. I don't think esbuild is required for the plugin. It's not clear from your logs what is causing the error. You could try doing npm list esbuild or npm list esbuild-darwin-arm64 on your project to see why esbuild is trying to be installed?

[faith-berroya]

Oofff false alarm. Thank you for the hint @dhulme I'm able to debug it now. It's a dependency on @badeball/[email protected]. Thank you! 😄

[faith-berroya]

Hi @dhulme do we have a setting for https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff to compare to a baseline image? I noticed it's good for several runs but lately I've been getting wrong images as the baseline.

Do I have to run until I get all correct images with: cy.get('element').matchImage({updateImages: true,maxDiffThreshold: 0.05,forceDeviceScaleFactor: false})

Once I have them I can remove the updateImages to have the images as fixed? cy.get('element').matchImage({maxDiffThreshold: 0.05,forceDeviceScaleFactor: false})

I can check them locally when I'm testing. But I cannot check it anymore if it is continuously updating in CircleCI.

Or is there an additional setting where we could save a baseline image into another folder then call and compare from the current run?

Correct: Wrong: (this is what the plugin is using as baseline)

[dhulme]

@faith-berroya if you don't specify updateImages: true then yes it will compare against the stored snapshot image and fail if it does not match. Please ask any future questions on the https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff repo 😊

[faith-berroya]

Sure @dhulme I opened a ticket there as well. Thank you! https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/issues/87

[uxmoon]

Hi there! I hope this helps @admah.

I had the same issue as @amir20 https://github.com/meinaart/cypress-plugin-snapshots/issues/215#issuecomment-1145176693

This workaround helped me fix the issue in Cypress v10.6.0

// cypress.config.js
const { defineConfig } = require("cypress");
const { initPlugin } = require('cypress-plugin-snapshots/plugin');

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
      initPlugin(on, config);
      return config;
    },
    excludeSpecPattern: [
      '**/snapshots/*',
      '**/__image_snapshots__/*',
    ],
  },
});

The only other modification was in cypress/support/commands.js

// commands.js
import 'cypress-plugin-snapshots/commands';