matchers

Update playwright.config.ts

e2e/global.d.ts

@@ -0,0 +1,15 @@
+export {};
+
+declare global {
+  namespace PlaywrightTest {
+    interface Matchers<R, T> {
+      toMatchDataSnapshot: (options?: { name?: string }) => R;
+      toMatchImageSnapshot: (options?: {
+        maxDiffPixelRatio?: number;
+        maxDiffPixels?: number;
+        name?: string | string[];
+        threshold?: number;
+      }) => R;
+    }
+  }
+}

e2e/matchers.ts

@@ -0,0 +1,43 @@
+import type { Expect } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+expect.extend({
+  toMatchDataSnapshot(received: object, options?: { name?: string }) {
+    try {
+      expect(JSON.stringify(received, null, 2)).toMatchSnapshot(options);
+      return {
+        message: () => 'passed',
+        pass: true,
+      };
+    } catch (err) {
+      return {
+        message: () => 'failed',
+        pass: false,
+      };
+    }
+  },
+  toMatchImageSnapshot(
+    received,
+    options: Parameters<ReturnType<Expect>['toMatchSnapshot']>[0]
+  ) {
+    let data = received;
+    if (typeof received === 'string' && received.startsWith('data:image')) {
+      const [type, content] = received
+        .replace(/^data:image\/([^;]+);([^,]+),(.+)/, '$2 $3')
+        .split(' ') as [BufferEncoding, string];
+      data = new Uint8Array(Buffer.from(content, type).buffer);
+    }
+    try {
+      expect(data).toMatchSnapshot(options);
+      return {
+        message: () => 'passed',
+        pass: true,
+      };
+    } catch (err) {
+      return {
+        message: () => 'failed',
+        pass: false,
+      };
+    }
+  },
+});

playwright.config.ts

@@ -1,6 +1,9 @@
 import type { PlaywrightTestConfig } from '@playwright/test';
 import { devices } from '@playwright/test';
 
+// extend `expect`
+import './e2e/matchers';
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */