test(tracing): Add LCP tests. (#4416)

onurtemizkan · web-flow · commit 82486573e7e6 · 2022-01-18T17:54:51.000-05:00
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
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
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="{{htmlWebpackPlugin.options.subject}}"></script>
+    <img src="https://example.com/path/to/image.png">
+  </body>
+</html>
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
@@ -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');
+});
