test(tracing): Add FP and FCP tests (#4422)

onurtemizkan · web-flow · commit eaf2e81124c3 · 2022-01-19T15:57:11.000-05:00
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/template.hbs b/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/template.hbs
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <div>Rendered</div>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/test.ts b/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/test.ts
@@ -0,0 +1,41 @@
+import { expect } from '@playwright/test';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getSentryTransactionRequest } from '../../../../utils/helpers';
+
+sentryTest('should capture FP vital.', async ({ browserName, getLocalTestPath, page }) => {
+  // FP is not generated on webkit or firefox
+  if (browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const eventData = await getSentryTransactionRequest(page, url);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.fp?.value).toBeDefined();
+
+  expect(eventData.measurements?.['mark.fp']?.value).toBeDefined();
+
+  const fpSpan = eventData.spans?.filter(({ description }) => description === 'first-paint')[0];
+
+  expect(fpSpan).toBeDefined();
+  expect(fpSpan?.op).toBe('paint');
+  expect(fpSpan?.parentSpanId).toBe(eventData.contexts?.trace_span_id);
+});
+
+sentryTest('should capture FCP vital.', async ({ getLocalTestPath, page }) => {
+  const url = await getLocalTestPath({ testDir: __dirname });
+  const eventData = await getSentryTransactionRequest(page, url);
+
+  expect(eventData.measurements).toBeDefined();
+  expect(eventData.measurements?.fcp?.value).toBeDefined();
+
+  expect(eventData.measurements?.['mark.fcp']?.value).toBeDefined();
+
+  const fcpSpan = eventData.spans?.filter(({ description }) => description === 'first-contentful-paint')[0];
+
+  expect(fcpSpan).toBeDefined();
+  expect(fcpSpan?.op).toBe('paint');
+  expect(fcpSpan?.parentSpanId).toBe(eventData.contexts?.trace_span_id);
+});
