[BUG] Different color shades of screenshots taken from different displays

I’m trying to use puppeteer for visual regression testing. When I do page.screenshot output images differ (in shades of colors) on different displays (MBP built-in display vs Dell monitor display). Am I missing some option?

[8eecf0d2]

Have you tried the Chromium flag --force-color-profile=srgb|generic-rgb|color-spin-gamma24?

[cmcculloh-kr]

I’m having the same issue. It looks like Chrome has changed the way they render colors.

Chrome is now following the “color rendering profile” of the device. This makes Puppeteer much less useful for visual regression testing if you are running the tests on two different machines (which I believe most people are). For instance, generating the initial screenshots on my local machine and then having my CI server (Heroku or TravisCI) run my tests on every PR is much less effective because the CI server has either no display, or a much poorer quality display than my Retina Macbook display, so I get a lot of false positives and my tests fail.

The way I’ve addressed this is by having different thresholds for my CI server than I have for local development, eg:

const threshold = isLocal ? 0 : 0.1;
const failureThreshold = isLocal ? 0 : 0.01;

export const commonSnapshotConfig = {
	customDiffConfig: { threshold },
	failureThreshold
};

This is sub-optimal to say the least. It would be great if there was a way to tell Puppeteer to pass a flag or something when it opens Chrome to force a color profile (either a default that lives in Puppeteer, or one that you provide).