Seemingly random size of screenshot for component tests

[gigaSproule]

Current behavior

When running component tests, I am seeing a random behaviour whereby the screenshot produced of the component sometimes is of the whole component perfectly, sometimes has padding on the right and sometimes has part of the component chopped off on the right. The components are fairly basic and don't have any animations/transitions nor any updates post render.

The component is using MUI, so an example test looks like the below:

cy.mount(
  <ThemeProvider>
    <Button isDisabled>Label text</Button>
  </ThemeProvider>
);
cy.get("button").matchImage();

I've tried setting the viewport to defined size (rather than allowing a default) and I've tried setting the window size as well, but I still see the same issue.

Desired behavior

I would expect Cypress to reliably capture just the whole component. I understand that there will always be the potential for minor differences between browsers/OS, but no in what the screenshot is capturing.

Test code to reproduce

It's not consistent, but an example test is:

cy.mount(
  <ThemeProvider>
    <Button isDisabled>Label text</Button>
  </ThemeProvider>
);
cy.get("button").matchImage();

Cypress Version

13.2.0

Node version

v18.17.1

Operating System

Mac OS 13.5.2, Debian bullseye (via official docker image)

Debug Logs

No response

Other

No response

[nagash77]

In order to give our engineers the best chance at recreating your problem, please create a reproducible example using a fork of Cypress Test Tiny. This gives us the best chance of seeing exactly what you are seeing and being able to investigate effectively.

[gigaSproule]

I've tried the best that I can, but I can't seem to re-create it with the repo you asked me to clone. It kind of makes me think that there is something more to what we are doing, but I can't for the life of me see what is going on. I see that Cypress has been updated since, so I'll try upgrading Cypress and see if that has inadvertently fixed it.

[gigaSproule]

I think I found the culprit. The plugin I was using for image comparison uses the built-in cypress screenshot functionality, so I thought it was an issue here, but I noticed that after taking the screenshot, it tries to match the image sizes (to deal with comparing images from high DPI screens and normal screens), but I think that's what is causing the image to be 1 pixel shorter.

I've switched the library that I'm using, so I'll close this. If it appears again, then I know it's not the resizing that is the issue.