[Bug]: cyprress 13 screenshot size differ on cypress run and cypress open

[4knort]

Describe the Bug

If we use matchImage we get different screenshots on cypress run and cypress open
https://clip2net.com/s/4jl5O81

Steps to reproduce

1. create any tests
2. use cy.matchImage()
3. run command cypress open and run the test
4. run command cypress run and run the tests
5. We get different screenshots

Expected behavior

We expect same screenshot on cypress run andcypress open

Additional context

No response

Package version

3.3.10

Device

PC

OS and version

Windows 11

Browser and version

chrome

Node version

18.17.0

I can work on it by myself

• Yes
• No

Code of Conduct

• I agree to follow this project's Code of Conduct

[mduivcap]

We have a very similar issue, where we make a screenshot of the footer HTML element. But suddenly it's only 1 pixel high (even when I first perform a cy.wait(10000); to make sure there was no load/timing issue.
And some screenshots we took before that showed content, are now showing one big grey area instead. And it's correct that sometimes the element we select does not contain data, but the elements within that element do. So I'm still expecting to see a screenshot with content in it instead of 1 pixel of a grey block.

edit1: I don't face this issue with all elements, so it's a really weird issue. But because of this, I'm looking into a different solution/plugin now because it does not matter that I try with the footer element (or elements within that element), it only makes a screenshot of 1 pixel high.

[mlnarik]

I have the same issue, it generates different dimensions when i use cypress run, it doesnt use set viewport values for run

[gigaSproule]

I've seen this also, but not to this degree. I've only seen it be a little wider, never a height issue. But I think my issue is down to the screen pixel density causing the images to not be the same and therefore it gets resized (https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/blob/43de1f74e2be482cfe267d008e74c269e87bcf3a/packages/cypress-plugin-visual-regression-diff/src/image.utils.ts#L80C21-L80C21).

Edit: Turns out my issue has nothing to do with this plugin and is an issue with Cypress (or at least our app and Cypress).

[SuperSchek]

+1

Experiencing the same issue. Setting the viewport with cy.viewport('macbook-16') resulted in the following screenshot resolutions for me:

• cypress open
  • 1536px x 960px
• cypress run
  • 1280px x 591px

I tried various browsers (mainly Chrome, Edge and Electron) but that did not seem to have any impact.

[astrodomas]

try adding in your setupNodeEvents:

export const handleCypressWindowSize = (on: Cypress.PluginEvents) => {
  // Makes the window of size - desktop.
  // NOTE: cy.screenshot() - screenshots the window, not the viewport.
  // taken from https://github.com/cypress-io/cypress/issues/3324#issuecomment-613781863
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'electron') {
      launchOptions.preferences['width'] = 1440;
      launchOptions.preferences['height'] = 1024;
      return launchOptions;
    }
  });
};

The problem is Cypress window size, not the screenshot.

[mduivcap]

Quick update on what I mentioned earlier, This is actually not an issue of this plugin, but of the Cypress .screenshot() function issue. See: cypress-io/cypress#28674
If this is totally unrelated to the topic of this issue, than please delete my post. But I thought it would be good to mention it for other people that search on this particular issue.

We have a very similar issue, where we make a screenshot of the footer HTML element. But suddenly it's only 1 pixel high (even when I first perform a cy.wait(10000); to make sure there was no load/timing issue. And some screenshots we took before that showed content, are now showing one big grey area instead. And it's correct that sometimes the element we select does not contain data, but the elements within that element do. So I'm still expecting to see a screenshot with content in it instead of 1 pixel of a grey block.

edit1: I don't face this issue with all elements, so it's a really weird issue. But because of this, I'm looking into a different solution/plugin now because it does not matter that I try with the footer element (or elements within that element), it only makes a screenshot of 1 pixel high.