Screenshot functionality clips UI on `{ capture: 'fullPage' }` on larger resolution viewport that scales UI with css grid

[zjkipping]

Current behavior

I have a project that has a scaleable UI (no top level scroll bars) making use of css grid and setting the html/body to { width: 100vw, height: 100vh }.

When trying to screenshot this application at various resolutions (1920x1080, 3840x1080, 3840x2160) the UI gets clipped off and the screenshot file size itself is not at the viewport resolution that is configured. We do this configuration in the cypress.config.ts with the viewportHeight and viewportWidth properties.

I have tried different capture modes: 'runner', 'viewport', 'fullPage'. Only 'runner' sort of works, but that is due to it showing the zoomed out version of the app in the runner iframe. 'fullPage' clips the UI entirely and 'viewport' clips the UI and has scrollbars.

I created a public repro here that acts "similar" enough to my project: https://github.com/zjkipping/cypress-screenshot-issue

For ease of use in the repro I configure the viewport via the cy.viewport() function instead of the cy.config.ts.

The full UI should display full width navigation bar (header on left, page links on right and then 5 green boxes (one in each corner + middle) below the navigation bar.

If you install and then run npm run e2e then you will find the below 6 screenshots in the dist:

1920x1080:

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

wide-screen (3840x1080):

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

4k (3840x2160):

{ capture: 'fullPage' }

{ capture: 'runner' }

{ capture: 'viewport' }

Desired behavior

Create screenshots that show the full viewport in { capture: 'fullPage' } at the configured height/width at the correct file dimensions.

Test code to reproduce

https://github.com/zjkipping/cypress-screenshot-issue

Cypress Version

^12.2.0

Node version

18.12.0

Operating System

Windows 10 Pro

Debug Logs

No response

Other

No response

[AtofStryker]

Hi @zjkipping. Thank you for opening an issue. This seems like a bug to me and was able to replicate the behavior you were describing with your reproduction repo. I'll go ahead and get this routed to a team!

[zjkipping]

@AtofStryker @nagash77 Appreciate you both responding so fast to this! Looking forward to seeing this resolved :)

[Josh68]

We are also experiencing clipping/centering/scaling issues on capture of fullPage with Cypress 12 (up to 12.5), and are not using grid for layout.

[nekkon]

Same here. Not sure how this can be solved.

[danfug]

@AtofStryker just wondering if you have any information on when this issue might be fixed? Thanks!

[AtofStryker]

@danfug currently we don't have a timeline for this, but are open to open source contributions if anyone is willing or able!

[zkarsli61]

Hi @zjkipping, According to cypress doc https://docs.cypress.io/api/cypress-api/screenshot-api#Scale-viewport-and-fullPage-captures I tried to use scale:true for fullPage, but it's not working. Can you try this option? If we have the same issue. We can say the "scale" option is not working properly.

[zjkipping]

@zkarsli61 I assume this would be coerced to true or not matter when doing a "fullpage" capture since the intent is to capture the full page. Also regardless of the "scale" property, the screenshot method is not captureing the full viewport which it should be in "fullpage' capture mode.

I went ahead and created a branch though on the reproduction github repository for this issue: https://github.com/zjkipping/cypress-screenshot-issue/tree/use-scale-property

It still doesn't work as you said with the scale: true added to the screenshot method config.

[gauthierm]

Part of what could be happening here is the headless runner virtual screen resolution is 1280x720. At the larger sizes in your example, the screenshots get cropped. See https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless

This is buried in the docs and extremely non obvious behaviour.

[mzaytsevv]

Having similar issue with screenshots. Setting viewport to some value and seeing it in Cypress runner set correctly, but when the cy.screenshot function is called I see another window with the app itself on the top and it has completely different dimensions making the layout corrupted. I've tried all modes and 'runner' somehow works and I was thinking to make a wrapper that will clip the area but it won't support blacking out, so not the option. Need some resolution here.

[martinambrus]

This is still happening more than a year later. Is there any intention at all to fix this?

I'm new to Cypress and trying to create image diff tests for full page screenshots - and this issue is making it super-hard (since our client has super-wide tables and all I can do is change viewport to see them in their fullness).

The only thing that works for me right now (and ONLY in Chrome - not even in Edge) is creating visual browser tests (so the browser is shown on my PC), then zooming the browser out and running my tests that way. In such case, Chrome would keep the zoom even on the screenshots page. This doesn't work on Edge or Firefox at all, so I'm afraid this can break anytime soon after any Chrome update.

Thanks for any response.

[tyler36]

Still an issue with Cypress 13.15.0