cypress-image-snapshot: Unexpected image size differences

Hi! I posted an issue earlier this morning https://github.com/palmerhq/cypress-image-snapshot/issues/79 which you resolved by having a more helpful error message.

Error: Image size (1280x1162) different than saved snapshot size (1280x1161).

I saw #67, but I’m unsure if it’s related, as I’m using cypress run both locally and in CI. Feel to close, and I’ll copy-paste my input there.

I have no idea how I’m getting a 1 pixel difference on a static page, especially since the other static pages DONT have this difference. Do you have any ideas?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 17

Commits related to this issue

devex-925: regenerated baseline snapshot for sign-order.spec using cypress run so image sizes match ci to local per https://github.com/jaredpalmer/cypress-image-snapshot/issues/82#issuecomment-8136349... — committed to flexion/ef-cms by rosiehsmith 3 years ago

Most upvoted comments

To everybody commenting in here. The issue is unrelated to this library. Please see https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless for a workaround and https://github.com/cypress-io/cypress/issues/587#issuecomment-812115782 for context.

I’m going to unsubscribe from this.

kylemh on Sep 8, 2021

To anyone who may encounter this issue: https://github.com/cypress-io/cypress/issues/3324#issuecomment-600125036 TLDR: Try cypress run instead of cypress open locally to generate base snapshots.

neirongkuifa on Apr 5, 2021

I think this is a different issue than #67 as it’s not related to image size differences when using cypress run and cypress open.

It’s tough to say for sure what the issue could be, we’ve seen some subtle OS differences creep in before (https://github.com/palmerhq/cypress-image-snapshot/issues/71).

A possible workaround could be to explicitly set the viewport with cy.viewport before calling cy.matchImageSnapshot:

cy.viewport(1280, 1162);
cy.matchImageSnapshot();

jackjocross on May 14, 2019

I’m also consistently able to replicate a similar issue, but it fails when I have the dev tools open in Chrome…

I take my snapshot with a fixed viewport size:

cy.viewport(1200, 800);
cy.get('[data-cy=canvas-preview]').matchImageSnapshot();

With the dev tools closed it’s fine. But when I run the test with them open it fails

Seems the dev tools is eating up some of the space…

(docked to the right) Error: Image size (1150x1009) different than saved snapshot size (1070x1009).

(docked to the bottom) Error: Image size (1150x1009) different than saved snapshot size (1150x655).

danvoyce on Jun 13, 2019

That seems potentially relevant to the resolution issue that’s discussed on the Cypress issues.

https://github.com/cypress-io/cypress/issues/2102

It’s an issue with Cypress unfortunately.

kylemh on May 24, 2019

You’ve given me a lot to go on, and I don’t think my issue is related to cypress-image-snapshot, so I’m gonna close it. I’ll investigate more and see if containerization eliminates my issue. Will repot to cypress’ issues if I can’t resolve the issue.

kylemh on May 19, 2019

That is strange behavior, it definitely seems like a bug if you’re setting a specific viewport size and the screenshot is a different size.

It looks like Travis has a few virtual machine options, but the goal with running Cypress in a container would be to use the same operating system locally and in CI. For example if you were using a Travis Ubuntu environment, unless your local machine is also Ubuntu there could be subtle differences in the environments.

jackjocross on May 17, 2019