Taken screenshots are not the size I configured

[uhlstefa]

Hi, when using headed mode (cypress open) the screenshots have a different size than I've configured.

I want to have my screens taken in size 800x600, but they always get taken with 880x660. Why is that so?

I've set:

viewportWidth: 800,
viewportHeight: 600

in the cypress.config.js

I've also set up browser options:

`on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--window-size=800,600')
      launchOptions.args.push('--force-device-scale-factor=1')
    }
    if (browser.name === 'electron') {
      launchOptions.preferences.width = 800
      launchOptions.preferences.height = 600
    }

    if (browser.name === 'firefox') {
      launchOptions.args.push('--width=800')
      launchOptions.args.push('--height=600')
    }
    return launchOptions
  })`

But still the size is wrong.

What causes this and how can I fix this? The whole plugin is useless if it takes screenshots not in the configured size.

package.json dependencies: "devDependencies": { "cypress": "13.5.0", "cypress-grep": "^3.0.4", "cypress-iframe": "^1.0.1", "cypress-image-diff": "^2.0.0", "cypress-image-diff-js": "^1.32.0", "cypress-mochawesome-reporter": "^3.2.3", "mochawesome": "^7.1.3"

[tamasmagyar]

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.

[uhlstefa]

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

[tamasmagyar]

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

[tamasmagyar]

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 cypress@13.6.0 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?

[tryptophane]

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.

[github-actions[bot]]

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

[ElSuture]

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');
  }
}

[tryptophane]

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...

[github-actions[bot]]

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

[github-actions[bot]]

This issue was closed because it has been inactive for 30 days since being marked as stale.