Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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)

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

6reactions
jennifer-shehanecommented, Dec 23, 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.

1reaction
jennifer-shehanecommented, Dec 20, 2019

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:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Scroll behaviour VueJS not working properly - Stack Overflow
scrollBehavior happens at the same time. The anchor is not found, so no scrolling; Transition is over, <router-view> correctly mounted/rendered.
Read more >
Smooth Scrolling | CSS-Tricks
Here's the code to perform a smooth page scroll to an anchor on the same page. It has some logic built in to...
Read more >
CSSOM View Module - W3C
behavior is "auto" and element is not null and its computed value of the scroll-behavior property is smooth; behavior is smooth.
Read more >
How to Implement Smooth Scrolling With CSS & JavaScript
As soon as we give scroll-behavior: smooth to the html element, the magic will happen, and we'll be able to navigate to the...
Read more >
Determining the Scrollable Element to get a Full Page ...
Sometimes, when attempting to capture a full-page screenshot, the webpage does not scroll down, and only the visible viewport is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

Cypress performance degrades to the point of failure in Chrome 79 on Ubuntu

Next page

Cypress.env() state is not reset on rerun of test