test(e2e): Add pageload connection test for cache component apps

dev-packages/e2e-tests/test-applications/nextjs-16-cacheComponents/tests/cacheOrigin-pageloadConnection.spec.ts

@@ -0,0 +1,29 @@
+import { expect, test } from '@playwright/test';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+
+// TODO: Remove the inverse assertion in cacheComponents.spec.ts ("Prerendered shell does not stitch the pageload onto a stale trace") when this test passes.
+test('connects the pageload trace to the runtime server request', async ({ page }) => {
+  test.fail();
+
+  // The shell is prerendered, but the page's dynamic part (`DynamicContent` awaits `headers()`)
+  // runs on the server on every request and produces the `GET /pageload-tracing` transaction.
+  // A fully prerendered page would produce no server transaction.
+  const serverTxPromise = waitForTransaction('nextjs-16-cacheComponents', transactionEvent => {
+    return (
+      transactionEvent.contexts?.trace?.op === 'http.server' && transactionEvent.transaction === 'GET /pageload-tracing'
+    );
+  });
+
+  const pageloadTxPromise = waitForTransaction('nextjs-16-cacheComponents', transactionEvent => {
+    return transactionEvent.contexts?.trace?.op === 'pageload' && transactionEvent.transaction === '/pageload-tracing';
+  });
+
+  await page.goto('/pageload-tracing');
+
+  await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+
+  const [serverTx, pageloadTx] = await Promise.all([serverTxPromise, pageloadTxPromise]);
+
+  expect(serverTx.contexts?.trace?.trace_id).toBeTruthy();
+  expect(pageloadTx.contexts?.trace?.trace_id).toBe(serverTx.contexts?.trace?.trace_id);
+});

dev-packages/e2e-tests/test-applications/nextjs-16-streaming-cacheComponents/tests/cacheOrigin-pageloadConnection.spec.ts

@@ -0,0 +1,27 @@
+import { expect, test } from '@playwright/test';
+import { getSpanOp, waitForStreamedSpan } from '@sentry-internal/test-utils';
+
+// TODO: Remove the inverse assertion in cacheComponents.spec.ts ("Prerendered shell does not stitch the pageload onto a stale trace") when this test passes.
+test('connects the pageload trace to the runtime server request', async ({ page }) => {
+  test.fail();
+
+  // The shell is prerendered, but the page's dynamic part (`DynamicContent` awaits `headers()`)
+  // runs on the server on every request and produces the `GET /pageload-tracing` root span.
+  // A fully prerendered page would produce no server span.
+  const serverSpanPromise = waitForStreamedSpan('nextjs-16-streaming-cacheComponents', span => {
+    return span.name === 'GET /pageload-tracing' && getSpanOp(span) === 'http.server' && span.is_segment;
+  });
+
+  const pageloadSpanPromise = waitForStreamedSpan('nextjs-16-streaming-cacheComponents', span => {
+    return span.name === '/pageload-tracing' && getSpanOp(span) === 'pageload' && span.is_segment;
+  });
+
+  await page.goto('/pageload-tracing');
+
+  await expect(page.locator('#todos-fetched')).toHaveText('Todos fetched: 5');
+
+  const [serverSpan, pageloadSpan] = await Promise.all([serverSpanPromise, pageloadSpanPromise]);
+
+  expect(serverSpan.trace_id).toBeTruthy();
+  expect(pageloadSpan.trace_id).toBe(serverSpan.trace_id);
+});