add additional test

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts

@@ -29,6 +29,46 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
   // the button as LCP.
   expect(eventData.contexts?.trace?.data?.['lcp.element'].startsWith('body >')).toBe(true);
   expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0);
-  expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeGreaterThan(0);
   expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0);
+
+  // renderTime is not set because we do not return the `Timing-Allow-Origin` header
+  // and the image is loaded from a 3rd party origin
+  expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeUndefined();
 });
+
+sentryTest(
+  'captures LCP renderTime when returning Timing-Allow-Origin header.',
+  async ({ browserName, getLocalTestPath, page }) => {
+    if (shouldSkipTracingTest() || browserName !== 'chromium') {
+      sentryTest.skip();
+    }
+
+    page.route('**', route => route.continue());
+    page.route('**/my/image.png', async (route: Route) => {
+      return route.fulfill({
+        path: `${__dirname}/assets/sentry-logo-600x179.png`,
+        headers: { 'Timing-Allow-Origin': '*' },
+      });
+    });
+
+    const url = await getLocalTestPath({ testDir: __dirname });
+    const [eventData] = await Promise.all([
+      getFirstSentryEnvelopeRequest<Event>(page),
+      page.goto(url),
+      page.locator('button').click(),
+    ]);
+
+    expect(eventData.measurements).toBeDefined();
+    expect(eventData.measurements?.lcp?.value).toBeDefined();
+
+    // XXX: This should be body > img, but it can be flakey as sometimes it will report
+    // the button as LCP.
+    expect(eventData.contexts?.trace?.data?.['lcp.element'].startsWith('body >')).toBe(true);
+    expect(eventData.contexts?.trace?.data?.['lcp.size']).toBeGreaterThan(0);
+    expect(eventData.contexts?.trace?.data?.['lcp.loadTime']).toBeGreaterThan(0);
+
+    // renderTime is not set because we do not return the `Timing-Allow-Origin` header
+    // and the image is loaded from a 3rd party origin
+    expect(eventData.contexts?.trace?.data?.['lcp.renderTime']).toBeGreaterThan(0);
+  },
+);