test: component + e2e testing setup

e2e/about-page.test.ts

@@ -0,0 +1,10 @@
+import { expect, test } from '@nuxt/test-utils/playwright'
+
+test.beforeEach(async ({ goto }) => {
+  await goto('/about')
+})
+
+test('page: about - shows correct title', async ({ page }) => {
+  const headingContent = await page.textContent('h1')
+  await expect(headingContent).toContain('about me')
+})

package.json

@@ -6,6 +6,7 @@
     "build": "nuxt build",
     "dev": "nuxt dev",
     "test": "vitest",
+    "test:e2e": "playwright test -c playwright.config.ts",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"
@@ -24,11 +25,11 @@
   "devDependencies": {
     "@antfu/eslint-config": "^4.2.1",
     "@nuxt/test-utils": "^3.15.4",
+    "@playwright/test": "^1.50.1",
     "@tailwindcss/typography": "^0.5.16",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.20.1",
     "happy-dom": "^16.8.1",
-    "playwright-core": "^1.50.1",
     "vitest": "^3.0.5"
   }
 }

playwright.config.ts

@@ -0,0 +1,80 @@
+import type { ConfigOptions } from '@nuxt/test-utils/playwright'
+import { fileURLToPath } from 'node:url'
+import { defineConfig, devices } from '@playwright/test'
+import { isCI, isWindows } from 'std-env'
+
+export default defineConfig<ConfigOptions>({
+  testDir: './e2e',
+  testIgnore: '**/features/**',
+  fullyParallel: true,
+  forbidOnly: !!isCI,
+  retries: isCI ? 2 : 0,
+  workers: isCI ? 1 : undefined,
+  timeout: isWindows ? 60000 : undefined,
+  reporter: 'html',
+
+  use: {
+    // trace: 'on-first-retry',
+    nuxt: {
+      rootDir: fileURLToPath(new URL('.', import.meta.url)),
+    },
+  },
+  // ...
+  // projects: devicesToTest.map(p => typeof p === 'string' ? ({ name: p, use: devices[p] }) : p),
+})
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+/**
+ *
+export default defineConfig({
+  use: {
+    baseURL: 'http://localhost:3000',
+
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})
+
+ */

vitest.config.ts

@@ -1,9 +1,8 @@
 import { defineVitestConfig } from '@nuxt/test-utils/config'
 
-console.log('jojo')
-
 export default defineVitestConfig({
   test: {
     environment: 'nuxt',
+    exclude: ['**/e2e/**', '**/node_modules/**'],
   },
 })