Normalize screen pixel densities

[jkjustjoshing]

When I collect snapshots using cypress run, the screenshots collected are collected at a default pixel density. However, when I collect snapshots using cypress open on my MacBook, the screenshots collected are at double pixel density.

Is there a way to standardize this? Otherwise, when I run my tests using cypress open they always fail because the comparison images are twice as wide as the baseline images that were generated with cypress run.

[Lyokolux]

I am looking for this too because we are using MacBooks at my company but I would integrate it in the CI too.

[Lyokolux]

Here is a visual regression plugin that does it with the resizeDevicePixelRatio key in the configuration: https://github.com/meinaart/cypress-plugin-snapshots#make-changes-to-default-configuration

[nmkataoka]

Thanks @Lyokolux , the logic there is pretty simple: https://github.com/meinaart/cypress-plugin-snapshots/blob/master/src/tasks/matchImageSnapshot.js#L32. I'll try it out.

[BatyrSeven]

You can set scale factor for Chrome in launch options:

// cypress.config.js
setupNodeEvents(on, config) {
  getCompareSnapshotsPlugin(on, config)
  
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      // force screen to be non-retina
      launchOptions.args.push('--force-device-scale-factor=1')
    }

    return launchOptions
  })
}

[Lyokolux]

You can set scale factor for Chrome in launch options:

// cypress.config.js
setupNodeEvents(on, config) {
  getCompareSnapshotsPlugin(on, config)
  
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      // force screen to be non-retina
      launchOptions.args.push('--force-device-scale-factor=1')
    }

    return launchOptions
  })
}

This is great workaround, but it does not provide a solution for every browsers. I checked for Firefox and didn't find a solution. Maybe we can add this workaround on the README after the warning though: it is possible, but only on chrome.

[yuyan68]

I am facing the same issue. Set scale factor for Chrome in launch option doesn't work well for me. Force resolution size following create double size (2000*1320) when I do cypress open and cypress run.

{
  "viewportWidth": 1000, // Default value: 1280
  "viewportHeight": 660 // Default value: 720
}

When I run in CI I can get correct resolution (1000*660). Does anyone figure out a good solution? I am hoping there could be some optional parameters we can set for screenshot size e.g. { capture: "viewport" } in this plugin.

[admapop]

You can set scale factor for Chrome in launch options:

// cypress.config.js
setupNodeEvents(on, config) {
  getCompareSnapshotsPlugin(on, config)
  
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      // force screen to be non-retina
      launchOptions.args.push('--force-device-scale-factor=1')
    }

    return launchOptions
  })
}

Really good workaround, it's worked in my case! Thanks!