Screenshots taken with different size than viewport about cypress-image-diff HOT 4 CLOSED

instead of looking for viewport from cypress config, we look at environment variables:

I.E use these in your terminal...
export HEIGHT= 900
export WIDTH= 1440

This could be improved to look at the cypress config though, so I will leave this issue opened.

from cypress-image-diff.

This topic is interesting. I have the same problem but when I changed the scale on my 4K monitor from 175% to 100% all works perfectly...

Edit.

I Fix this issue by --force-device-scale-factor=1 option, check: https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless

const getCompareSnapshotsPlugin = require('cypress-image-diff-js/dist/plugin');

module.exports = (on, config) => {
  getCompareSnapshotsPlugin(on, config);

  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chromium') {
      newArgs.push('--force-device-scale-factor=1');

      return { ...args, args: newArgs };
    }
  });
};

from cypress-image-diff.

I have tried to force viewport as here https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless but it has only worked with environment variable as commented.

from cypress-image-diff.

🎉 This issue has been resolved in version 1.18.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from cypress-image-diff.