diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/assets/sentry-logo-600x179.png b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/assets/sentry-logo-600x179.png new file mode 100644 index 000000000000..353b7233d6bf Binary files /dev/null and b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/assets/sentry-logo-600x179.png differ diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/template.hbs b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/template.hbs new file mode 100644 index 000000000000..d37c2df3da81 --- /dev/null +++ b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/template.hbs @@ -0,0 +1,13 @@ + + + + + + + + +
+ + + + diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts new file mode 100644 index 000000000000..a5b5360945d2 --- /dev/null +++ b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/test.ts @@ -0,0 +1,29 @@ +import { expect, Route } from '@playwright/test'; + +import { sentryTest } from '../../../../utils/fixtures'; +import { getSentryTransactionRequest } from '../../../../utils/helpers'; + +sentryTest('should capture a LCP vital with element details.', async ({ browserName, getLocalTestPath, page }) => { + if (browserName !== 'chromium') { + sentryTest.skip(); + } + + await page.route('**/path/to/image.png', (route: Route) => + route.fulfill({ path: `${__dirname}/assets/sentry-logo-600x179.png` }), + ); + + const url = await getLocalTestPath({ testDir: __dirname }); + page.goto(url); + + // Force closure of LCP listener. + page.click('body'); + const eventData = await getSentryTransactionRequest(page); + + expect(eventData.measurements).toBeDefined(); + expect(eventData.measurements?.lcp?.value).toBeDefined(); + expect(eventData.measurements?.['mark.lcp']?.value).toBeDefined(); + + expect(eventData.tags?.['lcp.element']).toBe('body > img'); + expect(eventData.tags?.['lcp.size']).toBe(107400); + expect(eventData.tags?.['lcp.url']).toBe('https://example.com/path/to/image.png'); +});