add breadcrumb test

Author: Lms24

packages/integration-tests/suites/replay/customEvents/test.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../utils/fixtures';
 import {
+  expectedClickBreadcrumb,
   expectedFCPPerformanceSpan,
   expectedFPPerformanceSpan,
   expectedLCPPerformanceSpan,
@@ -63,3 +64,44 @@ sentryTest(
     );
   },
 );
+
+sentryTest(
+  'replay recording should contain a click breadcrumb when a button is clicked',
+  async ({ getLocalTestPath, page, browserName }) => {
+    // Replay bundles are es6 only and most performance entries are only available in chromium
+    if ((process.env.PW_BUNDLE && process.env.PW_BUNDLE.startsWith('bundle_es5')) || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    const reqPromise0 = waitForReplayRequest(page, 0);
+    const reqPromise1 = waitForReplayRequest(page, 1);
+
+    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 getLocalTestPath({ testDir: __dirname });
+
+    await page.goto(url);
+    const replayEvent0 = getReplayEvent(await reqPromise0);
+    const { breadcrumbs: breadcrumbs0 } = getCustomRecordingEvents(await reqPromise0);
+
+    expect(replayEvent0).toEqual(getExpectedReplayEvent({ segment_id: 0 }));
+    expect(breadcrumbs0.length).toEqual(0);
+
+    await page.click('button');
+
+    const replayEvent1 = getReplayEvent(await reqPromise1);
+    const { breadcrumbs: breadcrumbs1 } = getCustomRecordingEvents(await reqPromise1);
+
+    expect(replayEvent1).toEqual(
+      getExpectedReplayEvent({ segment_id: 1, urls: [], replay_start_timestamp: undefined }),
+    );
+
+    expect(breadcrumbs1).toEqual([expectedClickBreadcrumb]);
+  },
+);

packages/integration-tests/utils/replayEventTemplates.ts

@@ -110,3 +110,15 @@ export const expectedFPPerformanceSpan = {
   startTimestamp: expect.any(Number),
   endTimestamp: expect.any(Number),
 };
+
+/* Breadcrumbs */
+
+export const expectedClickBreadcrumb = {
+  timestamp: expect.any(Number),
+  type: 'default',
+  category: 'ui.click',
+  message: expect.any(String),
+  data: {
+    nodeId: expect.any(Number),
+  },
+};