feat(playwright): reuse existing server

examples/app-playwright/nuxt.config.ts

@@ -1,6 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
+  compatibilityDate: '2024-07-11',
+  // TODO: Add to default options?
+  // https://nuxt.com/docs/api/nuxt-config#ignore
+  ignore: [
+    'playwright-report',
+    'test-results',
+  ],
   runtimeConfig: {
     public: {
       myValue: 'Welcome to Playwright!',

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 for test first development. */
+      reuseExistingServer: process.env.CI ? false : true,
       rootDir: fileURLToPath(new URL('.', import.meta.url)),
     },
   },

src/core/server.ts

@@ -14,6 +14,31 @@ export interface StartServerOptions {
   env?: Record<string, unknown>
 }
 
+/**
+ * Reuse an existing server if it's already running.
+ *
+ * This is useful to do test first development and speed up the test execution.
+ */
+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 (127.0.0.1 is not working)
+  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')
+  }
+
+  // TODO: To run against deployed server, maybe we should allow to change the protocol?
+  ctx.url = `http://${host}:${port}`
+}
+
+/**
+ * Start a new server.
+ *
+ * This server can be a dev server using the Nuxt CLI dev command or a production server using the Nuxt build output.
+ *
+ * During testing, it's recommended to reuse an existing server using `reuseExistingServer` setting. This will speed up the test execution and allow test first development.
+ */
 export async function startServer(options: StartServerOptions = {}) {
   const ctx = useTestContext()
   await stopServer()

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.fixture) {
+    if (ctx.options.reuseExistingServer) {
+      await reuseExistingServer()
+    }
+
+    if (ctx.options.fixture && !ctx.options.reuseExistingServer) {
       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(ctx.options.env)
     }
 

src/core/types.ts

@@ -12,6 +12,7 @@ export interface TestOptions {
   rootDir: string
   buildDir: string
   nuxtConfig: NuxtConfig
+  reuseExistingServer?: boolean
   build: boolean
   dev: boolean
   setupTimeout: number