cypress-image-diff icon indicating copy to clipboard operation
cypress-image-diff copied to clipboard

Snapshot not including entire screen even though I set the resolution very large

Open JasonFairchild opened this issue 3 years ago • 3 comments

This plugin is only taking a screenshot of about a 1000px square section of the top left of the screen, which is a small portion of this long form I'm trying out (needs about 4000px height to render all of it without a scrollbar). Has anyone else noticed this? I'm setting the viewport like this and when I run the test, it displays with this viewport in the browser, but the snapshot command always only gets a fraction. I've also tried cy.compareSnapshot and cy.root().compareSnapshot... Is it obvious I'm doing something wrong? I'm doing this in a component test, btw.

image

JasonFairchild avatar Aug 22 '22 22:08 JasonFairchild

This seems kind of wild. I just tried another long (large height) component, doing the same thing as the example test I showed, and it did work to do the scrolling behavior and captured the whole screen. So I guess there is some difference between them, but I have no idea what. The component that isn't working is a higher level component that uses the component that did work as I'd expect...

JasonFairchild avatar Aug 22 '22 22:08 JasonFairchild

Yeah I got this same behaviour, won't go wider than 1000px

Jamesking56 avatar Oct 30 '22 16:10 Jamesking56

I've just managed to get it to do a 1280x800 image by setting viewportWidth and viewportHeight in cypress.config.js.

Jamesking56 avatar Oct 30 '22 17:10 Jamesking56

Same behavior here. I run all tests headless and in firefox a width of over 1000px is possible. In Chrome, however, the images are limited to a width of 1000px so that not all of the screen is visible. Maybe this is a Chrome problem? With the height of the screen, I don't have any issues.

SamuelKnoch avatar Dec 12 '22 15:12 SamuelKnoch