Cypress: Screenshot of element is not properly captured with `scroll-behavior: smooth`

Created on 20 Dec 2019 · 4Comments · Source: cypress-io/cypress

Current behavior:

I want to screenshots some elements, but screenshot command for some reason scroll when picture is taken. So picture doesn't contain the element.

There is video from testing...
https://images.dvanakoncisveta.cz/nav.spec.js.mp4

There is taken picture...
https://images.dvanakoncisveta.cz/actual.png

Desired behavior:

Screenshot the set element...

Steps to reproduce: (app code and test code)

I'm using cypress-plugin-snapshots plugin with default settings. But I havesame issue with cypress screenshot() too.
it('nav', () => { cy.get('nav').toMatchImage(); });

Working demo with this issue is here https://github.com/Workito/cypress-test-tiny

Versions

cypress: 3.8.0
cypress-plugin-snapshots: 1.2.9
npm: 6.7.0
node: 11.15.0
Browser: Electron 78 (headless) or Chrome 79 (same issue)
OS: MacOs 10.15.2 (19C57)

pkdriver ready for work screenshots 📸 bug

Source

Workito

Most helpful comment

@Workito I'm reopening this issue as this is a bug in Cypress. I've only given a temporary workaround but this should not be required to get the screenshots properly working.

jennifer-shehane on 23 Dec 2019

👍5

All 4 comments

Yeah, this is weird. I am not sure why it's doing this scroll behavior to capture an element that is already visible on the screen.

I narrowed it down from the original HTML to the example below. If you remove the scroll-behavior: smooth, the screenshot is taken correctly.

<html style="scroll-behavior: smooth;">
<body>
  <div style="height: 100px;"></div>
  <nav style="height: 60px; background-color: red;"></nav>
  <div style="height: 1000px;"></div>
</body>
</html>

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

The screenshot should take a screenshot of the element with background-color: red, but it takes a screenshot slightly below it.

Screenshot is completely white bg:

works (56)

Workaround

Disabled scroll-behavior: smooth in tests when taking screenshots as explained in these comments:

https://github.com/cypress-io/cypress/issues/3200#issuecomment-505965470
https://github.com/cypress-io/cypress/issues/3200#issuecomment-512228495

jennifer-shehane on 20 Dec 2019

Thank you! This fix the issue. 👍

Workito on 20 Dec 2019

@Workito I'm reopening this issue as this is a bug in Cypress. I've only given a temporary workaround but this should not be required to get the screenshots properly working.

jennifer-shehane on 23 Dec 2019

👍5

@jennifer-shehane any update on this since? I am seeing screenshots being chopped off when executing them in Chromium browser.