Add integration tests for inp click span envelopes

Author: edwardgou-sentry

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/init.js

@@ -11,6 +11,7 @@ Sentry.init({
       _experiments: {
         enableInteractions: true,
       },
+      enableInp: true,
     }),
   ],
   tracesSampleRate: 1,

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/interactions/test.ts

@@ -1,6 +1,6 @@
 import type { Route } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { Event, Span, SpanContext, Transaction } from '@sentry/types';
+import type { Event, Measurements, Span, SpanContext, SpanJSON, Transaction } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
 import {
@@ -112,3 +112,51 @@ sentryTest(
     expect(interactionSpan.description).toBe('body > AnnotatedButton');
   },
 );
+
+sentryTest('should capture an INP click event span. @firefox', async ({ browserName, getLocalTestPath, page }) => {
+  const supportedBrowsers = ['chromium', 'firefox'];
+
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
+
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+  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);
+  await getFirstSentryEnvelopeRequest<Event>(page);
+
+  await page.locator('[data-test-id=interaction-button]').click();
+  await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
+
+  // Wait for the interaction transaction from the enableInteractions experiment
+  await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+
+  const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<
+    SpanJSON & { exclusive_time: number; measurements: Measurements }
+  >(page, 1, {
+    envelopeType: 'span',
+  });
+  // Page hide to trigger INP
+  await page.evaluate(() => {
+    window.dispatchEvent(new Event('pagehide'));
+  });
+
+  // Get the INP span envelope
+  const spanEnvelopes = await spanEnvelopesPromise;
+
+  expect(spanEnvelopes).toHaveLength(1);
+  expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
+  expect(spanEnvelopes[0].description).toBe('body > button.clicked');
+  expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
+});

dev-packages/browser-integration-tests/suites/tracing/browsertracing/interactions/init.js

@@ -12,6 +12,7 @@ Sentry.init({
         enableInteractions: true,
         enableLongTask: false,
       },
+      enableInp: true,
     }),
   ],
   tracesSampleRate: 1,

dev-packages/browser-integration-tests/suites/tracing/browsertracing/interactions/test.ts

@@ -1,6 +1,6 @@
 import type { Route } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { SerializedEvent, Span, SpanContext, Transaction } from '@sentry/types';
+import type { Measurements, SerializedEvent, Span, SpanContext, SpanJSON, Transaction } from '@sentry/types';
 
 import { sentryTest } from '../../../../utils/fixtures';
 import {
@@ -112,3 +112,51 @@ sentryTest(
     expect(interactionSpan.description).toBe('body > AnnotatedButton');
   },
 );
+
+sentryTest('should capture an INP click event span. @firefox', async ({ browserName, getLocalTestPath, page }) => {
+  const supportedBrowsers = ['chromium', 'firefox'];
+
+  if (shouldSkipTracingTest() || !supportedBrowsers.includes(browserName)) {
+    sentryTest.skip();
+  }
+
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+  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);
+  await getFirstSentryEnvelopeRequest<Event>(page);
+
+  await page.locator('[data-test-id=interaction-button]').click();
+  await page.locator('.clicked[data-test-id=interaction-button]').isVisible();
+
+  // Wait for the interaction transaction from the enableInteractions experiment
+  await getMultipleSentryEnvelopeRequests<TransactionJSON>(page, 1);
+
+  const spanEnvelopesPromise = getMultipleSentryEnvelopeRequests<
+    SpanJSON & { exclusive_time: number; measurements: Measurements }
+  >(page, 1, {
+    envelopeType: 'span',
+  });
+  // Page hide to trigger INP
+  await page.evaluate(() => {
+    window.dispatchEvent(new Event('pagehide'));
+  });
+
+  // Get the INP span envelope
+  const spanEnvelopes = await spanEnvelopesPromise;
+
+  expect(spanEnvelopes).toHaveLength(1);
+  expect(spanEnvelopes[0].op).toBe('ui.interaction.click');
+  expect(spanEnvelopes[0].description).toBe('body > button.clicked');
+  expect(spanEnvelopes[0].exclusive_time).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements.inp.value).toBeGreaterThan(0);
+  expect(spanEnvelopes[0].measurements.inp.unit).toBe('millisecond');
+});