Screenshot "scroll and stitch together" is not correct when `html` and `body` have `height: 100%` css style #2681

GordonTester · 2018-10-31T11:33:57Z

I'm experiencing an issue with screenshot functionality on a website under test.

It seems Cypress does not approve and when generating a full height screenshot of my page, it includes the sticky header and the "above fold" page content several times, completely ignoring any of the content (and the site footer) which you'd have to scroll to access.

On pages where the header is not sticky, part of the bottom of the page repeats, as below.

I've taken a look at attempting to invoke some of the CSS, but the likelihood is that there are multiple elements on some of the more complex pages which may require this hack.

Has anyone experienced this / found a solution?

GordonTester · 2018-10-31T13:21:40Z

See below for an example...

testquantilope · 2018-11-08T15:54:49Z

We are experiencing the same issue with our React Web-App. This doesn't happen all the time, but only once in a while. Usually we have 5-10 such problems in our 3000 screenshots we are taking during one test run.

jennifer-shehane · 2018-11-28T07:32:50Z

Can anyone provide a way to reproduce this reliably?

GordonTester · 2018-11-28T09:58:42Z

I can reproduce it reliably on my employers website with standard screenshot functionality. I can share the URL via a private message as it's super secret at the moment.

My hacky fix has been to take the main div holding the site together and invoke 100% width and absolute (or fixed depending on the page) positioning as below:

cy.get('div[id=app]').invoke('css', 'position', 'absolute').invoke('css', 'width', '100%')

neocoder · 2018-11-29T16:07:50Z

I have the exact same issue. It's a plain page, though.
In my case it breaks because of this css

html, body {
    height: 100%;
}

I thinks it's a part of some old framework or css-reset, not sure.
Here's a workaround:

cy.get('html').invoke('css', 'height', 'initial');
cy.get('body').invoke('css', 'height', 'initial');

jennifer-shehane · 2018-12-04T10:11:25Z

@GordonTester You can email any private code / tests directly to support@cypress.io

Elshaikh · 2019-03-14T10:49:37Z

Hii @jennifer-shehane
Need your help and advice here plz , how to interact with slider with 2 handle ,
HTML

<div class="horizontal-slider" style="position: relative;">
    <div class="bar bar-0" style="position: absolute; left: 0px; right: 225px; will-change: left, right;"></div>
    <div class="bar bar-1" style="position: absolute; left: 0px; right: 0.0139758px; will-change: left, right;"></div>
    <div class="bar bar-2" style="position: absolute; left: 224.986px; right: 0px; will-change: left, right;"></div>
    <div class="handle handle-0 " tabindex="0" role="slider" aria-valuenow="162.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 1; left: 0px;"></div>
    <div class="handle handle-1 " tabindex="0" role="slider" aria-valuenow="9177.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 2; left: 224.986px;"></div>
</div>

cypress step

cy.get('div.handle.handle-0').invoke('attr', 'aria-valuenow', "1000").click() // handle 1
cy.get('div.handle.handle-1').invoke('attr', 'aria-valuenow', "4188").click() // handle 2

nathanhere · 2020-03-25T21:34:57Z

I have the exact same issue. It's a plain page, though.
In my case it breaks because of this css
html, body {
    height: 100%;
}
I thinks it's a part of some old framework or css-reset, not sure.
Here's a workaround:
cy.get('html').invoke('css', 'height', 'initial');
cy.get('body').invoke('css', 'height', 'initial');

@neocoder this finally put an end to three straight days of constantly combing the web for a solution. Many, Many, Many thanks.

jennifer-shehane · 2020-07-14T05:15:00Z

I can recreate this with the following code:

index.html

<html style="height: 100%;">
<body style="height: 100%; background: linear-gradient(yellow, blue, red);">
</body>
</html>

spec.js

it('screenshot', () => {
  cy.visit('index.html')
  cy.screenshot()
});

Expected screenshot

Actual screenshot

Workaround

As explained by @neocoder, this workaround fixes the screenshot.

