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
new file mode 100644
index 000000000000..c798102c2014
--- /dev/null
+++ b/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/template.hbs
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+ Rendered
+
+
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
new file mode 100644
index 000000000000..e0e61ba07d53
--- /dev/null
+++ 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);
+});