v3.3.0 - screenshot stitching broken

[lukeapage]

Current behavior:

Large pages get stitched together nicely by scrolling and stitching together images

Desired behavior:

This continues to work in 3.3.0

Steps to reproduce: (app code and test code)

It looks like its not scrolling the page properly, but taking the screenshots anyway and stitching them.

example:

This appears to be happening consistently - I can provide more info and investigation if this isn't immediately reproducible.

Versions

windows, cypress 3.3.0

[jennifer-shehane]

Hey @lukeapage, thanks for opening an issue.

It's a bit difficult to tell from your issue what the screenshot should look like, since I'm not familiar with your application.

Can you run the same test in 3.2.0 and provide the screenshots alongside the 3.3.0 screenshots? I'm assuming 3.2.0 had the screenshot stitching you wanted.

Knowing all of the changes that went into 3.3.0, I have no idea what would have affected this screenshot process.

[jennifer-shehane]

Also, do you have any code or plugins in your application that affect scrolling behavior? Smooth scroll? Similar?

[lukeapage]

Here is the 3.2.0 screenshot.

and now I've noticed that in 3.2.0 it is (for our app) not stitching together the app.

So
3.2.0 - not stitching
3.3.0 - trying to stitch but failing

[lukeapage]

We have no scrolling plugins, but as per other related issues I've found we may have particular css that is somehow breaking it.

I'll have a debug later.. I raised this thinking it was an obvious regression but now I see its not as clear as that.

[jennifer-shehane]

This fix in 3.3.0 was slightly related to screenshot timing #3069 But yeah, 3.3.0 is also running in Chrome 61 versus Chrome 59, which may have some unintended change.

[lukeapage]

@jennifer-shehane this line..

cypress/packages/driver/src/cy/commands/screenshot.coffee

Line 107 in bd0341e

docHeight = $(doc).height()

Now returns a height thats bigger than the body height (which is set to viewport)

We have a structure like this

body
  div
     div - set to viewport height
       div - overflows and gives a scrollbar on the parent div

and it seems document.body.scrollHeight returns 1004, but the viewport is 600.

When I try chrome it does the same thing as electron, so it may actually be a chrome bugfix and electron v59 worked in our favour.

I think we can use capture: 'viewport' to keep the same behaviour, or we can change our dom structure to scroll on body if we want stitching to work.