it('screenshot', () => {
  cy.visit('index.html')
  cy.get('html').invoke('css', 'height', 'initial');
  cy.get('body').invoke('css', 'height', 'initial');
  cy.screenshot()
  cy.get('html').invoke('css', 'height', '100%');
  cy.get('body').invoke('css', 'height', '100%');
});

harunurhan · 2020-08-21T11:49:09Z

this work around doesn't fix the issue with sticky headers though, it still requires more css injection to make it work. And at the end what you're testing ends up being too different than the actual production code.

@jennifer-shehane

srinu-kodi · 2020-08-31T13:24:54Z

Hi @jennifer-shehane
I am facing an issue when I am taking screenshot of a react Single Page App. Since it is confidential so I cannot share the screenshot here. Basically page has

-> left nav section and bottom left nav section has Feedback option.
-> right nav section and right nav section has chatbot button option.

So when I am taking the screenshot, since the page is large so it is taking scrolls for 2 times as per the height I am passing to Cypress but due to this Chatbot & Feedback options coming as redundant and entire screenshot coming as weird.

Do you suggest how can we overcome this and take screenshot fullPage without scrolls somehow to avoid this issue...

I have gone through cypress-visual-regression & cypress-image-snapshot npm packages but all of them are underlying calling to cy.screenshot so they are not helping

Your help is highly appreciated .

only4arunkumar · 2021-03-24T11:21:03Z

May be we can try taking the screenshot of individual elements rather than the entire screen. i need to try that out. i facing the same issue with Cypress 6.8.0 ,cypress-image-snapshot: 2.2.2. The above suggested solution didn't work for me when i am testing my webpages with viewports matching mobile devices. I always get scrollbars and entire screen is not captured for visual regression

r3sdev · 2021-03-25T13:02:37Z

May be we can try taking the screenshot of individual elements rather than the entire screen. i need to try that out. i facing the same issue with Cypress 6.8.0 ,cypress-image-snapshot: 2.2.2. The above suggested solution didn't work for me when i am testing my webpages with viewports matching mobile devices. I always get scrollbars and entire screen is not captured for visual regression

I'm experiencing the same problem with cypress@6.8.0 and cypress-plugin-snapshots@^1.4.4.

Here's a screenshot:

audriusnavickasDB · 2021-04-07T06:07:13Z

This issue also affects blackouts. Usually if you have images added as the blackouts when taking a snapshot blackouts get some sort of offset and the image gets half covered or not covered at all. This is even more visible for elements, which are positioned absolute/fixed and have scrollable content and the provided fix does not help at all. Time to time you need to add specific heights for certain elements in order to get somewhat correct result.

dr-itz · 2021-07-27T14:53:34Z

Same screen shot issue here, but started happening from Bootstrap 4.6 -> Bootstrap 5.0. We already had html, body { height: 100%; }. The difference in BS5 is the added :root { scrolling-behavior: smooth; }. Overriding that fixed things again. So does passing --disable-smooth-scrolling to Chrome, i.e. in plugins/index.ts:

import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  addMatchImageSnapshotPlugin(on, config);

  on('before:browser:launch', (browser: Cypress.Browser, launchOptions: Cypress.BrowserLaunchOptions) => {
    if (browser.family === 'chromium') {
      launchOptions.args.push('--force-color-profile=srgb');
      launchOptions.args.push('--disable-low-res-tiling');
      launchOptions.args.push('--disable-smooth-scrolling');
    }
    return launchOptions;
  });
};

Note, we run tests with Chrome, not Electron since it's faster and screen shots are more reliable 😉

Doc-Code · 2021-07-27T15:14:52Z

