add nuxt e2e tests

Author: Lms24

dev-packages/e2e-tests/test-applications/nuxt-3-dynamic-import/tests/tracing.client.test.ts

@@ -19,6 +19,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',

dev-packages/e2e-tests/test-applications/nuxt-3-min/tests/tracing.client.test.ts

@@ -20,6 +20,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',

dev-packages/e2e-tests/test-applications/nuxt-3-top-level-import/tests/tracing.client.test.ts

@@ -19,6 +19,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',

dev-packages/e2e-tests/test-applications/nuxt-3/tests/tracing.client.test.ts

@@ -19,6 +19,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',

dev-packages/e2e-tests/test-applications/nuxt-4/tests/tracing.client.test.ts

@@ -19,6 +19,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',
@@ -31,6 +34,41 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
   });
 });
 
+test('sends a navigation root span with a parameterized URL', async ({ page }) => {
+  const transactionPromise = waitForTransaction('nuxt-4', async transactionEvent => {
+    return (
+      transactionEvent.contexts?.trace?.op === 'navigation' && transactionEvent.transaction === '/test-param/:param()'
+    );
+  });
+
+  await page.goto(`/`);
+  await page.getByText('Fetch Param').click();
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.source': 'route',
+          'sentry.origin': 'auto.navigation.vue',
+          'sentry.op': 'navigation',
+          'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
+        },
+        op: 'navigation',
+        origin: 'auto.navigation.vue',
+      },
+    },
+    transaction: '/test-param/:param()',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});
+
 test('sends component tracking spans when `trackComponents` is enabled', async ({ page }) => {
   const transactionPromise = waitForTransaction('nuxt-4', async transactionEvent => {
     return transactionEvent.transaction === '/client-error';

dev-packages/e2e-tests/test-applications/nuxt-5/tests/tracing.client.test.ts

@@ -19,6 +19,9 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
           'sentry.origin': 'auto.pageload.vue',
           'sentry.op': 'pageload',
           'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
         },
         op: 'pageload',
         origin: 'auto.pageload.vue',
@@ -31,6 +34,41 @@ test('sends a pageload root span with a parameterized URL', async ({ page }) =>
   });
 });
 
+test('sends a navigation root span with a parameterized URL', async ({ page }) => {
+  const transactionPromise = waitForTransaction('nuxt-5', async transactionEvent => {
+    return (
+      transactionEvent.contexts?.trace?.op === 'navigation' && transactionEvent.transaction === '/test-param/:param()'
+    );
+  });
+
+  await page.goto(`/`);
+  await page.getByText('Fetch Param').click();
+
+  const rootSpan = await transactionPromise;
+
+  expect(rootSpan).toMatchObject({
+    contexts: {
+      trace: {
+        data: {
+          'sentry.source': 'route',
+          'sentry.origin': 'auto.navigation.vue',
+          'sentry.op': 'navigation',
+          'params.param': '1234',
+          'url.template': '/test-param/:param()',
+          'url.path': '/test-param/1234',
+          'url.full': expect.stringMatching(/^https?:\/\/localhost:\d+\/test-param\/1234$/),
+        },
+        op: 'navigation',
+        origin: 'auto.navigation.vue',
+      },
+    },
+    transaction: '/test-param/:param()',
+    transaction_info: {
+      source: 'route',
+    },
+  });
+});
+
 test('sends component tracking spans when `trackComponents` is enabled', async ({ page }) => {
   const transactionPromise = waitForTransaction('nuxt-5', async transactionEvent => {
     return transactionEvent.transaction === '/client-error';