test(browser): Update the test app to include soft navigation action

Author: Zen-cronic

dev-packages/e2e-tests/test-applications/default-browser/public/index.html

@@ -10,6 +10,14 @@
 
     <input type="button" value="Capture Exception" id="exception-button" />
 
+    <div id="navigation">
+
+      <a id="navigation-link" href="#navigation-target">Navigation Link</a>
+
+      <div id="navigation-target">Navigated Element</div>
+      
+    </div>
+
     <!-- The script tags for the bundled JavaScript files will be injected here by HtmlWebpackPlugin in build.mjs-->
   </body>
 </html>

dev-packages/e2e-tests/test-applications/default-browser/src/index.js

@@ -12,3 +12,7 @@ Sentry.init({
 document.getElementById('exception-button').addEventListener('click', () => {
   throw new Error('I am an error!');
 });
+
+document.getElementById('navigation-link').addEventListener('click', () => {
+  document.getElementById('navigation-target').scrollIntoView({ behavior: 'smooth' });
+});

dev-packages/e2e-tests/test-applications/default-browser/tests/errors.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test';
-import { waitForError } from '@sentry-internal/test-utils';
+import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
 
 test('captures an error', async ({ page }) => {
   const errorEventPromise = waitForError('default-browser', event => {
@@ -28,3 +28,31 @@ test('captures an error', async ({ page }) => {
     span_id: expect.any(String),
   });
 });
+
+test('sets correct transactionName', async ({ page }) => {
+  const transactionPromise = waitForTransaction('default-browser', async transactionEvent => {
+    return !!transactionEvent?.transaction && transactionEvent.contexts?.trace?.op === 'pageload';
+  });
+
+  const errorEventPromise = waitForError('default-browser', event => {
+    return !event.type && event.exception?.values?.[0]?.value === 'I am an error!';
+  });
+
+  await page.goto('/');
+  const transactionEvent = await transactionPromise;
+
+  const exceptionButton = page.locator('id=exception-button');
+  await exceptionButton.click();
+
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.exception?.values).toHaveLength(1);
+  expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');
+
+  expect(errorEvent.transaction).toEqual('/');
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: transactionEvent.contexts?.trace?.trace_id,
+    span_id: expect.not.stringContaining(transactionEvent.contexts?.trace?.span_id || ''),
+  });
+});

dev-packages/e2e-tests/test-applications/default-browser/tests/transactions.test.ts

@@ -11,21 +11,20 @@ test('sends a pageload transaction', async ({ page }) => {
   });
 
   await page.goto('/');
-  const transactionEvent = await transactionPromise;
 
-  const exceptionButton = page.locator('id=exception-button');
-  await exceptionButton.click();
+  const rootSpan = await transactionPromise;
 
-  const errorEvent = await errorEventPromise;
-
-  expect(errorEvent.exception?.values).toHaveLength(1);
-  expect(errorEvent.exception?.values?.[0]?.value).toBe('I am an error!');
-
-  expect(errorEvent.transaction).toEqual('/');
-
-  expect(errorEvent.contexts?.trace).toEqual({
-    trace_id: transactionEvent.contexts?.trace?.trace_id,
-    span_id: expect.not.stringContaining(transactionEvent.contexts?.trace?.span_id || ''),
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+        origin: 'auto.pageload.browser',
+      },
+    },
+    transaction: '/',
+    transaction_info: {
+      source: 'url',
+    },
   });
 });