"Image was NaN% different from saved snapshot with undefined different pixels."

[obriankevin11]

Hi,

I get "Image was NaN% different from saved snapshot with undefined different pixels." error with following settings:

Windows 10 / vscode
Cypress version: 13.7.2 (same error with 13.2.0)
@simonsmith/cypress-image-snapshot: 9.0.2

cypress-image-snapshot is the only plugin I'm using (cf: #26)

// cypress.config.ts

import { defineConfig } from 'cypress';
import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';

module.exports = defineConfig({
   ...
   e2e: {
    experimentalStudio: true,
    experimentalRunAllSpecs: true,
    setupNodeEvents(on) {
      addMatchImageSnapshotPlugin(on);
      on('after:screenshot', (details) => {
        console.log(details);
      });
    },
  },
});

commands.ts

import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
addMatchImageSnapshotCommand();

tsconfig.ts

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node", "@simonsmith/cypress-image-snapshot/types"]
  },
  "include": ["**/*.ts"]
}

package.json

  "scripts": {
    "cyopen": "cypress open --env updateSnapshots=true",
  },

TestFile.cy.ts

...
cy.getBySel('myComponent').matchImageSnapshot('snap-test');
...

I have /cypress/screenshots/snap-test.png created with
"Image was NaN% different from saved snapshot with undefined different pixels."

I have the same results with script
"cypress open",

[simonsmith]

Hmm, I wonder if this was introduced by #51

Can you try 9.0.1 and see if it is still an issue?

[obriankevin11]

Just tried with 9.0.0 and 9.0.1, same issue.

[KaiWissel]

I can confirm this error within our project.
The project lives inside a NX mono repo with the default file structure of a NX app. Cypress is also configured to use Cucumber preprocessor plugin. The host system is a macOS.

Versions:

• "@nx/cypress": "18.3.3",
• "cypress": "13.8.1",
• "@cypress/browserify-preprocessor": "3.0.2",
• "@badeball/cypress-cucumber-preprocessor": "20.0.1",
• "@simonsmith/cypress-image-snapshot": "9.0.3"

Print out of the task Matching image snapshot:

{
"screenshotsFolder": "/Users/foo/projects/project/nx-root-folder/apps/e2e-project/cypress/screenshots",
"isUpdateSnapshots": false,
"isSnapshotDebug": false,
"specFileRelativeToRoot": "src/integration/login/homepage.feature",
"e2eSpecDir": "cypress/e2e/",
"currentTestTitle": "Homepage",
"failureThreshold": 0,
"failureThresholdType": "pixel",
"snapFilenameExtension": ".snap",
"diffFilenameExtension": ".diff"
}

Print out of the task Recording snapshot result:

EMPTY_OBJECT

Questions

• What is the relevancy of the prop "e2eSpecDir"?
• Does this plugin expect that some default paths are followed (which are maybe changed due to NX)?

[simonsmith]

What is the relevancy of the prop "e2eSpecDir"?

That would relate to this part - https://github.com/simonsmith/cypress-image-snapshot?tab=readme-ov-file#snapshot-paths

[eddie0329]

Hi @simonsmith and Thank you for wonderful lib.

I just found out that if @badeball/cypress-cucumber-preprocessor installed with cypress-image-snapshot, error occured which obriankevin11 mentioned (ex> Image was NaN% ...)

Any suggestion for this?

My cypress config:

import { defineConfig } from 'cypress'
import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";
import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin'

export default defineConfig({
  video: false,
  e2e: {
    specPattern: "**/*.feature",
    "baseUrl": "https://local-ditto.devel.kakao.com/",
    env: {
      "ALLOW_SNAPSHOT": process.env.ALLOW_SNAPSHOT === undefined ? false : true
    },
    trashAssetsBeforeRuns: false,
    async setupNodeEvents(on, config) {
      addMatchImageSnapshotPlugin(on)
      await addCucumberPreprocessorPlugin(on, config);
      on(
        "file:preprocessor",
         createBundler({
           plugins: [createEsbuildPlugin(config)],
        })
       );
      return config
    }
  },
})

[simonsmith]

@eddie0329 Sounds like #50