getsentry · AbhiPrasad · Dec 13, 2022 · Dec 13, 2022 · Dec 13, 2022
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -38,7 +38,7 @@
     "karma-typescript-es6-transform": "^4.0.0",
     "karma-webkit-launcher": "^1.0.2",
     "node-fetch": "^2.6.0",
-    "playwright": "^1.17.1",
+    "playwright": "^1.27.1",
     "sinon": "^7.3.2",
     "webpack": "^4.30.0"
   },

diff --git a/packages/integration-tests/package.json b/packages/integration-tests/package.json
@@ -26,10 +26,10 @@
   },
   "dependencies": {
     "@babel/preset-typescript": "^7.16.7",
-    "@playwright/test": "^1.17.0",
+    "@playwright/test": "^1.27.1",
     "babel-loader": "^8.2.2",
     "html-webpack-plugin": "^5.5.0",
-    "playwright": "^1.17.1",
+    "playwright": "^1.27.1",
     "typescript": "^4.5.2",
     "webpack": "^5.52.0"
   },

diff --git a/packages/integration-tests/suites/public-api/startTransaction/basic_usage/test.ts b/packages/integration-tests/suites/public-api/startTransaction/basic_usage/test.ts
@@ -16,7 +16,7 @@ sentryTest('should report finished spans as children of the root transaction', a
   const url = await getLocalTestPath({ testDir: __dirname });
   const transaction = await getFirstSentryEnvelopeRequest<Event>(page, url);
 
-  const rootSpanId = transaction?.contexts?.trace.spanId;
+  const rootSpanId = transaction?.contexts?.trace?.spanId;
 
   expect(transaction.spans).toHaveLength(3);
 

diff --git a/packages/integration-tests/suites/sessions/start-session/template.html b/packages/integration-tests/suites/sessions/start-session/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/sessions/update-session/template.html b/packages/integration-tests/suites/sessions/update-session/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/stacktraces/protocol_containing_fn_identifiers/test.ts b/packages/integration-tests/suites/stacktraces/protocol_containing_fn_identifiers/test.ts
@@ -20,7 +20,7 @@ sentryTest(
         { function: 'readFile' },
         { function: 'httpsCall' },
         { function: 'webpackDevServer' },
-        { function: 'Function.httpCode' },
+        { function: 'Response.httpCode' },
       ]);
     });
 

diff --git a/packages/integration-tests/suites/stacktraces/protocol_fn_identifiers/test.ts b/packages/integration-tests/suites/stacktraces/protocol_fn_identifiers/test.ts
@@ -20,7 +20,7 @@ sentryTest(
         { function: 'file' },
         { function: 'https' },
         { function: 'webpack' },
-        { function: 'Function.http' },
+        { function: 'File.http' },
       ]);
     });
 

diff --git a/packages/integration-tests/suites/stacktraces/regular_fn_identifiers/test.ts b/packages/integration-tests/suites/stacktraces/regular_fn_identifiers/test.ts
@@ -21,7 +21,7 @@ sentryTest(
         { function: '?' },
         { function: 'foo' },
         { function: 'bar' },
-        { function: 'Function.baz' },
+        { function: 'Test.baz' },
       ]);
     });
 

diff --git a/packages/integration-tests/suites/stacktraces/template.hbs b/packages/integration-tests/suites/stacktraces/template.hbs
diff --git a/...tests/suites/public-api/init/template.hbs → ...on-tests/suites/stacktraces/template.html b/...tests/suites/public-api/init/template.hbs → ...on-tests/suites/stacktraces/template.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title></title>
-  <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
+    <script src="{{htmlWebpackPlugin.options.initialization}}"></script>
   </head>
   <body>
     <script src="{{htmlWebpackPlugin.options.subject}}"></script>

diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.html b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-custom/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/...ages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.html b/...ages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts b/packages/integration-tests/suites/tracing/browsertracing/backgroundtab-pageload/test.ts
@@ -13,9 +13,9 @@ sentryTest('should finish pageload transaction when the page goes background', a
 
   const pageloadTransaction = await getFirstSentryEnvelopeRequest<Event>(page);
 
-  expect(pageloadTransaction.contexts?.trace.op).toBe('pageload');
-  expect(pageloadTransaction.contexts?.trace.status).toBe('cancelled');
-  expect(pageloadTransaction.contexts?.trace.tags).toMatchObject({
+  expect(pageloadTransaction.contexts?.trace?.op).toBe('pageload');
+  expect(pageloadTransaction.contexts?.trace?.status).toBe('cancelled');
+  expect(pageloadTransaction.contexts?.trace?.tags).toMatchObject({
     visibilitychange: 'document.hidden',
   });
 });
diff --git a/packages/integration-tests/suites/tracing/browsertracing/interactions/template.html b/packages/integration-tests/suites/tracing/browsertracing/interactions/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/browsertracing/long-tasks-disabled/template.html b/packages/integration-tests/suites/tracing/browsertracing/long-tasks-disabled/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/browsertracing/long-tasks-enabled/template.html b/packages/integration-tests/suites/tracing/browsertracing/long-tasks-enabled/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/browsertracing/long-tasks-enabled/test.ts b/packages/integration-tests/suites/tracing/browsertracing/long-tasks-enabled/test.ts
@@ -24,11 +24,11 @@ sentryTest('should capture long task.', async ({ browserName, getLocalTestPath,
     expect.objectContaining({
       op: 'ui.long-task',
       description: 'Main UI thread blocked',
-      parent_span_id: eventData.contexts?.trace.span_id,
+      parent_span_id: eventData.contexts?.trace?.span_id,
     }),
   );
-  const start = firstUISpan['start_timestamp'] ?? 0;
-  const end = firstUISpan['timestamp'] ?? 0;
+  const start = (firstUISpan as Event)['start_timestamp'] ?? 0;
+  const end = (firstUISpan as Event)['timestamp'] ?? 0;
   const duration = end - start;
 
   expect(duration).toBeGreaterThanOrEqual(0.1);

diff --git a/packages/integration-tests/suites/tracing/browsertracing/meta/template.html b/packages/integration-tests/suites/tracing/browsertracing/meta/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/browsertracing/meta/test.ts b/packages/integration-tests/suites/tracing/browsertracing/meta/test.ts
@@ -52,15 +52,15 @@ sentryTest(
       trace_id: '12312012123120121231201212312012',
     });
 
-    expect(navigationRequest.contexts?.trace.op).toBe('navigation');
-    expect(navigationRequest.contexts?.trace.trace_id).toBeDefined();
-    expect(navigationRequest.contexts?.trace.trace_id).not.toBe(pageloadRequest.contexts?.trace.trace_id);
+    expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
+    expect(navigationRequest.contexts?.trace?.trace_id).toBeDefined();
+    expect(navigationRequest.contexts?.trace?.trace_id).not.toBe(pageloadRequest.contexts?.trace?.trace_id);
 
     const pageloadSpans = pageloadRequest.spans;
     const navigationSpans = navigationRequest.spans;
 
-    const pageloadSpanId = pageloadRequest.contexts?.trace.span_id;
-    const navigationSpanId = navigationRequest.contexts?.trace.span_id;
+    const pageloadSpanId = pageloadRequest.contexts?.trace?.span_id;
+    const navigationSpanId = navigationRequest.contexts?.trace?.span_id;
 
     expect(pageloadSpanId).toBeDefined();
     expect(navigationSpanId).toBeDefined();

diff --git a/packages/integration-tests/suites/tracing/browsertracing/navigation/test.ts b/packages/integration-tests/suites/tracing/browsertracing/navigation/test.ts
@@ -10,13 +10,13 @@ sentryTest('should create a navigation transaction on page navigation', async ({
   const pageloadRequest = await getFirstSentryEnvelopeRequest<Event>(page, url);
   const navigationRequest = await getFirstSentryEnvelopeRequest<Event>(page, `${url}#foo`);
 
-  expect(pageloadRequest.contexts?.trace.op).toBe('pageload');
-  expect(navigationRequest.contexts?.trace.op).toBe('navigation');
+  expect(pageloadRequest.contexts?.trace?.op).toBe('pageload');
+  expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
 
   expect(navigationRequest.transaction_info?.source).toEqual('url');
 
-  const pageloadTraceId = pageloadRequest.contexts?.trace.trace_id;
-  const navigationTraceId = navigationRequest.contexts?.trace.trace_id;
+  const pageloadTraceId = pageloadRequest.contexts?.trace?.trace_id;
+  const navigationTraceId = navigationRequest.contexts?.trace?.trace_id;
 
   expect(pageloadTraceId).toBeDefined();
   expect(navigationTraceId).toBeDefined();
@@ -25,8 +25,8 @@ sentryTest('should create a navigation transaction on page navigation', async ({
   const pageloadSpans = pageloadRequest.spans;
   const navigationSpans = navigationRequest.spans;
 
-  const pageloadSpanId = pageloadRequest.contexts?.trace.span_id;
-  const navigationSpanId = navigationRequest.contexts?.trace.span_id;
+  const pageloadSpanId = pageloadRequest.contexts?.trace?.span_id;
+  const navigationSpanId = navigationRequest.contexts?.trace?.span_id;
 
   expect(pageloadSpanId).toBeDefined();
   expect(navigationSpanId).toBeDefined();

diff --git a/packages/integration-tests/suites/tracing/metrics/connection-rtt/template.html b/packages/integration-tests/suites/tracing/metrics/connection-rtt/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-browser-spans/test.ts b/packages/integration-tests/suites/tracing/metrics/pageload-browser-spans/test.ts
@@ -17,7 +17,7 @@ sentryTest('should add browser-related spans to pageload transaction', async ({
     expect(browserSpans).toContainEqual(
       expect.objectContaining({
         description: eventDesc,
-        parent_span_id: eventData.contexts?.trace.span_id,
+        parent_span_id: eventData.contexts?.trace?.span_id,
       }),
     ),
   );

diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/template.html b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/test.ts b/packages/integration-tests/suites/tracing/metrics/pageload-resource-spans/test.ts
@@ -4,7 +4,7 @@ import { Event } from '@sentry/types';
 import { sentryTest } from '../../../../utils/fixtures';
 import { getFirstSentryEnvelopeRequest } from '../../../../utils/helpers';
 
-sentryTest('should add resource spans to pageload transaction', async ({ getLocalTestPath, page }) => {
+sentryTest('should add resource spans to pageload transaction', async ({ getLocalTestPath, page, browser }) => {
   // Intercepting asset requests to avoid network-related flakiness and random retries (on Firefox).
   await page.route('**/path/to/image.svg', (route: Route) => route.fulfill({ path: `${__dirname}/assets/image.svg` }));
   await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
@@ -15,13 +15,19 @@ sentryTest('should add resource spans to pageload transaction', async ({ getLoca
   const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
   const resourceSpans = eventData.spans?.filter(({ op }) => op?.startsWith('resource'));
 
-  expect(resourceSpans?.length).toBe(3);
+  // Webkit 16.0 (which is linked to Playwright 1.27.1) consistently creates 2 consectutive spans for `css`,
+  // so we need to check for 3 or 4 spans.
+  if (browser.browserType().name() === 'webkit') {
+    expect(resourceSpans?.length).toBeGreaterThanOrEqual(3);
+  } else {
+    expect(resourceSpans?.length).toBe(3);
+  }
 
   ['resource.img', 'resource.script', 'resource.link'].forEach(op =>
     expect(resourceSpans).toContainEqual(
       expect.objectContaining({
         op: op,
-        parent_span_id: eventData.contexts?.trace.span_id,
+        parent_span_id: eventData.contexts?.trace?.span_id,
       }),
     ),
   );

diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/template.html b/packages/integration-tests/suites/tracing/metrics/web-vitals-cls/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/template.html b/packages/integration-tests/suites/tracing/metrics/web-vitals-fid/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/template.html b/packages/integration-tests/suites/tracing/metrics/web-vitals-fp-fcp/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html b/packages/integration-tests/suites/tracing/metrics/web-vitals-lcp/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/metrics/web-vitals-ttfb/template.html b/packages/integration-tests/suites/tracing/metrics/web-vitals-ttfb/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />

diff --git a/packages/integration-tests/suites/tracing/request/fetch/test.ts b/packages/integration-tests/suites/tracing/request/fetch/test.ts
@@ -27,11 +27,11 @@ sentryTest('should create spans for multiple fetch requests', async ({ getLocalT
   requestSpans?.forEach((span, index) =>
     expect(span).toMatchObject({
       description: `GET http://example.com/${index}`,
-      parent_span_id: tracingEvent.contexts?.trace.span_id,
+      parent_span_id: tracingEvent.contexts?.trace?.span_id,
       span_id: expect.any(String),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      trace_id: tracingEvent.contexts?.trace.trace_id,
+      trace_id: tracingEvent.contexts?.trace?.trace_id,
     }),
   );
 });

diff --git a/packages/integration-tests/suites/tracing/request/xhr/test.ts b/packages/integration-tests/suites/tracing/request/xhr/test.ts
@@ -15,11 +15,11 @@ sentryTest('should create spans for multiple XHR requests', async ({ getLocalTes
   requestSpans?.forEach((span, index) =>
     expect(span).toMatchObject({
       description: `GET http://example.com/${index}`,
-      parent_span_id: eventData.contexts?.trace.span_id,
+      parent_span_id: eventData.contexts?.trace?.span_id,
       span_id: expect.any(String),
       start_timestamp: expect.any(Number),
       timestamp: expect.any(Number),
-      trace_id: eventData.contexts?.trace.trace_id,
+      trace_id: eventData.contexts?.trace?.trace_id,
     }),
   );
 });

diff --git a/packages/integration-tests/utils/defaults/template.html b/packages/integration-tests/utils/defaults/template.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />