Test failing because of images sizes are not same

[Anuradha4dm]

when the test is running in different monitors , passing only the monitor that base image is taken. I have taken the initial image (base image) in a large screen and when i try to run the test in smaller screen then the error pop up

this is the configuration

addMatchImageSnapshotCommand({ failureThreshold: 0.01, //threshold for entire image failureThresholdType: 'percent', //percent of image or number of pixels customDiffConfig: { threshold: 0.1 }, //threshold for each pixel capture: 'viewport', //capture viewport in screenshot allowSizeMismatch:true });

this is the error message

[Vishwaas]

even with viewport this issue exists, I believe the issue is already raised

[hassanzohaib]

There is no solution for this. You have to use the same docker container everytime to get the same size images.

[Vishwaas]

wouldnt that make testing extremely difficult

[leonid-sviderskii-mtl]

Free screenshot comparison cannot be easy :) Here, Gleb was explaining the things related to the question.

[sirganya]

I managed to get cypress to work on macOS where it produces the same screenshots in the runner and e2e-headless.

I haven't tested in CI yet.

When you run cypress for e2e be sure to use the browser chrome flag in a before browser launch event.

./node_modules/.bin/cypress run --browser chrome

and then add these chrome flags to plugins/index.js

 on("before:browser:launch", (browser, launchOptions) => {
      console.log("launching browser %s is headless? %s",
        browser.name,
        browser.isHeadless
      );

    if (browser.name !== "chrome") throw new Error("Must use Chrome");

    launchOptions.args.push("--force-device-scale-factor=1");
    launchOptions.args.push("--disable-gpu");
    launchOptions.args.push("--force-color-profile=srgb");

    // IMPORTANT: return the updated browser launch options
    return launchOptions;
  });