Comments (11)
[NOTE: My first message (I deleted to remove confusion) was incorrect due to forgotten testing code]
So guys (FYI @meinaart) ...It bothered me so I digged deep down to the code and found the issue :-)
The problem is simple.... we are using it wrong.
In documentation is writen simply
You can pass the following options to toMatchImageSnapshot to override default behavior.
followed up by example
{
"createDiffImage": true, // Should a "diff image" be created, can be disabled for performance
"threshold": 0.01, // Amount in pixels or percentage before snapshot image is invalid
"name": "custom image name", // Naming resulting image file with a custom name rather than concatenating test titles
"thresholdType": "percent", // Can be either "pixel" or "percent"
}
so it evokes we should put it directly to "toMatchImageSnapshot" function. But that is not correct.
in config.js is code which expects
return Object.keys(DEFAULT_IMAGE_CONFIG)
.filter((key) => options.imageConfig && options.imageConfig[key] !== undefined)
.reduce(
so actually correct call to the method is:
cy.get('.class').toMatchImageSnapshot({imageConfig: {"threshold": 0})
and voala....it finally fails at not matching screenshots!
from cypress-plugin-snapshots.
Hi, @meinaart please is there any chance this is going to be addressed sometime soon? Just yes/no would be very appreciated answer.
I would prefer much more to use your solution (as its local and does not limit me what ever I do while doing just the core I need) against the percy/aplitools etc... cloud ones. But ofc if you don't have time and don't see it would change sometime soon I understand and I will move on to something else.
from cypress-plugin-snapshots.
Nice find @wolfi3b, it also seems to fix it if there's a value in your cypress.json
file, like so:
{
"env": {
"cypress-plugin-snapshots": {
"imageConfig": {
"threshold": 0.01
}
}
},
"ignoreTestFiles": [
"**/__snapshots__/*",
"**/__image_snapshots__/*"
]
}
Side note, my instance would blow up unless I included cypress-plugin-snapshots
in my config. I'm guessing the code for checking defaults isn't quite right based on both of these issues.
from cypress-plugin-snapshots.
@wolfi3b Does it still work though? Whenever I try to wrap my configs with "imageConfig" like this cy.document().toMatchImageSnapshot({imageConfig: { capture: 'viewport'}})
, I always get an error saying 'imageConfig' does not exist in type '(Partial<{ createDiffImage: boolean; threshold: number; thresholdType: "percent" | "pixels"; name...'
. And of course because of this it always ignores all my overridden configs.
from cypress-plugin-snapshots.
Note also that for mostly white screen + just some text changing the value (or position) the threshold (for pixels which differ) should be really low (I settled on "0", because even "0.01" didn't fail the test when the text location was changing in my case).
from cypress-plugin-snapshots.
I'm also experiencing this. I'm on 1.2.9, and the toMatchImageSnapshot tests will pass, even if the image is completely different, or deleted from disk.
from cypress-plugin-snapshots.
I see this behavior as well.
Image Snapshot tests used to fail as expected but recently that has changed and now they always pass. 1.2.9
- Seems to be intermittent and works again if the tests are renamed , cypress restarted, and rerun - will continue to investigate
from cypress-plugin-snapshots.
Having the same issue. Just installed the plugin and made the setup. The first screenshot is nice but the following ones never fail, doesn't matter what I change in the page.
@meinaart something we can do to support here? I could help debugging if you give me some context on the project itself. I tried versions up to 1.2.6 and none of them seems to work.
from cypress-plugin-snapshots.
I can confirm the bug is still out there. If there's some way for me to help - just let me know.
from cypress-plugin-snapshots.
Still there. As I wanted to use this as awesome plugin for common approach to snapshots not just images .. well this is kinda deal breaker.
If there are needed any data from us or something I believe all would be willing to help.
from cypress-plugin-snapshots.
I went for Percy as I don't have a lot of screenshots/day and I can still use the free tier.
I definitely recommend others to give it a try as well.
from cypress-plugin-snapshots.
Related Issues (20)
- (bug) cypress-plugin-snapshots errors out in component testing HOT 2
- Is it possible to remove the separator when generating the file name? HOT 1
- (bug) Cypress-image-snapshot makes the cut image
- (feat) Make the command retry on failure
- Can't pass updateSnapshots=true in npm script to update existing snapshots HOT 2
- Functionality of the plugin
- Maintaining this plugin HOT 8
- (bug) Typo in toMatchSnapshot type definition
- (bug) Update `socket.io`
- Update plugin to be compatible with Cypress 10 HOT 10
- attempt number is add to snapshot name(bug)
- Update snapshot button is missing (bug)
- Newcomers - Inactive repository HOT 3
- (bug) crypto.randomBytes is not a function
- (feat) Comparing screenshots from the same test run
- (bug) peerDependency on Cypress 4.x HOT 4
- (bug) Error reported during parallel execution of case;error message:listen EADDRINUSE: address already in use 127.0.0.1:2121
- Please make a new npm release
- Snapshot Compare Broken (bug)
- (feat) pixelmatch threshold control HOT 1
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-plugin-snapshots.