Custom config file is not working about cypress-image-diff HOT 14 CLOSED

@Strezzo06 we are about to merge a V2 of the plugin which will most likely fix any issues...

Meanwhile can you confirm the version you have installed is the latest?

from cypress-image-diff.

@Strezzo06 , there are a few extra steps you need to take to migrate from v1 to v2, please make sure you have followed this migration notes. It looks like you use the outdated import path

from cypress-image-diff.

I'm trying to upgrade to 2.0 and seem to be experiencing the same problem. I've read all the docs I can find and made the import updates in commands and config. I look to have quite similar config to strezzo. I've also blown away node modules and reinstalled and included the new reporting package. But the failure threshold and retry options are not picked up from config.

cypress.config.js

/* eslint-disable import/extensions,import/no-unused-modules,no-promise-executor-return */
import { defineConfig } from 'cypress';
import cypressSplit from 'cypress-split';
import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';

import { readFileSync, existsSync } from 'fs';

const overridesPath = new URL('./cypress.config.overrides.json', import.meta.url);
const overrides = existsSync(overridesPath) ? JSON.parse(readFileSync(overridesPath)) : {};

const setupBrowser = (browser, launchOptions) => {
  if (browser.name === 'chrome') {
    // required browser settings for VRT consistency
    launchOptions.args.push(
      '--start-fullscreen',
      '--window-size=1440,1200', // This must be larger than the set viewport for a full screen snapshot
      '--force-device-scale-factor=1',
      '--font-render-hinting=none',
      '--disable-gpu',
    );
  }
  return launchOptions;
};

export default defineConfig({
  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    },
    setupNodeEvents(on, config) {
      cypressSplit(on, config);
      getCompareSnapshotsPlugin(on, config);
      on('before:browser:launch', setupBrowser);
      return config;
    },
    supportFile: 'cypress/support/component.vrt.js',
    specPattern: 'cypress/tests/**/*.cy.jsx',
    videoUploadOnPasses: false,
    env: {
      preserveOriginalScreenshot: true,
    },
    slowTestThreshold: 1200,
    ...overrides,
  },
});

cypress-image-diff.config.js

const config = {
  ROOT_DIR: '',
  // disableTimersAndAnimations: false is necessary for retry-spec test
  CYPRESS_SCREENSHOT_OPTIONS: { disableTimersAndAnimations: false },
  FAILURE_THRESHOLD: 0.1,
  RETRY_OPTIONS: { limit: 5, delay: 30 },
};

module.exports = config;

I can show more later if needed.

from cypress-image-diff.

@JasonFairchild @Strezzo06 I'll take a look at this problem later today.

from cypress-image-diff.

@JasonFairchild, return getCompareSnapshotsPlugin as a new config in setupNodeEvents and rename cypress-image-diff.config.js to cypress-image-diff.config.cjs. Make sure you use module.exports in cypress-image-diff.config.cjs instead of export default.

Sorry for the bumpy fix. We had a problem earlier with the package versioning and we have released a minor version just now. Please upgrade to v2.1.0 and it should be working fine now.

from cypress-image-diff.

@Strezzo06 we are about to merge a V2 of the plugin which will most likely fix any issues...

Meanwhile can you confirm the version you have installed is the latest?

Version 1.32.0

from cypress-image-diff.

@Strezzo06 we are about to merge a V2 of the plugin which will most likely fix any issues...

Meanwhile can you confirm the version you have installed is the latest?

after updated to V2.0.0, i found this error

from cypress-image-diff.

@Strezzo06 , there are a few extra steps you need to take to migrate from v1 to v2, please make sure you have followed this migration notes. It looks like you use the outdated import path

Thank you, i already rename follow this link https://cypress.visual-image-diff.dev/getting-started/cypress-integration/javascript

cypress.config.js

/cypress/support/e2e.js

and rename default screenshots and report folder as below pic but still found error

Where else do I need to add configuration? thank you. 🙏

from cypress-image-diff.

I just found out that this problem occurs when you have your config file in an ESM module kinda project. Our plugin tries to resolve your ESM config file from the project root, which is impossible.

I created a pull request for this. When it's merged, you can rename the config file extension from .js to .cjs, then our plugin should be able to pick up the config:

- cypress-image-diff.config.js
+ cypress-image-diff.config.cjs

@JasonFairchild A quick note for you: you should return the result of the getCompareSnapshotsPlugin function instead of the original Cypress config. Only then will your custom config be picked up correctly.

setupNodeEvents(on, originalConfig) {
      cypressSplit(on, originalConfig);
      const config = getCompareSnapshotsPlugin(on, originalConfig);
      on('before:browser:launch', setupBrowser);
      return config;
}

from cypress-image-diff.

I just found out that this problem occurs when you have your config file in an ESM module kinda project. Our plugin tries to resolve your ESM config file from the project root, which is impossible.

I created a pull request for this. When it's merged, you can rename the config file extension from .js to .cjs, then our plugin should be able to pick up the config:

- cypress-image-diff.config.js
+ cypress-image-diff.config.cjs

@JasonFairchild A quick note for you: you should return the result of the getCompareSnapshotsPlugin function instead of the original Cypress config. Only then will your custom config be picked up correctly.

setupNodeEvents(on, originalConfig) {
      cypressSplit(on, originalConfig);
      const config = getCompareSnapshotsPlugin(on, originalConfig);
      on('before:browser:launch', setupBrowser);
      return config;
}

Sounds good. Though are you saying I should only make those changes in setupNodeEvents, or that I should also rename the other config file with .cjs? I seem to recall this repo might be ESM module project, but not actually certain off the top of my head. There is probably some obvious indicator I don't know, heh... I guess whether you use only require statements vs import statements is enough?

from cypress-image-diff.

@kien-ht Well, I've tried various combinations of these recommendations, and unfortunately nothing seems to be working. Namely I've tried with and without the .cjs and with and without the updated setupNodeEvents that was suggested. I've ensured that I'm using 2.0.1 and that the new code from that PR is in my node_modules. But I still always get a threshold of 0 even though I pass in 0.1 in the config. And not sure if it matters, but I have made sure I can get a threshold other than 0 by passing it in the command instance like this { name: 'basic', testThreshold: 0.1 } which does work. So at a loss again here. Is there a method to set the config without a separate config file by chance?

from cypress-image-diff.

🎉 This issue has been resolved in version 2.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from cypress-image-diff.

I've just created an integration example here. See if you have all the correct settings. This issue can be closed as completed in v.2.1.0. If you still have problems with the version 2 migration, please open a new issue accordingly.

from cypress-image-diff.

@JasonFairchild, return getCompareSnapshotsPlugin as a new config in setupNodeEvents and rename cypress-image-diff.config.js to cypress-image-diff.config.cjs. Make sure you use module.exports in cypress-image-diff.config.cjs instead of export default.

Sorry for the bumpy fix. We had a problem earlier with the package versioning and we have released a minor version just now. Please upgrade to v2.1.0 and it should be working fine now.

Looks like 2.1 was what did the trick. Thanks for the timely back and forth!

from cypress-image-diff.