Comments (9)
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
from cypress-image-diff.
@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!
from cypress-image-diff.
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.
from cypress-image-diff.
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 acy.compareSnapshot('signup')
will generate a baseline image with the name ofsignup.spec.ts-signup.png
image namelogin.spec
which contains acy.compareSnapshot('signup')
will generate a baseline image with the name oflogin.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 generatinghome.png
for the baseline image signUp.spec.ts
which contains acy.compareSnapshot('home')
will usehome.png
login.spec
which contains acy.compareSnapshot('home')
will usehome.png
from cypress-image-diff.
exactly, thanks @tamasmagyar for providing clearer examples
from cypress-image-diff.
@daniellboy Cause maybe there is needed to re-use baseline image on other spec file
Can you please share a use case for this?
from cypress-image-diff.
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 acy.compareSnapshot('signup')
will generate a baseline image with the name ofsignup.spec.ts-signup.png
image namelogin.spec
which contains acy.compareSnapshot('signup')
will generate a baseline image with the name oflogin.spec.ts-signup.png
image nameDaniel 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 generatinghome.png
for the baseline imagesignUp.spec.ts
which contains acy.compareSnapshot('home')
will usehome.png
login.spec
which contains acy.compareSnapshot('home')
will usehome.png
from cypress-image-diff.
This issue is stale because it has been open for 30 days with no activity.
from cypress-image-diff.
This issue was closed because it has been inactive for 30 days since being marked as stale.
from cypress-image-diff.
Related Issues (20)
- Incorrect Difference Percentage Resulting from compareSnapshot Command HOT 6
- v1.31.0 was a breaking change HOT 3
- Add option to not take full size screenshot HOT 5
- Taken screenshots are not the size I configured HOT 10
- Option to run all tests and get diff files at once even if there are failing ones HOT 2
- Custom config file is not working HOT 14
- Cannot find module cypress-image-diff-js/dist/plugin HOT 12
- Error preparing file: cypress/support/e2e.js HOT 8
- Config "FAILURE_THRESHOLD" did not work HOT 5
- Cypress integration broken: The deleteScreenshot 'task' event has not been registered in the setupNodeEvents method. You must register it before using cy.task() HOT 4
- User config error `cypress-image-diff.config.js`
- Missing JSON report when in `cypress OPEN` mode HOT 3
- Unable to update folder locations HOT 5
- Unable to generate JSON REPORT under Folder cypress-image-diff-html-report HOT 1
- Specify shared location/path for Screenshots and Reports HOT 2
- Package subpath './dist/plugin' is not defined by "exports"... HOT 8
- Intermittent Error: ENOENT: no such file or directory, open '/a/b/foo.png'
- Error: ERR_PACKAGE_PATH_NOT_EXPORTED HOT 4
- Trying to test maps but have uggly cut offs. HOT 1
- Component's transform translate changes unexpectedly during screenshot HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cypress-image-diff.