Normalize screen pixel densities about cypress-image-diff HOT 7 CLOSED

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

from cypress-image-diff.

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.

from cypress-image-diff.

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.

from cypress-image-diff.

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

from cypress-image-diff.

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

from cypress-image-diff.

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.

from cypress-image-diff.

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!

from cypress-image-diff.