test(integration): blur screenshots before comparison

I've spent quite a while trying various options to reduce the number of failures due to
antialiasing differences, without success. This takes a bit more of an extreme option to blur the
screenshot slightly to try and normalise it. The goal of the test isn't pixel-precision, so this
should be ok.

Ideally, this will be a feature in Playwright (so the reference image doesn't have to be blurred
too).

Refs #388, microsoft/playwright#7548

integration/Dockerfile

@@ -10,7 +10,7 @@ COPY \
   ./
 
 RUN \
-  npm ci \
+  npm ci --production \
   && npm cache clean --force
 
 ENTRYPOINT ["wait-for-it", "prereview:3000", "--strict", "--"]

integration/package.json

@@ -1,6 +1,12 @@
 {
   "private": true,
   "dependencies": {
-    "@playwright/test": "^1.13.0"
+    "@playwright/test": "^1.13.0",
+    "glur": "^1.1.2",
+    "pngjs": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/glur": "^1.1.1",
+    "@types/pngjs": "^6.0.1"
   }
 }

integration/src/home.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { blur } from './utils';
 
 test.describe('homepage', () => {
   test('looks correct', async ({ page }) => {
@@ -11,7 +12,7 @@ test.describe('homepage', () => {
     const carouselControls = await page.$$('.slick-dots :text("1")');
     await Promise.all(carouselControls.map(controls => controls.click()));
 
-    const screenshot = await page.screenshot({ fullPage: true });
+    const screenshot = await page.screenshot({ fullPage: true }).then(blur);
 
     expect(screenshot).toMatchSnapshot('home.png');
   });

integration/src/utils.ts

@@ -0,0 +1,10 @@
+import glur from 'glur';
+import { PNG } from 'pngjs';
+
+export function blur(image: Buffer): Buffer {
+  const png = PNG.sync.read(image);
+
+  glur(png.data, png.width, png.height, 5);
+
+  return PNG.sync.write(png, { filterType: 4 });
+}