Answer

Understanding Visual Test Failures in @playwright/test

If you're wondering why your visual test fails due to a 1px difference even when maxDiffPixels is set to 1.01, it's because maxDiffPixels specifies the acceptable amount of pixels that could be different between compared images. However, maxDiffPixels doesn't support decimal values. It expects an integer value representing the maximum number of pixels that can differ between images.

// Incorrect usage of maxDiffPixels
const config = {
  maxDiffPixels: 1.01
};

Also, consider the threshold for color difference, determined by the threshold option. This represents an acceptable perceived color difference in the YIQ color space between corresponding pixels in compared images. The default value for threshold is 0.2 unless configured differently with TestConfig.expect.

// Correct usage of maxDiffPixels and threshold
const config = {
  maxDiffPixels: 1,
  threshold: 0.2
};

Remember, other factors can contribute to visual test failures apart from just pixel differences and color thresholds. These could include variations in rendering across different devices or environments, dynamic content changes on web pages, or even issues with capturing screenshots accurately.

So, when configuring visual tests with Playwright's snapshot assertions and TestConfig options like maxDiffPixels, consider not only pixel differences but also factors like color thresholds and other potential sources of variation that may affect image comparison results.