Cypress doesn't take correct snapshots in 'fullPage' mode in Electron and Chrome browsers

[ElderMorgun]

Current behavior:

When I use cy.screenshot() in the test code for visual regression, I wanna take a picture of all DOM element, not only its visible part.

But cypress cannot capture the whole element. The screenshots have the correct size but with only recurring visible part.

Desired behavior:

To take full element as screenshot independently of the DOM element size or viewport settings

Steps to reproduce:

Test code:

it('Take a long snapshot', () => {
  cy.visit('https://twitter.com/Irine_Meier/status/1172003419458088960');
  cy.wait(2000);
  cy.get('#stream-items-id').screenshot({ capture: 'fullPage', scale: true });
});

I took twitter long read for example of App code

https://twitter.com/Irine_Meier/status/1172003419458088960

As u can see the getter #stream-items-id is the twitter tread, the DOM element has a specific length and width

Versions

Windows: win 10 x64
Cypress: 3.7.0
Browsers: Electron 73, Chrome 78

[jennifer-shehane]

@ElderMorgun As an aside the capture: 'fullPage' option will also be ignored here, since you chained .screenshot() off of an element as noted in the description for the capture option in our docs. https://on.cypress.io/screenshot#Arguments

When I run the provided code the #stream-items-id shows as not visible when running the test, not sure why that is.

The twitter feed also dynamically loads as your scroll, which may have something to do with the strange screenshot behavior in Cypress.

Screenshot in Cypress

The screenshot is notably wrong. I pasted a screenshot of what mine returned - the checkered part being a transparent bg.

Screenshot how it should look

Screenshot without element

Just doing normal cy.screenshot() does not screenshot the fullPage either.

[Souffd]

I had a similar issue with fullPage screenshot without element, it did not scroll and did not screenshot the fullPage
I had style height: 100% on the body element, and removing it allow cypress to take fullPage screenshot

[Poitrin]

I had style height: 100% on the body element, and removing it allow cypress to take fullPage screenshot

Can confirm, had the same CSS code. After removing it, it works, both with fullPage and element snapshots.

[azaeng04]

@jennifer-shehane any proposed solution for this?

[jennifer-shehane]

I believe this is a duplicate of #2681 - I can't completely recreate the original issue since Twitter's interface has changed, but it sounds similar from the screenshots and comments.

[srinu-kodi]

Hi @ElderMorgun
Could you please tell me how did you solve this issue. I have been facing this issue and there is no way to visually test the application if I have to test at fullPage level... Please respond.

[srinu-kodi]

@jennifer-shehane Any thoughts on this. No library is helping out in the visual regression front with Cypress. It would be really great if someone from Cypress fixes the cy.screenshot() which is not taking fullPage screenshot.. Could you please throw some light on this.

[jennifer-shehane]

@srinu-kodi There's not a current workaround, this is still an issue documented in #2681