diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.js b/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.js
deleted file mode 100644
index afd746fa477a..000000000000
--- a/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const { expectRequestCount, isTransactionRequest, expectTransaction } = require('../utils/client');
-
-module.exports = async ({ page, url, requests }) => {
-  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
-    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
-    return;
-  }
-
-  const requestPromise = page.waitForRequest(isTransactionRequest);
-  await page.goto(`${url}/clientcomponent`);
-  await requestPromise;
-
-  expectTransaction(requests.transactions[0], {
-    contexts: {
-      trace: {
-        op: 'pageload',
-      },
-    },
-    transaction: '/clientcomponent',
-  });
-
-  await expectRequestCount(requests, { transactions: 1 });
-};
diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.test.ts b/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.test.ts
new file mode 100644
index 000000000000..c1fca9390ac4
--- /dev/null
+++ b/packages/nextjs/test/integration/test/client/appDirTracingPageloadClientcomponent.test.ts
@@ -0,0 +1,27 @@
+import { getMultipleSentryEnvelopeRequests, countEnvelopes } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+
+test('should create a pageload transaction when the `app` directory is used with a client component.', async ({
+  page,
+}) => {
+  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
+    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
+    return;
+  }
+
+  const [transaction] = await getMultipleSentryEnvelopeRequests(page, 1, {
+    url: '/clientcomponent',
+    envelopeType: 'transaction',
+  });
+
+  expect(transaction).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+      },
+    },
+    transaction: '/clientcomponent',
+  });
+
+  expect(await countEnvelopes(page, { url: '/clientcomponent', envelopeType: 'transaction', timeout: 2000 })).toBe(1);
+});
diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.js b/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.js
deleted file mode 100644
index 5fdd41bfdc54..000000000000
--- a/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const { expectRequestCount, isTransactionRequest, expectTransaction } = require('../utils/client');
-
-module.exports = async ({ page, url, requests }) => {
-  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
-    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
-    return;
-  }
-
-  const requestPromise = page.waitForRequest(isTransactionRequest);
-  await page.goto(`${url}/servercomponent`);
-  await requestPromise;
-
-  expectTransaction(requests.transactions[0], {
-    contexts: {
-      trace: {
-        op: 'pageload',
-      },
-    },
-    transaction: '/servercomponent',
-  });
-
-  await expectRequestCount(requests, { transactions: 1 });
-};
diff --git a/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.test.ts b/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.test.ts
new file mode 100644
index 000000000000..3c6e3fcd6181
--- /dev/null
+++ b/packages/nextjs/test/integration/test/client/appDirTracingPageloadServercomponent.test.ts
@@ -0,0 +1,27 @@
+import { getMultipleSentryEnvelopeRequests, countEnvelopes } from './utils/helpers';
+import { test, expect } from '@playwright/test';
+
+test('should create a pageload transaction when the `app` directory is used with a server component.', async ({
+  page,
+}) => {
+  if (Number(process.env.NEXTJS_VERSION) < 13 || Number(process.env.NODE_MAJOR) < 16) {
+    // Next.js versions < 13 don't support the app directory and the app dir requires Node v16.8.0 or later.
+    return;
+  }
+
+  const [transaction] = await getMultipleSentryEnvelopeRequests(page, 1, {
+    url: '/servercomponent',
+    envelopeType: 'transaction',
+  });
+
+  expect(transaction).toMatchObject({
+    contexts: {
+      trace: {
+        op: 'pageload',
+      },
+    },
+    transaction: '/servercomponent',
+  });
+
+  expect(await countEnvelopes(page, { url: '/servercomponent', envelopeType: 'transaction', timeout: 2000 })).toBe(1);
+});