test(replay): cover mutated click breadcrumb attributes

logaretm · claude · logaretm · commit 87e886b54af2 · 2026-04-14T10:48:23.000-04:00
Co-Authored-By: GPT-5 &lt;noreply@anthropic.com&gt;
diff --git a/dev-packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts b/dev-packages/browser-integration-tests/suites/replay/slowClick/mutation/test.ts
@@ -56,6 +56,66 @@ sentryTest('mutation after threshold results in slow click', async ({ forceFlush
   expect(slowClickBreadcrumbs[0]?.data?.timeAfterClickMs).toBeLessThan(3501);
 });
 
+sentryTest(
+  'uses updated attributes for click breadcrumbs after mutation',
+  async ({ forceFlushReplay, getLocalTestUrl, page }) => {
+    if (shouldSkipReplayTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const replayRequestPromise = waitForReplayRequest(page, 0);
+    const segmentReqWithClickBreadcrumbPromise = waitForReplayRequest(page, (_event, res) => {
+      const { breadcrumbs } = getCustomRecordingEvents(res);
+
+      return breadcrumbs.some(breadcrumb => breadcrumb.category === 'ui.click');
+    });
+
+    await page.goto(url);
+    await replayRequestPromise;
+
+    await forceFlushReplay();
+
+    await page.evaluate(() => {
+      const target = document.getElementById('next-question-button');
+      if (!target) {
+        throw new Error('Could not find target button');
+      }
+
+      target.id = 'save-note-button';
+      target.setAttribute('data-testid', 'save-note-button');
+    });
+
+    await page.getByRole('button', { name: 'Next question' }).click();
+    await forceFlushReplay();
+
+    const segmentReqWithClickBreadcrumb = await segmentReqWithClickBreadcrumbPromise;
+
+    const { breadcrumbs } = getCustomRecordingEvents(segmentReqWithClickBreadcrumb);
+    const updatedClickBreadcrumb = breadcrumbs.find(breadcrumb => breadcrumb.category === 'ui.click');
+
+    expect(updatedClickBreadcrumb).toEqual({
+      category: 'ui.click',
+      data: {
+        node: {
+          attributes: {
+            id: 'save-note-button',
+            testId: 'save-note-button',
+          },
+          id: expect.any(Number),
+          tagName: 'button',
+          textContent: '**** ********',
+        },
+        nodeId: expect.any(Number),
+      },
+      message: 'body > button#save-note-button',
+      timestamp: expect.any(Number),
+      type: 'default',
+    });
+  },
+);
+
 sentryTest('multiple clicks are counted', async ({ getLocalTestUrl, page }) => {
   if (shouldSkipReplayTest()) {
     sentryTest.skip();
diff --git a/dev-packages/browser-integration-tests/suites/replay/slowClick/template.html b/dev-packages/browser-integration-tests/suites/replay/slowClick/template.html
@@ -6,6 +6,7 @@
   <body>
     <button id="mutationButton">Trigger mutation</button>
     <div id="mutationDiv">Trigger mutation</div>
+    <button id="next-question-button" data-testid="next-question-button">Next question</button>
     <button id="mutationButtonImmediately">Trigger mutation immediately</button>
     <button
       id="mutationButtonInline"
