Customizable baseline image name format

[daniellboy]

Is it possible to make baseline image format name to be customizable?

For now it use the spec file name as prefix for the baseline image name : https://github.com/uktrade/cypress-image-diff/blob/77af07787aec62ad3845aa59f139342f72e4aaf4/src/command.js#L14C1-L25C1

Cause maybe there is needed to re-use baseline image on other spec file

Proposed solution : Maybe can put baseline image format to be configurable via cypress-image-diff.config.js and make current format (which is used spec filename as prefix) as default value

[PippoRaimondi]

This is probably not well documented, but the name you add to the compareScreenshot command is used as part of the file name. I.E

cy.compareSnapshot('home-page')

means your filename will be something like: spec-name-home-page.png

although not sure about this: Cause maybe there is needed to re-use baseline image on other spec file

you would have to elaborate more plz so I can understand the use case.

[tamasmagyar]

If I understand correctly the @daniellboy would like to customise the baseline image names. In this case remove any 'spec file naming related' dependency, so they can re-use a baseline image in multiple spec files.

Currently it is not possible to re-use them, since all the baseline image contain the corresponding spec file name in their filename

for example: current usage - assuming both signup and login page looks similar/same

• signUp.spec.ts which contains a cy.compareSnapshot('signup') will generate a baseline image with the name of signup.spec.ts-signup.png image name
• login.spec which contains a cy.compareSnapshot('signup') will generate a baseline image with the name of login.spec.ts-signup.png image name

Daniel would like to have only one baseline image in this case, instead of two. Which can be achieved if baseline image names are configurable. Removing the file name from the beginning of the baseline images in this case.

Suggested usage:

• set some file naming convention in config file, e.g. only use the provided home in this case, thus generating home.png for the baseline image
• signUp.spec.ts which contains a cy.compareSnapshot('home') will use home.png
• login.spec which contains a cy.compareSnapshot('home') will use home.png

[daniellboy]

exactly, thanks @tamasmagyar for providing clearer examples

[kien-ht]

@daniellboy Cause maybe there is needed to re-use baseline image on other spec file Can you please share a use case for this?

[daniellboy]

Hi @kien-ht , @tamasmagyar already provided an example above :

for example: current usage - assuming both signup and login page looks similar/same

• signUp.spec.ts which contains a cy.compareSnapshot('signup') will generate a baseline image with the name of signup.spec.ts-signup.png image name
• login.spec which contains a cy.compareSnapshot('signup') will generate a baseline image with the name of login.spec.ts-signup.png image name

Daniel would like to have only one baseline images in this instead of two. Which can be achieved if baseline image names are configurable. Removing the file name from the beginning of the baseline images in this case.

Suggested usage:

• set some file naming convention in config file, e.g. only use the provided home in this case, thus generating home.png for the baseline image
• signUp.spec.ts which contains a cy.compareSnapshot('home') will use home.png
• login.spec which contains a cy.compareSnapshot('home') will use home.png

[kien-ht]

I see. This is something we could improve in our next version. However, this should be per command level, not at the global level. We could add an option in the compareSnapshot command to say strictly use this name, otherwise prepend the spec file as default.

Currently compareSnapshot command takes in 3 arguments: name, testThreshold, recurseOptions. There will be a few more coming possible options such as cypressScreenshotOptions (#123), this one exactName (for example) and most of the other global configs as well. This leads us to refactor the compareSnapshot arguments into one big option object and that will eventually make this command much more flexible.

For example:

cy.compareSnapshot({
  name: 'home',
  exactName: true,
  testThreshold: 0.1,
  ...
})
cy.compareSnapshot('home') // also valid

I suggest to introduce this breaking change in v2, along with the new html report. What do you guys think? @PippoRaimondi @tamasmagyar

[PippoRaimondi]

@kien-ht sounds like this is a very specific use case and would be best to deliver it on v2 of this plugin like you suggested... Providing the ability to provide an options object to handle the use case sounds good too!

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 30 days since being marked as stale.