Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Full page screenshots with scale: true are not stitched together as expected, contains black borders / spacings #2348

Open
tomturton opened this issue Aug 15, 2018 · 6 comments
Open

Full page screenshots with scale: true are not stitched together as expected, contains black borders / spacings #2348

tomturton opened this issue Aug 15, 2018 · 6 comments
Labels
E2E Issue related to end-to-end testing topic: screenshots 📸 Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. type: bug

Comments

@tomturton
Copy link

tomturton commented Aug 15, 2018 •
edited
Loading

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:

incorrect

I'm expecting something more like this:

correct

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 tomturton changed the title Full page screenshots are not rendering correctly Full page screenshots are not rendering as expected Aug 15, 2018
@jennifer-shehane jennifer-shehane added the stage: needs investigating Someone from Cypress needs to look at this label Aug 15, 2018
@imprashast
Copy link

I can confirm, we get the same when doing this.

This was referenced May 27, 2019
Closed
Closed
@jennifer-shehane jennifer-shehane mentioned this issue Dec 6, 2019
Closed
@mikila85
Copy link

Fix this already!!!

@0xIslamTaha
Copy link

0xIslamTaha commented Apr 15, 2020 •
edited
Loading

I managed to fix it by removing the scale option, so cy.screenshot('testFullScreen', { capture: 'fullPage' }); works perfectly with me

@jennifer-shehane
Copy link
Member

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

Take screenshot (1)

Actual Screenshot

Take screenshot

@cypress-bot cypress-bot bot added stage: ready for work The issue is reproducible and in scope and removed stage: needs investigating Someone from Cypress needs to look at this labels Jul 14, 2020
@jennifer-shehane jennifer-shehane changed the title Full page screenshots are not rendering as expected Full page screenshots with scale: true are not stitched together as expected, contains black borders / spacings Jul 14, 2020
@cypress-app-bot
Copy link
Collaborator

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

@cypress-app-bot cypress-app-bot added the stale no activity on this issue for a long period label May 18, 2023
@mikila85
Copy link

For anyone that is looking for a solution, been years now and nothing.. we found a better tool called puppeteer but we are using a wrapper called playwright which gives a full solution on top of puppeteer... X4 times faster than cypress.. and none of these nonsense bugs which never get fixed.

@nagash77 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: ready for work The issue is reproducible and in scope stale no activity on this issue for a long period labels May 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
E2E Issue related to end-to-end testing topic: screenshots 📸 Triaged Issue has been routed to backlog. This is not a commitment to have it prioritized by the team. type: bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@nagash77 @chrisbreiding @jennifer-shehane @tomturton @mikila85 @0xIslamTaha @imprashast @cypress-app-bot