fix(examples/with-playwritght): use PORT env variable and fall back t…

…o 3000 (#38107)

## Documentation / Examples

- [x] Related issues linked using `fixes #37952`
- [x] Make sure the linting passes by running `pnpm lint`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

examples/with-playwright/playwright.config.ts

@@ -1,6 +1,12 @@
 import { PlaywrightTestConfig, devices } from '@playwright/test'
 import path from 'path'
 
+// Use process.env.PORT by default and fallback to port 3000
+const PORT = process.env.PORT || 3000
+
+// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
+const baseURL = `http://localhost:${PORT}`
+
 // Reference: https://playwright.dev/docs/test-configuration
 const config: PlaywrightTestConfig = {
   // Timeout per test
@@ -16,12 +22,16 @@ const config: PlaywrightTestConfig = {
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
     command: 'npm run dev',
-    port: 3000,
+    url: baseURL,
     timeout: 120 * 1000,
     reuseExistingServer: !process.env.CI,
   },
 
   use: {
+    // Use baseURL so to make navigations relative.
+    // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
+    baseURL,
+
     // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
     // More information: https://playwright.dev/docs/trace-viewer
     trace: 'retry-with-trace',