Same screen shot issue here, but started happening from Bootstrap 4.6 -> Bootstrap 5.0. We already had html, body { height: 100%; }. The difference in BS5 is the added :root { scrolling-behavior: smooth; }. Overriding that fixed things again. So does passing --disable-smooth-scrolling to Chrome, i.e. in plugins/index.ts:
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  addMatchImageSnapshotPlugin(on, config);

  on('before:browser:launch', (browser: Cypress.Browser, launchOptions: Cypress.BrowserLaunchOptions) => {
    if (browser.family === 'chromium') {
      launchOptions.args.push('--force-color-profile=srgb');
      launchOptions.args.push('--disable-low-res-tiling');
      launchOptions.args.push('--disable-smooth-scrolling');
    }
    return launchOptions;
  });
};
Note, we run tests with Chrome, not Electron since it's faster and screen shots are more reliable 😉

now it doesn't give full screen at all(((

Doc-Code · 2021-07-27T16:20:52Z

cy.get('.footer').invoke('css', 'position', 'relative');
cy.wait(0);
cy.screenshot({ capture: 'fullPage' });
cy.get('.footer').invoke('css', 'position', 'fixed');

lexanth · 2021-09-24T16:05:00Z

I had a similar screenshot issue without having height: 100% because my layout was being set up with an element-resize-detector which was listening to scroll events, which were being triggered by the screenshot scroll.

The solution in that case was to trigger a scroll to the bottom and back to the top before taking the screenshot. The first scroll triggered the layout events, so the layout didn't jump when it took the screenshot.

Just in case anyone else gets this sort of visual error.

joma74 · 2021-09-24T17:00:48Z

height: 100vh in runner does not work either in Chrome or Firefox via

cy.screenshot("article-comment-", {
      capture: "fullPage",
    });

.

See Screenshot "fullPage" to the left, Runner to the right.

As you can see the vertical Scrollbar on the Runner app frame, for fullPage there is something below the fold. That part is not on Screenshot "fullPage".

all9lives · 2022-05-07T06:37:18Z

I was experiencing the same screenshot issues with html and body with height: 100% but even after making height: auto I still had screenshot issues, removing scroll-behavior: smooth was what fixed screenshots for me. Hopefully this may help other seeing similar issues.

cy.get("html, body").invoke(
  "attr",
  "style",
  "height: auto; scroll-behavior: auto;"
);

gundant · 2022-06-09T10:19:52Z

Similar issue with react canvas elements. Tried many ways to get around it and the workaround for this issue finally fixed it.

Screenshot of an element that was below current view would apparently not be scrolled into view by cypress (can see this doing GUI run; does not scroll unless workaround added), fullpage would in some resolutions give weird results like in this issue, scaled=false missed elements completely (black screenshot).

Usual element screenshot result would only give the top of the targeted element unless the viewport and screen were some specific large values (so that even the bottom elements did not require scrolling to be in view):

With cy.get('html').invoke('css', 'height', 'initial'); cy.get('body').invoke('css', 'height', 'initial'); added it captures the element as expected:

(I added the obfuscation)

ArchiMoebius · 2022-11-01T00:22:51Z

cypress.config.js

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  video: false,
  e2e: {
    experimentalSessionAndOrigin: true,
    baseUrl: 'http://127.0.0.1:1880/',
    supportFile: false,
    specPattern: 'cypress/e2e/**/*.cy.js',
    waitForAnimations: false,

    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser, launchOptions) => {

        launchOptions.args.push('--force-color-profile=srgb');
        launchOptions.args.push('--disable-low-res-tiling');
        launchOptions.args.push('--disable-smooth-scrolling');

        return launchOptions
      })
    }
  },
});

Thanks @dr-itz - that worked for me 🤷‍♂️ (using chrome)

chungchamchi19 · 2023-07-03T10:43:33Z

cy.get("html, body").invoke(
  "attr",
  "style",
  "height: auto; scroll-behavior: auto;"
);

I was experiencing the same screenshot issues with html and body with height: 100% but even after making height: auto I still had screenshot issues, removing scroll-behavior: smooth was what fixed screenshots for me. Hopefully this may help other seeing similar issues.
cy.get("html, body").invoke(
  "attr",
  "style",
  "height: auto; scroll-behavior: auto;"
);

You save my day. Many many thanks bro!

