GithubHelp home page GithubHelp logo

Comments (11)

wolfi3b avatar wolfi3b commented on July 22, 2024 24

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

wolfi3b avatar wolfi3b commented on July 22, 2024 4

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.

StormPooper avatar StormPooper commented on July 22, 2024 3

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.

linukkis avatar linukkis commented on July 22, 2024 1

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

skivol avatar skivol commented on July 22, 2024 1

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.

mullens avatar mullens commented on July 22, 2024

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.

uillis avatar uillis commented on July 22, 2024

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.

viniciuskneves avatar viniciuskneves commented on July 22, 2024

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.

netes avatar netes commented on July 22, 2024

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.

wolfi3b avatar wolfi3b commented on July 22, 2024

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.

viniciuskneves avatar viniciuskneves commented on July 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.