tests(): Start moving visual tests to playwright (#9481)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- tests(): Start moving visual tests to playwrigth [#9481](https://github.com/fabricjs/fabric.js/pull/9481)
 - fix(filters): Fix bugs in Pixelate and Blur filter [#9962](https://github.com/fabricjs/fabric.js/pull/9962)
 - docs(): update README.md [#9957](https://github.com/fabricjs/fabric.js/pull/9957)
 

e2e/tests/test.ts

@@ -8,7 +8,10 @@ import * as fabric from 'fabric';
 
 const canvasMap = (window.canvasMap = new Map<HTMLCanvasElement, Canvas>());
 const objectMap = (window.objectMap = new Map<string, FabricObject>());
-
+const renderingTestMap = (window.renderingTestMap = new Map<
+  string,
+  () => void
+>());
 type AsyncReturnValue<T> = T | Promise<T>;
 
 const setupTasks: Promise<void>[] = [];
@@ -53,6 +56,26 @@ export function before(
   setupTasks.push(task);
 }
 
+export async function beforeRenderTest(
+  cb: (
+    canvas: Canvas
+  ) => AsyncReturnValue<{ title: string; boundFunction: () => void }[]>,
+  options
+) {
+  const el = document.querySelector<HTMLCanvasElement>('#canvas');
+  const canvas = new Canvas(el, options);
+  // cb has to bind the rendering test to the specific canvas and add a clear before the test
+  const renderingTests = await cb(canvas);
+  renderingTests.forEach((renderTest) => {
+    if (renderingTestMap.has(renderTest.title)) {
+      throw new Error(
+        `test identifiers must be unique: ${renderTest.title} is already defined`
+      );
+    }
+    renderingTestMap.set(renderTest.title, renderTest.boundFunction);
+  });
+}
+
 /**
  * Call this method **once** to initialize the default canvas
  *

e2e/tests/visual-output/rendering/index.spec.ts

@@ -0,0 +1,52 @@
+import { expect, test } from '@playwright/test';
+import setup from '../../../setup';
+import { CanvasUtil } from '../../../utils/CanvasUtil';
+import { TestingCanvas } from '../../../utils/createNodeSnapshot';
+import { renderTests } from './renderingCases';
+import * as fabric from 'fabric/node';
+
+setup();
+
+test('VISUAL RENDERING TESTS', async ({ page }, config) => {
+  for (const testCase of renderTests) {
+    if (testCase.disabled !== 'browser') {
+      await test.step(`browser - ${testCase.title}`, async () => {
+        // enable and disable this inside the loop
+        config.config.updateSnapshots = 'missing';
+        await page.evaluate(
+          (testTitle) => renderingTestMap.get(testTitle)(),
+          testCase.title
+        );
+        expect(
+          await new CanvasUtil(page).screenshot(),
+          `browser snapshot`
+        ).toMatchSnapshot({
+          name: testCase.golden || `${testCase.title}.png`,
+          maxDiffPixelRatio: testCase.percentage,
+        });
+      });
+    }
+    if (testCase.disabled !== 'node') {
+      await test.step(`node - ${testCase.title}`, async () => {
+        // we want the browser snapshot of a test to be committed and not the node snapshot
+        config.config.updateSnapshots = 'none';
+        const canvas = new TestingCanvas(null, {
+          enableRetinaScaling: false,
+          renderOnAddRemove: false,
+          width: testCase.size[0],
+          height: testCase.size[1],
+        });
+        await testCase.renderFunction(canvas, fabric);
+        canvas.renderAll();
+        const buffer = await canvas.getNodeCanvas().toBuffer();
+        expect(
+          buffer,
+          `node snapshot should match browser snapshot`
+        ).toMatchSnapshot({
+          name: testCase.golden || `${testCase.title}.png`,
+          maxDiffPixelRatio: testCase.percentage,
+        });
+      });
+    }
+  }
+});

e2e/tests/visual-output/rendering/index.ts

@@ -0,0 +1,29 @@
+/**
+ * Runs in the **BROWSER**
+ */
+
+import * as fabric from 'fabric';
+import { renderTests } from './renderingCases';
+import { beforeRenderTest } from '../../test';
+
+beforeRenderTest(
+  (canvas) => {
+    const boundTests = renderTests.map((renderTest) => {
+      return {
+        boundFunction: async () => {
+          canvas.clear();
+          canvas.setDimensions({
+            width: renderTest.size[0],
+            height: renderTest.size[1],
+          });
+          await renderTest.renderFunction(canvas, fabric);
+        },
+        title: renderTest.title,
+      };
+    });
+    return boundTests;
+  },
+  {
+    enableRetinaScaling: false,
+  }
+);