jennifer-shehane
commented
4 years ago 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:
Workaround
Disabled scroll-behavior: smooth in tests when taking screenshots as explained in these comments:
Workito
azaeng04
lukesdm
virginiacini
cypress-app-bot
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-snapshotsplugin 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)