Cypress: Full page screenshots with `scale: true` are not stitched together as expected, contains black borders / spacings
I'm trying to capture screenshots for various viewport sizes. At points during each test, I call a custom Cypress command, which loops over an array of viewport sizes to update the viewport and take the screenshot.
Cypress.Commands.add('responsiveScreenshots', function (customLabel) {
const { title } = this.test;
if (customLabel) {
title += ` - ${customLabel}`;
}
const sizes = [
{ w: 375, h: 667 },
{ w: 768, h: 1024 },
{ w: 1280, h: 800 }
];
cy.get('.notification-manager').invoke('css', 'position', 'absolute');
sizes.forEach((size) => {
const filename = `${title}/${size.w}x${size.h}`;
cy.viewport(size.w, size.h);
cy.screenshot(filename, {
scale: true,
capture: 'fullPage'
});
});
cy.get('.notification-manager').invoke('css', 'position', null);
});
Here is an example of the sort of screenshot I'm getting:
I'm expecting something more like this:
I haven't mocked up the notification so ignore that, but clearly something is wrong.
This happens in both headless and headed modes.
Bug?
I'm not sure if this is the correct approach to this problem. I will be using these screenshots for visual regression testing, so they need to look correct.
tomturton
All 4 comments
I can confirm, we get the same when doing this.
imprashast
on 21 Sep 2018
Fix this already!!!
mikila85
on 12 Dec 2019
I managed to fix it by removing the scale option, so cy.screenshot('testFullScreen', { capture: 'fullPage' }); works perfectly with me
0xIslamTaha
on 15 Apr 2020
I can reproduce this with the code below. Removing the scale: true option fixes the issue.
Reproducible Example
<html>
<body>
<div style="background: linear-gradient(yellow, blue, red); height: 1000px; width: 400px">foo</div>
</body>
</html>
it('Take screenshot', () => {
cy.visit('index.html')
cy.screenshot({
scale: true,
})
})
Expected Screenshot
Actual Screenshot
jennifer-shehane
on 14 Jul 2020
Related issues
egucciar
路
3Comments
igorpavlov
路
3Comments
SecondFlight
路
3Comments
dkreft
路
3Comments
zbigniewkalinowski
路
3Comments
Most helpful comment
I can confirm, we get the same when doing this.