Why the same page gives different Playwright screenshots: five sources, each measured
A visual test that fails once in ten runs is usually blamed on "the browser being flaky". I wanted to know which parts of a page actually change the pixels, so I took the same page over and over and counted differing pixels while switching one suspect at a time. Short version, from one machine: A live clock, a running CSS animation and a screenshot taken mid-transition each produced different…
A visual test that sometimes fails randomly is often attributed to browsers being unreliable. To determine which elements of a webpage actually cause pixel differences, a series of tests were conducted using the same page multiple times, each time changing a single suspect factor. On one machine, a live clock, a running CSS animation, and a screenshot taken during a transition all produced different PNG images from the same page.
A blinking text caret changed five pixels, but only based on timing. Re-launching the browser, using a fresh headless mode, the --disable-gpu flag, and disabling LCD text rendering also did not change the results. The setup used Linux 6.8, AMD EPYC VM, Node v24.22.2, and Playwright 1.63.0 with Chromium 153.0.8010.12 in headless mode.
The web pages were served from 127.0.0.1. Differences were measured using pixelmatch at a threshold of 0, meaning any change in any color channel would be considered a difference. The test page included a timestamp, an infinite pulsing animation, a 400ms transition that started after loading, and a focused input field.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
This story
This is one outlet's version. Read the fullest account.
