Update Playwright config to use dynamic app port variable

Replaced hardcoded port value with a dynamic variable for better maintainability and consistency. This change ensures the port is defined in a single location, reducing the risk of errors during updates.

Author: cod1k

dev-packages/e2e-tests/test-applications/cloudflare-workers/playwright.config.ts

@@ -5,10 +5,12 @@ if (!testEnv) {
   throw new Error('No test env defined');
 }
 
+const APP_PORT = 38787;
+
 const config = getPlaywrightConfig(
   {
-    startCommand: 'pnpm dev',
-    port: 8787,
+    startCommand: `pnpm dev --port ${APP_PORT}`,
+    port: APP_PORT,
   },
   {
     // This comes with the risk of tests leaking into each other but the tests run quite slow so we should parallelize

dev-packages/e2e-tests/test-applications/cloudflare-workers/tests/index.test.ts

@@ -1,36 +1,36 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
 
-test('Index page', async ({ page }) => {
-  const result = await page.goto('http://localhost:8787/');
-  expect(result?.status?.()).toBe(200);
-  await expect(page.textContent('body > pre')).resolves.toBe('Hello World!');
+test('Index page', async ({ baseURL }) => {
+  const result = await fetch(baseURL!);
+  expect(result.status).toBe(200);
+  await expect(result.text()).resolves.toBe('Hello World!');
 })
 
-test('worker\'s withSentry', async () => {
+test('worker\'s withSentry', async ({baseURL}) => {
   const eventWaiter = waitForError('cloudflare-workers', (event) => {
     return event.exception?.values?.[0]?.mechanism?.type === 'cloudflare';
   });
-  const response = await fetch('http://localhost:8787/throwException');
+  const response = await fetch(`${baseURL}/throwException`);
   expect(response.status).toBe(500);
   const event = await eventWaiter;
   expect(event.exception?.values?.[0]?.value).toBe('To be recorded in Sentry.');
 })
 
-test('RPC method which throws an exception to be logged to sentry', async () => {
+test('RPC method which throws an exception to be logged to sentry', async ({baseURL}) => {
   const eventWaiter = waitForError('cloudflare-workers', (event) => {
 		return event.exception?.values?.[0]?.mechanism?.type === 'cloudflare_durableobject';
 	});
-	const response = await fetch('http://localhost:8787/rpc/throwException');
+	const response = await fetch(`${baseURL}/rpc/throwException`);
 	expect(response.status).toBe(500);
 	const event = await eventWaiter;
   expect(event.exception?.values?.[0]?.value).toBe('Should be recorded in Sentry.');
 });
-test('Request processed by DurableObject\'s fetch is recorded', async () => {
+test('Request processed by DurableObject\'s fetch is recorded', async ({baseURL}) => {
   const eventWaiter = waitForError('cloudflare-workers', (event) => {
     return event.exception?.values?.[0]?.mechanism?.type === 'cloudflare_durableobject';
   });
-  const response = await fetch('http://localhost:8787/pass-to-object/throwException');
+  const response = await fetch(`${baseURL}/pass-to-object/throwException`);
   expect(response.status).toBe(500);
   const event = await eventWaiter;
   expect(event.exception?.values?.[0]?.value).toBe('Should be recorded in Sentry.');