try #6

Author: billyvg

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

@@ -9,29 +9,28 @@ sentryTest('should capture a LCP vital with element details.', async ({ browserN
   if (shouldSkipTracingTest() || browserName !== 'chromium') {
     sentryTest.skip();
   }
-  const imageSrc = 'https://example.com/path/to/image.png';
-  const imageResponsePromise = page.waitForResponse(imageSrc);
   page.route('**', route => route.continue());
   page.route('**/path/to/image.png', async (route: Route) => {
     return route.fulfill({ path: `${__dirname}/assets/sentry-logo-600x179.png` });
   });
 
   const url = await getLocalTestPath({ testDir: __dirname });
-  const [eventData, imageResponse] = await Promise.all([
+  const [eventData] = await Promise.all([
     getFirstSentryEnvelopeRequest<Event>(page),
     page.goto(url),
-    imageResponsePromise,
+    // Clicking the button before image loads will result in the button being the LCP
+    page.waitForFunction(() => {
+      const images = Array.from(document.querySelectorAll('img'));
+      return images.every(img => img.complete);
+    }),
   ]);
 
-  await imageResponse?.finished();
-
-  // Clicking the button before image loads will result in the button being the LCP
   await page.locator('button').click();
 
   expect(eventData.measurements).toBeDefined();
   expect(eventData.measurements?.lcp?.value).toBeDefined();
 
   expect(eventData.contexts?.trace?.data?.['lcp.element']).toBe('body > img');
   expect(eventData.contexts?.trace?.data?.['lcp.size']).toBe(107400);
-  expect(eventData.contexts?.trace?.data?.['lcp.url']).toBe(imageSrc);
+  expect(eventData.contexts?.trace?.data?.['lcp.url']).toBe('https://example.com/path/to/image.png');
 });