cchaglund · 2024-01-31T14:15:44Z

Same screen shot issue here, but started happening from Bootstrap 4.6 -> Bootstrap 5.0. We already had html, body { height: 100%; }. The difference in BS5 is the added :root { scrolling-behavior: smooth; }. Overriding that fixed things again. So does passing --disable-smooth-scrolling to Chrome, i.e. in plugins/index.ts:
import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';

export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  addMatchImageSnapshotPlugin(on, config);

  on('before:browser:launch', (browser: Cypress.Browser, launchOptions: Cypress.BrowserLaunchOptions) => {
    if (browser.family === 'chromium') {
      launchOptions.args.push('--force-color-profile=srgb');
      launchOptions.args.push('--disable-low-res-tiling');
      launchOptions.args.push('--disable-smooth-scrolling');
    }
    return launchOptions;
  });
};
Note, we run tests with Chrome, not Electron since it's faster and screen shots are more reliable 😉

EDIT: I thought this had fixed my issue, but what really fixed my issue (which I had done at the same time) was removing my sticky header (display: none), none of the other proposed fixes had any effect on my particular issue.

Plizzz · 2024-04-17T15:17:32Z

I was experiencing the same screenshot issues with html and body with height: 100% but even after making height: auto I still had screenshot issues, removing scroll-behavior: smooth was what fixed screenshots for me. Hopefully this may help other seeing similar issues.
cy.get("html, body").invoke(
  "attr",
  "style",
  "height: auto; scroll-behavior: auto;"
);

It works for cypress v13. Thank you!

GordonTester changed the title ~~Screenshot functionality does not play nicely with sticky headers on websites~~ Screenshot "scroll and stitch together" functionality does not play nicely with React Single Page Apps Oct 31, 2018

jennifer-shehane added the topic: screenshots 📸 label Oct 31, 2018

jennifer-shehane assigned chrisbreiding Oct 31, 2018

chrisbreiding added the stage: needs investigating Someone from Cypress needs to look at this label Oct 31, 2018

jennifer-shehane mentioned this issue Dec 6, 2019

Take screenshots using Chrome DevTools Protocol #5899

Closed

jennifer-shehane unassigned chrisbreiding Jul 14, 2020

jennifer-shehane added the type: bug label Jul 14, 2020

jennifer-shehane changed the title ~~Screenshot "scroll and stitch together" functionality does not play nicely with React Single Page Apps~~ Screenshot "scroll and stitch together" is not correct when html and body have height: 100% css style Jul 14, 2020

jennifer-shehane mentioned this issue Jul 14, 2020

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

Closed

jennifer-shehane added the existing workaround label Jul 14, 2020

WinstonN mentioned this issue Oct 8, 2021

Fullpage screenshots looks staggered (show the same frame multiple times) and are massive in size #18409

Closed

WalterMoar mentioned this issue Jan 13, 2022

Screenshot "scroll and stitch together" repeats element with CSS "position: fixed" #19700

Closed

nagash77 added the prevent-stale mark an issue so it is ignored by stale[bot] label Apr 3, 2023

ArturoBlazquez mentioned this issue Apr 19, 2023

Screenshot is not correct with fixed elements #26542

Open

nagash77 added E2E Issue related to end-to-end testing Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. and removed stage: needs investigating Someone from Cypress needs to look at this labels Jul 5, 2023

mduivcap mentioned this issue Sep 25, 2023

[Bug]: Long Screenshot (e.g. foto gallery on iphone-8 viewport) is cut/stitched incorrect FRSOURCE/cypress-plugin-visual-regression-diff#270

Closed

3 tasks

jennifer-shehane mentioned this issue Dec 17, 2023

cy. Screenshot capturing improper screenshot some times #27291

Closed

tester-at-bmi mentioned this issue Mar 15, 2024

Trying to test maps but have uggly cut offs. uktrade/cypress-image-diff#212

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Screenshot "scroll and stitch together" is not correct when `html` and `body` have `height: 100%` css style #2681

