Are there any way to force plugin to make screenshots of the same size in headed/headless browsers?

[viktorgogulenko]

Hi,
I'm really struggling right now to make a baseline screenshots which will work for headed Chrome browser and headless (while running on Docker container or during "cypress run --browser=chrome") as sizes of taken screenshots are different. I've tried to set a viewport globally and as matchImage({ screenshotConfig: { capture: 'viewport' } }) plus

if (browser.name === 'chrome') {
  launchOptions.args.push('--force-device-scale-factor=1');
}

but tests are still failing due to size mismatch if I'm running them on different environment (Docker container, cypress run...., cypress open.
Maybe there is some recipe which someone used to make screenshots in that way that they will have the same size everywhere? Thanks a lot in advance!

[FRSgit]

Hello again @viktorgogulenko,

There are 3 (ish) solutions to this problem:

• First of all, this plugin tried to scale the images based on your devicePixelDensity (if it can be properly obtained, of course) - maybe consider filing a bug report with reproduction scenario (I recommend starting off the example directory),
• Your can try to always force the same window size: Taking screenshots during cypress open versus cypress run result in different screenshot sizes cypress-io/cypress#3324 (comment),
• and the 3rd(ish) solution - do not make screenshots in headed mode - see official cypress guidelines about that. In my projects I specify different imageDir path for headed run. So, the screenshots made in headless mode are compared with others done in headless mode and ones made in headed mode are compared only with other made in headed mode.

[viktorgogulenko]

Thanks @FRSgit! So you are rewriting path where screenshots supposed to be saved based on statement:
if (browser.name === 'chrome' && browser.isHeaded)? Am I right? Could you please share some snippet how did you implement that? Thanks a lot in advance!

[FRSgit]

No, this plugin allows you to change the directory images are stored in by simply passing --env \"pluginVisualRegressionImagesDir=IMAGES_DIRECTORY\"" flag to the cypress open 🎉 😄
Have a look at the example here https://github.com/FRSOURCE/cypress-plugin-visual-regression-diff/blob/main/example/package.json#L8