feat(playwright): reuse existing server

examples/app-playwright/playwright.config.ts

@@ -34,6 +34,8 @@ export default defineConfig<ConfigOptions>({
     trace: 'on-first-retry',
     /* Nuxt configuration options */
     nuxt: {
+      /* Reuse a server if it's already running. Useful when developing tests. */
+      reuseExistingServer: process.env.CI ? false : true,
       rootDir: fileURLToPath(new URL('.', import.meta.url)),
     },
   },

src/core/server.ts

@@ -14,11 +14,23 @@ export interface StartServerOptions {
   env?: Record<string, unknown>
 }
 
+export async function reuseExistingServer() {
+  const ctx = useTestContext()
+  const host = ctx.options.host || 'localhost' // Default to localhost since it's the host used by nuxt dev server
+  const port = ctx.options.port || 3000 // Default to 3000 since it's the port used by nuxt dev server
+
+  if (port === undefined) {
+    throw new Error('Port is required when reusing server')
+  }
+
+  ctx.url = `http://${host}:${port}`
+}
+
 export async function startServer(options: StartServerOptions = {}) {
   const ctx = useTestContext()
   await stopServer()
   const host = '127.0.0.1'
-  const port = ctx.options.port || await getRandomPort(host)
+  const port = ctx.options.port || (await getRandomPort(host))
   ctx.url = `http://${host}:${port}`
   if (ctx.options.dev) {
     const nuxiCLI = await kit.resolvePath('nuxi/cli')
@@ -53,17 +65,18 @@ export async function startServer(options: StartServerOptions = {}) {
   }
   else {
     ctx.serverProcess = execa('node', [
-      resolve(ctx.nuxt!.options.nitro.output!.dir!, 'server/index.mjs'),
+      resolve(ctx.nuxt!.options.nitro.output!.dir!, 'server/index.mjs')
     ], {
-      stdio: 'inherit',
-      env: {
-        ...process.env,
-        PORT: String(port),
-        HOST: host,
-        NODE_ENV: 'test',
-        ...options.env,
+        stdio: 'inherit',
+        env: {
+          ...process.env,
+          PORT: String(port),
+          HOST: host,
+          NODE_ENV: 'test',
+          ...options.env,
+        },
       },
-    })
+    )
     await waitForPort(port, { retries: 20, host })
   }
 }
@@ -79,9 +92,9 @@ export function fetch(path: string, options?: RequestInit) {
   return _fetch(url(path), options)
 }
 
-export const $fetch = (function (path: string, options?: FetchOptions) {
+export const $fetch = function (path: string, options?: FetchOptions) {
   return _$fetch(url(path), options)
-}) as typeof globalThis['$fetch']
+} as typeof globalThis['$fetch']
 
 export function url(path: string) {
   const ctx = useTestContext()

src/core/setup/index.ts

@@ -1,6 +1,6 @@
 import { createTestContext, setTestContext } from '../context'
 import { buildFixture, loadFixture } from '../nuxt'
-import { startServer, stopServer } from '../server'
+import { reuseExistingServer, startServer, stopServer } from '../server'
 import { createBrowser } from '../browser'
 import type { TestHooks, TestOptions } from '../types'
 import setupCucumber from './cucumber'
@@ -41,15 +41,19 @@ export function createTest(options: Partial<TestOptions>): TestHooks {
   }
 
   const setup = async () => {
+    if (ctx.options.reuseExistingServer) {
+      await reuseExistingServer()
+    }
+
     if (ctx.options.fixture) {
       await loadFixture()
     }
 
-    if (ctx.options.build) {
+    if (ctx.options.build && !ctx.options.reuseExistingServer) {
       await buildFixture()
     }
 
-    if (ctx.options.server) {
+    if (ctx.options.server && !ctx.options.reuseExistingServer) {
       await startServer()
     }
 

src/core/types.ts

@@ -11,6 +11,7 @@ export interface TestOptions {
   rootDir: string
   buildDir: string
   nuxtConfig: NuxtConfig
+  reuseExistingServer?: boolean
   build: boolean
   dev: boolean
   setupTimeout: number
@@ -23,6 +24,7 @@ export interface TestOptions {
     launch?: LaunchOptions
   }
   server: boolean
+  host?: string
   port?: number
 }