Screenshot "scroll and stitch together" is not correct when `html` and `body` have `height: 100%` css style #2681

GordonTester commented Oct 31, 2018 •

edited

GordonTester commented Oct 31, 2018

testquantilope commented Nov 8, 2018

jennifer-shehane commented Nov 28, 2018

GordonTester commented Nov 28, 2018 •

edited

neocoder commented Nov 29, 2018

jennifer-shehane commented Dec 4, 2018

Elshaikh commented Mar 14, 2019 •

edited by jennifer-shehane

nathanhere commented Mar 25, 2020

jennifer-shehane commented Jul 14, 2020 •

edited

harunurhan commented Aug 21, 2020

srinu-kodi commented Aug 31, 2020 •

edited

only4arunkumar commented Mar 24, 2021

r3sdev commented Mar 25, 2021 •

edited

audriusnavickasDB commented Apr 7, 2021 •

edited

dr-itz commented Jul 27, 2021 •

edited

Doc-Code commented Jul 27, 2021

Doc-Code commented Jul 27, 2021 •

edited

lexanth commented Sep 24, 2021

joma74 commented Sep 24, 2021 •

edited

all9lives commented May 7, 2022 •

edited

gundant commented Jun 9, 2022

ArchiMoebius commented Nov 1, 2022 •

edited

chungchamchi19 commented Jul 3, 2023

cchaglund commented Jan 31, 2024 •

edited

Plizzz commented Apr 17, 2024

Screenshot "scroll and stitch together" is not correct when html and body have height: 100% css style #2681

Screenshot "scroll and stitch together" is not correct when html and body have height: 100% css style #2681

Comments

GordonTester commented Oct 31, 2018 • edited

GordonTester commented Oct 31, 2018

testquantilope commented Nov 8, 2018

jennifer-shehane commented Nov 28, 2018

GordonTester commented Nov 28, 2018 • edited

neocoder commented Nov 29, 2018

jennifer-shehane commented Dec 4, 2018

Elshaikh commented Mar 14, 2019 • edited by jennifer-shehane

nathanhere commented Mar 25, 2020

jennifer-shehane commented Jul 14, 2020 • edited

Expected screenshot

Actual screenshot

Workaround

harunurhan commented Aug 21, 2020

srinu-kodi commented Aug 31, 2020 • edited

only4arunkumar commented Mar 24, 2021

r3sdev commented Mar 25, 2021 • edited

audriusnavickasDB commented Apr 7, 2021 • edited

dr-itz commented Jul 27, 2021 • edited

Doc-Code commented Jul 27, 2021

Doc-Code commented Jul 27, 2021 • edited

lexanth commented Sep 24, 2021

joma74 commented Sep 24, 2021 • edited

all9lives commented May 7, 2022 • edited

gundant commented Jun 9, 2022

ArchiMoebius commented Nov 1, 2022 • edited

cypress.config.js

chungchamchi19 commented Jul 3, 2023

cchaglund commented Jan 31, 2024 • edited

Plizzz commented Apr 17, 2024

Screenshot "scroll and stitch together" is not correct when `html` and `body` have `height: 100%` css style #2681

Screenshot "scroll and stitch together" is not correct when `html` and `body` have `height: 100%` css style #2681

GordonTester commented Oct 31, 2018 •

edited

GordonTester commented Nov 28, 2018 •

edited

Elshaikh commented Mar 14, 2019 •

edited by jennifer-shehane

jennifer-shehane commented Jul 14, 2020 •

edited

srinu-kodi commented Aug 31, 2020 •

edited

r3sdev commented Mar 25, 2021 •

edited

audriusnavickasDB commented Apr 7, 2021 •

edited

dr-itz commented Jul 27, 2021 •

edited

Doc-Code commented Jul 27, 2021 •

edited

joma74 commented Sep 24, 2021 •

edited

all9lives commented May 7, 2022 •

edited

ArchiMoebius commented Nov 1, 2022 •

edited

cchaglund commented Jan 31, 2024 •

edited