test(browser-integration): Add test for Replay canvas recording (#10079)

billyvg · c298lee · commit 843f68eac032 · 2024-01-09T13:05:56.000-05:00
Adds a test to ensure that Replay canvas recording works.
diff --git a/dev-packages/browser-integration-tests/suites/replay/canvas/records/init.js b/dev-packages/browser-integration-tests/suites/replay/canvas/records/init.js
@@ -0,0 +1,24 @@
+import { getCanvasManager } from '@sentry-internal/rrweb';
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+window.Replay = new Sentry.Replay({
+  flushMinDelay: 50,
+  flushMaxDelay: 50,
+  minReplayDuration: 0,
+  _experiments: {
+    canvas: {
+      manager: getCanvasManager,
+    },
+  },
+});
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  sampleRate: 0,
+  replaysSessionSampleRate: 1.0,
+  replaysOnErrorSampleRate: 0.0,
+  debug: true,
+
+  integrations: [window.Replay],
+});
diff --git a/dev-packages/browser-integration-tests/suites/replay/canvas/records/template.html b/dev-packages/browser-integration-tests/suites/replay/canvas/records/template.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <canvas id="canvas" width="150" height="150"></canvas>
+    <button id="draw">Draw</button>
+  </body>
+
+
+  <script>
+  function draw() {
+  const canvas = document.getElementById("canvas");
+    if (canvas.getContext) {
+      console.log('has canvas')
+      const ctx = canvas.getContext("2d");
+
+      ctx.fillRect(25, 25, 100, 100);
+      ctx.clearRect(45, 45, 60, 60);
+      ctx.strokeRect(50, 50, 50, 50);
+    }
+  }
+  document.getElementById('draw').addEventListener('click', draw);
+  </script>
+</html>
diff --git a/dev-packages/browser-integration-tests/suites/replay/canvas/records/test.ts b/dev-packages/browser-integration-tests/suites/replay/canvas/records/test.ts
@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+
+sentryTest('can record canvas', async ({ getLocalTestUrl, page, browserName }) => {
+  if (shouldSkipReplayTest() || browserName === 'webkit') {
+    sentryTest.skip();
+  }
+
+  const reqPromise0 = waitForReplayRequest(page, 0);
+  const reqPromise1 = waitForReplayRequest(page, 1);
+  const reqPromise2 = waitForReplayRequest(page, 2);
+
+  await page.route('https://dsn.ingest.sentry.io/**/*', route => {
+    return route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ id: 'test-id' }),
+    });
+  });
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+
+  await page.goto(url);
+  await reqPromise0;
+  await Promise.all([page.click('#draw'), reqPromise1]);
+
+  const { incrementalSnapshots } = getReplayRecordingContent(await reqPromise2);
+  expect(incrementalSnapshots).toEqual(
+    expect.arrayContaining([
+      {
+        data: {
+          commands: [
+            {
+              args: [0, 0, 150, 150],
+              property: 'clearRect',
+            },
+            {
+              args: [
+                {
+                  args: [
+                    {
+                      data: [
+                        {
+                          base64: expect.any(String),
+                          rr_type: 'ArrayBuffer',
+                        },
+                      ],
+                      rr_type: 'Blob',
+                      type: 'image/webp',
+                    },
+                  ],
+                  rr_type: 'ImageBitmap',
+                },
+                0,
+                0,
+              ],
+              property: 'drawImage',
+            },
+          ],
+          id: 9,
+          source: 9,
+          type: 0,
+        },
+        timestamp: 0,
+        type: 3,
+      },
+    ]),
+  );
+});
diff --git a/dev-packages/browser-integration-tests/suites/replay/canvas/template.html b/dev-packages/browser-integration-tests/suites/replay/canvas/template.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <button onclick="console.log('Test log')">Click me</button>
+  </body>
+</html>
