test: add basic e2e snapshot test to catch visual regressions (#1055)

.github/workflows/autofix.yml

@@ -0,0 +1,30 @@
+name: autofix.ci
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - run: corepack enable
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: "pnpm"
+
+      - run: pnpm install
+
+      - run: pnpm exec playwright install
+
+      - run: pnpm prepare
+
+      - name: Browser tests
+        run: pnpm test:browser --update-snapshots
+
+      - uses: autofix-ci/action@ff86a557419858bb967097bfc916833f5647fa8c

.github/workflows/ci.yml

@@ -4,34 +4,25 @@ on:
   push:
     branches:
       - main
-  pull_request:
-    types: [opened, synchronize]
-    branches:
-      - main
 
 jobs:
-  build:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest] # macos-latest, windows-latest
-        node: [18]
+  test:
+    runs-on: ubuntu-latest
 
     steps:
       - uses: actions/checkout@v4
       - run: corepack enable
 
       - uses: actions/setup-node@v4
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 18
           cache: "pnpm"
 
-      - name: Install dependencies
-        run: pnpm install
+      - run: pnpm install
+
+      - run: pnpm exec playwright install
 
-      - name: Build
-        run: pnpm prepare
+      - run: pnpm prepare
 
-      - name: Build
-        run: pnpm build
+      - name: Browser tests
+        run: pnpm test:browser

.gitignore

@@ -22,3 +22,6 @@ dist
 .starters/**/yarn.lock
 .starters/**/package-lock.json
 .starters/**/pnpm-lock.yaml
+
+test-results
+.pnpm-store

package.json

@@ -26,7 +26,9 @@
     "generate": "nuxi generate .starters/default",
     "preview": "nuxi preview .starters/default",
     "lint": "eslint .",
-    "release": "release-it"
+    "release": "release-it",
+    "test:browser": "playwright test test/browser",
+    "test:browser:update": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.48.0-focal bash -c 'corepack enable && pnpm i && pnpm playwright test test/browser --update-snapshots'"
   },
   "dependencies": {
     "@nuxt-themes/elements": "^0.9.5",
@@ -48,13 +50,16 @@
     "@docsearch/js": "^3.6.3",
     "@nuxt/devtools": "^1.6.0",
     "@nuxt/eslint-config": "^0.6.1",
+    "@nuxt/test-utils": "^3.14.4",
     "@nuxtjs/algolia": "^1.10.2",
+    "@playwright/test": "^1.48.2",
     "@types/node": "^22.8.7",
     "eslint": "^9.14.0",
     "nuxt": "^3.14.159",
     "release-it": "^17.10.0",
     "typescript": "^5.6.3",
     "vite-plugin-inspect": "^0.8.7",
+    "vitest": "^2.1.4",
     "vue": "^3.5.12"
   },
   "pnpm": {

playwright.config.ts

@@ -0,0 +1,12 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from '@playwright/test'
+import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+
+export default defineConfig<ConfigOptions>({
+  timeout: 120000,
+  use: {
+    nuxt: {
+      rootDir: fileURLToPath(new URL('.starters/default', import.meta.url))
+    },
+  },
+})