test: add Playwright e2e for playgrounds (dev + built)

.github/workflows/e2e.yml

@@ -0,0 +1,42 @@
+name: e2e
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    paths-ignore:
+      - 'docs/**'
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+      - run: npm install -g corepack@latest
+      - run: corepack enable
+      - run: pnpm install
+      - run: pnpm build
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+      - run: pnpm exec playwright install --with-deps chromium
+      # Playgrounds load `@nuxt/devtools` (built) by default. They only switch
+      # to `../../local` (which spawns a Nuxt dev subprocess for HMR on the
+      # devtools client) when `NUXT_DEVTOOLS_LOCAL` is set, which we don't
+      # set in CI — that subprocess doesn't reliably finish on cold runners.
+      - run: pnpm test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: tests/e2e/playwright-report/
+          retention-days: 7

.gitignore

@@ -37,6 +37,12 @@ coverage
 *.lcov
 .nyc_output
 
+# Playwright
+playwright-report
+test-results
+tests/e2e/playwright-report
+tests/e2e/test-results
+
 # Intellij idea
 *.iml
 .idea
@@ -61,3 +67,4 @@ packages/devtools/client/public/discovery/index.html
 **/skills/npm-*
 
 .context
+.claude

local.ts

@@ -17,6 +17,11 @@ import type { ModuleOptions } from './packages/devtools/src/types'
  *   ]
  * })
  * ```
+ *
+ * The bundled playgrounds in this repo opt in via the `NUXT_DEVTOOLS_LOCAL`
+ * environment variable: when set to a truthy value, their `nuxt.config.ts`
+ * loads `../../local` instead of the published `@nuxt/devtools`. Leave it
+ * unset to test against the built package.
  */
 import { defineNuxtModule, extendViteConfig, logger } from '@nuxt/kit'
 import { getPort } from 'get-port-please'

package.json

@@ -14,6 +14,12 @@
     "lint": "eslint --cache .",
     "release": "pnpm test && bumpp -r --all",
     "test": "pnpm lint",
+    "test:e2e": "pnpm test:e2e:dev && pnpm test:e2e:built",
+    "test:e2e:all": "pnpm test:e2e:prebuild && playwright test --config tests/e2e/playwright.config.ts",
+    "test:e2e:dev": "PW_PROJECT='*:dev' playwright test --config tests/e2e/playwright.config.ts",
+    "test:e2e:built": "pnpm test:e2e:prebuild && PW_PROJECT='*:built' playwright test --config tests/e2e/playwright.config.ts",
+    "test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
+    "test:e2e:ui": "playwright test --config tests/e2e/playwright.config.ts --ui",
     "docs": "nuxi dev docs",
     "docs:build": "CI=true nuxi generate docs",
     "typecheck": "vue-tsc --noEmit",
@@ -28,6 +34,7 @@
     "@nuxt/eslint": "catalog:cli",
     "@nuxt/module-builder": "catalog:buildtools",
     "@nuxt/schema": "catalog:types",
+    "@playwright/test": "catalog:cli",
     "@types/markdown-it": "catalog:types",
     "@types/node": "catalog:types",
     "@types/semver": "catalog:types",

playgrounds/empty/nuxt.config.ts

@@ -1,8 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
-    // '../../local',
-    '@nuxt/devtools',
+    devtoolsModule,
   ],
 
   compatibilityDate: '2024-09-19',

playgrounds/tab-layers/nuxt.config.ts

@@ -1,7 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
-    '../../local',
+    devtoolsModule,
   ],
 
   extends: [

playgrounds/tab-pinia/nuxt.config.ts

@@ -2,12 +2,14 @@ import { createResolver } from '@nuxt/kit'
 
 const resolver = createResolver(import.meta.url)
 
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   css: ['~/assets/main.css'],
 
   modules: [
     '../../packages/devtools-ui-kit/src/module',
-    '../../local',
+    devtoolsModule,
     '@pinia/nuxt',
   ],
 

playgrounds/tab-seo/nuxt.config.ts

@@ -1,7 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
     '../../packages/devtools-ui-kit/src/module',
-    '../../local',
+    devtoolsModule,
   ],
 })

playgrounds/tab-server-route/nuxt.config.ts

@@ -1,8 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
     '../../packages/devtools-ui-kit/src/module',
-    '../../local',
+    devtoolsModule,
     './modules/custom-module',
   ],
 })

playgrounds/tab-timeline/nuxt.config.ts

@@ -1,8 +1,10 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
     '../../packages/devtools-ui-kit/src/module',
-    '../../local',
+    devtoolsModule,
   ],
   ssr: true,
   vite: {

playgrounds/v4/nuxt.config.ts

@@ -1,7 +1,9 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
+const devtoolsModule = process.env.NUXT_DEVTOOLS_LOCAL ? '../../local' : '@nuxt/devtools'
+
 export default defineNuxtConfig({
   modules: [
-    '../../local',
+    devtoolsModule,
   ],
 
   compatibilityDate: '2024-09-19',