[28] Fix flaky Playwright image snapshot tests (#29)

* use maxDiffPixelRatio
* not needed in base playwright, follow pattern of augmentation

Author: TomStrepsil

examples/serve/docs/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.5] - 2025-07-14
+
+### Fixed
+
+- set playwright image snapshot [max pixel difference ratio](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1-option-max-diff-pixel-ratio) to 0.05, to mitigate flaky false-negatives with Linux Chromium updates
+- removed false negatives when tests are run on event days
+
 ## [0.2.4] - 2025-05-16
 
 ### Fixed

examples/serve/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-toggle-point-serve-example",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "type": "module",
   "private": true,
   "scripts": {

examples/serve/playwright.config.ts

@@ -3,6 +3,11 @@ import baseConfig from "../../test/automation/base.config";
 
 const config: PlaywrightTestConfig = {
   ...baseConfig,
+  expect:{
+    toMatchSnapshot: {
+      maxDiffPixelRatio: 0.05
+    }
+  },
   testDir: "./src/fixtures",
   use: {
     baseURL: "http://localhost:3001/"

examples/serve/src/fixtures/event/playwright.spec.ts

@@ -3,6 +3,7 @@ import { test, expect } from "@playwright/test";
 test.describe("date-specific content", () => {
   test.describe("when visiting on an un-toggled date", () => {
     test("it shows the control content", async ({ page }) => {
+      await page.clock.setFixedTime(new Date(Date.UTC(2025, 1, 1)));
       await page.goto("/");
       expect(
         await page.getByText("Some event-themed content").screenshot()