Update 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.

[simonsmith]

This seems to work okay - https://github.com/jaredpalmer/cypress-image-snapshot/pull/254 cc @jaredpalmer

If it doesn't get merged I'll publish it on npm as a fork

Edit: You can grab it here - https://www.npmjs.com/package/@simonsmith/cypress-image-snapshot

[lruszlewicz]

I notice one Issue connected with cypress snapshot, the default snapshot directory is different when I run all spec by cypress run command, but when I want just update one spec file and use command cypress run --spec path to spec , then directory is different.

[simonsmith]

@lruszlewicz Different how?

[shinoshinosp]

• When I run all spec by cypress run command ./cypress/e2e/path/to/spec.cy.js → ./cypress/snapshots/path/to/spec.cy.js/test-name.snap.png
• When I use command cypress run --spec ./cypress/e2e/path/to/spec/spec.cy.js ./cypress/e2e/path/to/spec.cy.js → ./cypress/snapshots/spec.cy.js/test-name.snap.png

[simonsmith]

It does seem like this behaviour is intentional from the Cypress side in version 10 - https://docs.cypress.io/guides/references/migration-guide#Generated-Files

[fengkx]

Edit: You can grab it here - https://www.npmjs.com/package/@simonsmith/cypress-image-snapshot

First of all thank you for your work on this. But I come up with this error after I add this package to the config file in a TypeScript project. Any idea?

EDIT: npx cypress cache clear then npx cypress install fix this.

[wilsonpage]

@simonsmith have you found a workaround for the open/run screenshot file location issue?

[wilsonpage]

I opened a PR to fix this: https://github.com/simonsmith/cypress-image-snapshot/pull/1

[shinoshinosp]

@wilsonpage To avoid this probrem, I make an empty spec like dummy.cy.js in cyprees/e2e, and add a script to package.json like cypress run --spec ${npm_config_spec},cypress/e2e/dummy.cy.js then run with npm run cypress --spec=your.cy.js

By using this script, you can make snapshots be stored in same directory when you use cypress run Since cypess always run empty spec after other specs, this is not perfect solution.

[simonsmith]

I opened a PR to fix this: simonsmith#1

Thanks! Merged and in 5.0.3

[ivanhara]

This seems to work okay - #254 cc @jaredpalmer

If it doesn't get merged I'll publish it on npm as a fork

Edit: You can grab it here - https://www.npmjs.com/package/@simonsmith/cypress-image-snapshot

Hi, I can not create an issue in your fork, so I will write here. I am getting this error

ReferenceError: Cypress is not defined at Object. (C:\Users\ivan.ha\Downloads\repos\cypress-sb\node_modules\@simonsmith\cypress-image-snapshot\command.js:19:27) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object.require.extensions. [as .js] (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\ts-node\src\index.ts:1608:43) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object. (C:\Users\ivan.ha\Downloads\repos\cypress-sb\cypress.config.ts:2:1) at Module._compile (node:internal/modules/cjs/loader:1105:14) at Module.m._compile (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\ts-node\src\index.ts:1618:23) at Module._extensions..js (node:internal/modules/cjs/loader:1159:10) at Object.require.extensions. [as .ts] (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\ts-node\src\index.ts:1621:12) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at loadFile (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:89:14) at EventEmitter. (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\child\run_require_async_child.js:116:38) at EventEmitter.emit (node:events:527:28) at EventEmitter.emit (node:domain:475:12) at process. (C:\Users\ivan.ha\AppData\Local\Cypress\Cache\10.10.0\Cypress\resources\app\node_modules\@packages\server\lib\plugins\util.js:33:22)

[jcubic]

@simonsmith any chance to update to Cypress 11?

[simonsmith]

@jcubic What have you encountered that is breaking in Cypress 11? I'm yet to update my projects but when I do I can fix any major pain points

[jcubic]

I have no idea I'm not able to install Cypress 11 because of your package. So I'm forced to use Cypress 10 if I want to use image snapshots.

[rstoneIDBS]

@jcubic @simonsmith We're using 6.0.0 quite happily with Cypress 11, I upgraded them both last week and didn't have to change/fix anything.

[CoreyGahafer]

@simonsmith I'm coming across one issue with your fork and maybe you can help me with it. Prior to Cypress 10, we were using a custom integrationFolder path and with Cypress 10, this is no longer an option. With that being the case, is there a way to set a similar base path like was previously being leveraged with the integrationFolder?

[uilton-oliveira]

I have no idea I'm not able to install Cypress 11 because of your package. So I'm forced to use Cypress 10 if I want to use image snapshots.

As a workaround, just add this overrides block to your package.json:

"devDependencies": {
    "@simonsmith/cypress-image-snapshot": "^6.0.0",
},
"overrides": {
    "@simonsmith/cypress-image-snapshot": {
      "cypress": "^11.1.0"
    }
},

Its working fine here

[jcubic]

@uilton-oliveira thanks, I didn't know you can do that.

[simonsmith]

It's on my list to update to Cypress 11 for my own projects, once I do I'll update the fork. Thanks for the workaround for now @uilton-oliveira

[rojasss11]

Additional information:

If someone wants to use the cypress-image-snapshot types, they should add:

npm i --save-dev @types/simonsmith__cypress-image-snapshot@npm:@types/cypress-image-snapshot

[willwearing]

@simonsmith I've created a small PR to update the README with @rojasss11's type fix: https://github.com/simonsmith/cypress-image-snapshot/pull/8

Are we considering moving to this new repo as it seems to be the most active?!

[sosog]

@willwearing you can also see my fork and PR, I think we can create a discord channel for it, and if we want to create a new package with TS support or continue with some fork.

[willwearing]

@sosog lets wait to see what @simonsmith says and if @jaredpalmer weighs in.

Discord might not be needed if we can get ownership of the repo transferred and/or we agree to move to Simons ford etc

[simonsmith]

I am in the middle of a rewrite of cypress-image-snapshot at the moment. I will replace my fork with it once it's ready. Thanks for all your continued help!

[simonsmith]

Removed my fork and recreated as standalone

Have a few more bits to add/test and then will release a new version

[aleksey-ilin]

Hi, @simonsmith. Thanks for your job. I want to store screenshots in folder with tests (cypress/intergation/test1/snapshots/). Does your plugin can it?

[simonsmith]

Right now it currently supports customSnapshotsDir.

Seen here - https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api

[abf7d]

Hi @simonsmith, I tried installing @simonsmith/cypresss-image-snapshot and it seems to support only js. Is there any plan to publish your typescript work on npm anytime soon?

[simonsmith]

@abf7d Yep, I am currently working out some issues with getting semantic-release to work correctly. I am also going to be testing the new version on a work project with hundreds of tests to ensure everything works there also. I'd like the next release to work smoothly for everyone

As a temporary workaround you can see this comment I think - https://github.com/jaredpalmer/cypress-image-snapshot/issues/252#issuecomment-1376893399

[abf7d]

Thanks @simonsmith !

[simonsmith]

It worked well for me, so here is version 7.0.0 - https://github.com/simonsmith/cypress-image-snapshot/releases/tag/7.0.0