From d38bd971fe1d40f35603fe0a8d508416894d4735 Mon Sep 17 00:00:00 2001
From: Alfie Jones <alfie.jones@hotmail.co.uk>
Date: Tue, 21 May 2024 12:16:39 +0100
Subject: [PATCH] Enabling canvas recording and inlining images

---
 .changeset/hip-bananas-taste.md         |  8 ++++++++
 integrations/cypress/src/snapshot.ts    |  5 ++++-
 integrations/playwright/src/snapshot.ts | 11 ++++++++---
 integrations/puppeteer/src/snapshot.ts  | 12 +++++++++---
 4 files changed, 29 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/hip-bananas-taste.md

diff --git a/.changeset/hip-bananas-taste.md b/.changeset/hip-bananas-taste.md
new file mode 100644
index 00000000..2afc43d4
--- /dev/null
+++ b/.changeset/hip-bananas-taste.md
@@ -0,0 +1,8 @@
+---
+"@pixeleye/playwright": patch
+"@pixeleye/puppeteer": patch
+"@pixeleye/storybook": patch
+"@pixeleye/cypress": patch
+---
+
+Enabling canvas recording and inlining images
diff --git a/integrations/cypress/src/snapshot.ts b/integrations/cypress/src/snapshot.ts
index 022ec1e7..f7d47d53 100644
--- a/integrations/cypress/src/snapshot.ts
+++ b/integrations/cypress/src/snapshot.ts
@@ -34,7 +34,10 @@ export const pixeleyeSnapshot = (options: Options) => {
       : undefined;
 
   return cy.document().then(async (doc) => {
-    const serializedDom = domSnapshot(doc);
+    const serializedDom = domSnapshot(doc, {
+      recordCanvas: true,
+      inlineImages: true,
+    });
     if (!serializedDom) {
       throw new Error("Failed to serialize DOM");
     }
diff --git a/integrations/playwright/src/snapshot.ts b/integrations/playwright/src/snapshot.ts
index 416f4024..f088f1d0 100644
--- a/integrations/playwright/src/snapshot.ts
+++ b/integrations/playwright/src/snapshot.ts
@@ -1,13 +1,13 @@
 import type { Page } from "playwright-core";
 import { getEnvConfig } from "@pixeleye/cli-config";
 import { DeviceDescriptor } from "@pixeleye/cli-devices";
-import { logger } from "@pixeleye/cli-logger";
 import {
   snapshot,
   Options as ServerOptions,
   SnapshotRequest,
 } from "@pixeleye/cli-booth";
 import { createRequire } from "node:module";
+import { snapshot as rrwebSnapshotFn } from "rrweb-snapshot";
 
 let rrwebSnapshot: string | undefined;
 try {
@@ -64,8 +64,13 @@ export async function pixeleyeSnapshot(page: Page, options: Options) {
     await page.waitForSelector(options.waitForSelector);
 
   const domSnapshot = await (page as Page).evaluate(() => {
-    // @ts-ignore
-    return rrwebSnapshot.snapshot(document);
+    return ((rrwebSnapshot as any).snapshot as typeof rrwebSnapshotFn)(
+      document,
+      {
+        recordCanvas: true,
+        inlineImages: true,
+      }
+    );
   });
 
   if (!domSnapshot) {
diff --git a/integrations/puppeteer/src/snapshot.ts b/integrations/puppeteer/src/snapshot.ts
index 2f17548e..a69934d5 100644
--- a/integrations/puppeteer/src/snapshot.ts
+++ b/integrations/puppeteer/src/snapshot.ts
@@ -8,6 +8,7 @@ import {
   SnapshotRequest,
 } from "@pixeleye/cli-booth";
 import { createRequire } from "node:module";
+import { snapshot as rrwebSnapshotFn } from "rrweb-snapshot";
 
 export interface Options {
   fullPage?: boolean;
@@ -63,12 +64,17 @@ export async function pixeleyeSnapshot(
   });
 
   const domSnapshot = await (page as Page).evaluate(() => {
-    // @ts-ignore
-    return rrwebSnapshot.snapshot(document);
+    return ((rrwebSnapshot as any).snapshot as typeof rrwebSnapshotFn)(
+      document,
+      {
+        recordCanvas: true,
+        inlineImages: true,
+      }
+    );
   });
 
   if (!domSnapshot) {
-    throw new Error("No DOM snapshot available", domSnapshot);
+    throw new Error("No DOM snapshot available");
   }
 
   const snap: SnapshotRequest = {