Deterministic screenshotting for automated visual regression testing

Anyone have any advice for more consistent screenshots across crawls?

I am currently passing the following flags to chromium

'--disable-infobars',
'--hide-scrollbars',
'--disable-gpu',
'--disable-webgl',
'--disable-extensions',
'--disable-accelerated-2d-canvas',
'--disable-accelerated-jpeg-decoding',
'--disable-accelerated-mjpeg-decode',
'--disable-accelerated-video-decode',
'--disable-software-rasterizer',
'--disable-notifications',
'--disable-background-networking',
'--disable-background-timer-throttling',
'--disable-dev-shm-usage',
'--font-render-hinting=none',
// '--font-render-hinting=medium',
'--deterministic-mode',
'--force-device-scale-factor=1',
"--disable-partial-raster",
"--force-color-profile=generic-rgb",
'--disable-skia-runtime-opts',
'--disable-lcd-text',
'--disable-font-subpixel-positioning',

Also, I inject the following styles before screenshotting

await page.addStyleTag({content:

* {
                      -webkit-transition: none !important;
                    -moz-transition: none !important;
                    -o-transition: none !important;
                    transition: none !important;
                    -webkit-animation: none !important;
                    -moz-animation: none !important;
                    -o-animation: none !important;
                    animation: none !important;
                    text-rendering: geometricprecision !important;
                    -webkit-font-smoothing: antialiased;
                    }

* {
                      -webkit-transition: none !important;
                    -moz-transition: none !important;
                    -o-transition: none !important;
                    transition: none !important;
                    -webkit-animation: none !important;
                    -moz-animation: none !important;
                    -o-animation: none !important;
                    animation: none !important;
                    text-rendering: geometricprecision !important;
                    -webkit-font-smoothing: antialiased;
                    }

});

worthy-azureOP•11/18/23, 5:48 PM

I also wait for fonts to be completely loaded

await page.evaluateHandle('document.fonts.ready');

Is there anything I am missing? I plan on containerizing the snapshotter too for consistency between OS's

Pepa J•11/20/23, 10:55 AM

Hi @bobw , I am sorry but from your description I cannot understand what issues regarding "consistency" of the screenshots are you currently dealing with. Can you describe little bit more and maybe even attach some examples?

worthy-azureOP•11/25/23, 6:24 PM

Thanks for your response. What was happening was I just wasn't waiting for the page to finish loading completely before screenshotting. Now i wait for the physical dimensions of the HTML document to stop updating before i take a screenshot. Also, there were issues with antialiasing of text being slightly different on each screenshot, I believe but after putting '--font-render-hinting=none' that behavior is gone.

Pepa J•11/26/23, 12:50 PM

I believe this always depends on website. Generally something like should be fine, but there always could be some component like carousel with dynamic loading content etc. that may be generating requests and manipulating DOM every now and then.