Taken screenshots are not the size I configured about cypress-image-diff HOT 10 OPEN

I am facing exactly the same problem as the OP, running cypress 12.17.4 and cypress-image-diff-js1.32.0.
I have set

viewportWidth: 1280,
viewportHeight: 960

In headless mode, the screenshots have the correct size, but in headed mode (cypress open with electron), I get a size of 1414x1060 for a screenshot of the complete viewport.

I could narrow the problem down to desktop scaling in windows. As I have a HiDPI monitor, I configured a scale factor of 110% for my desktop. If I reset the scaling to 100%, then the screenshots have the correct size.

I hope this information is helpful to you.

from cypress-image-diff.

Hi @uhlstefa

Did you install the correct package? I see you referencing it as a dependency like
"cypress-image-diff": "^2.0.0" which is NOT this plugin.

Our latest version is 1.32.0 and you can install it by npm i -D cypress-image-diff-js. Make sure add "js" at the end of the package name.

from cypress-image-diff.

I removed the not necessary package. don't know why i had installed it.
Anyway, the issue remains.
But seems it is cause of this:
https://www.cypress.io/blog/2021/03/01/generate-high-resolution-videos-and-screenshots

from cypress-image-diff.

We recommend running tests in docker (headless) to avoid compatibility issues.

from cypress-image-diff.

I saw some issues with screen resolution today. I will try to investigate it further this week. @uhlstefa

Even though I was running the tests in docker. The captured screenshot resolution was different.

Quick findings:

• I set resolution to 1920x1080
• With [email protected] version the screenshots were captured as 1920x951
• With cypress@^12.0.0 version the screenshots were captured as 1920x1080 as expected

In the meantime, can you check if your issue persist with version 12.8.0?

from cypress-image-diff.

This issue is stale because it has been open for 30 days with no activity.

from cypress-image-diff.

I had the same problem here and was able to workaround it with an environment variable for Windows cmd and powershell:

For Electron:

cmd.exe:
set ELECTRON_EXTRA_LAUNCH_ARGS=force-device-scale-factor=1
powershell:
$env:ELECTRON_EXTRA_LAUNCH_ARGS='force-device-scale-factor=1'

see https://docs.cypress.io/api/plugins/browser-launch-api#Modify-Electron-app-switches

And for Edge it works as an option as in the first post above:

on('before:browser:launch', (browser = {}, launchOptions) => {

  [...]

  if (browser.name === 'edge') {
    launchOptions.args.push('--force-device-scale-factor=1');
  }
}

from cypress-image-diff.

Thank you @ElSuture , this is a very helpful advice! I tested it for Electron, and it works.

For me, it now needs the combination of 2 measures to capture screenshots with the correct size in the cypress gui, independently from the scaling I set up for my windows desktop:

• Setting the environment variable like @ElSuture explained it
• Running the Cypress GUI in fullscreen mode

If I run the Cypress GUI in windowed mode, then the screenshots are still taken at a lower resolution than configured.

From my understanding, the need for both measures is independent from the plugin implementation, and maybe could be circumvented by the devs of the Cypress GUI. So in my opinion, this bug can be closed, but it would be nice to have both measures documented somewhere...

from cypress-image-diff.