I have a Laravel 11 backend with a Nuxt 3 frontend project. I am use Laravel Sanctum which requires setting which domains/port can be used for authentication. Because of this, I need to use port 3000 for all interactions with the Laravel API. This works fine when starting a server using npm run dev.

However, when using playwright a random port is chosen which changes all the time. I have tried multiple different variations to set the port in the playwright.config.ts:

const devicesToTest = [
  'iPhone 12'
] satisfies Array<string | typeof devices[string]>

export default defineConfig<ConfigOptions>({
  testDir: './tests',

  use: {
    /* Collect trace when retrying the failed test. See /docs/trace-viewer */
    trace: 'on-first-retry',
    /* Nuxt configuration options */
    nuxt: {
      rootDir: fileURLToPath(new URL('.', import.meta.url)),
    },

    baseURL: 'http://127.0.0.1:3000'
  },
  projects: devicesToTest.map(p => typeof p === 'string' ? ({ name: p, use: devices[p] }) : p),
  webServer: {
    command: 'npm run build && npm run preview -- --port 3000',
    port: 3000
  }
})

I've tried setting the webServer.url and the webServer.port properties without any effect. I've also tried adding/removing the use.BaseURL field too. With all of the above, when running the tests I get this:

  1) [iPhone 12] › tests\e2e\login.spec.js:26:1 › can login ────────────────────────────────────────

    Error: expect(received).toBe(expected) // Object.is equality

    Expected: "/"
    Received: "http://127.0.0.1:62007/login"

I would expect the port to be set to 3000. For reference, this is the test I am trying to run:

import { expect, test } from '@nuxt/test-utils/playwright'

test.use({
  colorScheme: 'dark',
  viewport: {
    width: 390,
    height: 844
  }
})

test.beforeEach(async({page}) => {
  await page.goto('login', { waitUntil: 'domcontentloaded', timeout: 20000 })
})

test('can login', async ({ page }) => {
  await page.locator('#username').fill('[email protected]')
  await page.locator('#password').fill('password')
  await page.locator('button[type="submit"]').click() // after form submission, should authenticate and redirect to /
  await page.waitForLoadState()
  await page.screenshot()
  await expect(page.url()).toBe('/')
}