test: setup Playwright

.github/workflows/check.yml

@@ -31,3 +31,37 @@ jobs:
 
       - name: 🛠️ Generate static site
         run: pnpm generate
+
+  # run Playwright tests in parallel job to speed up workflow speed
+  playwright:
+    name: Run tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          cache: pnpm
+
+      - name: 📦 Install dependencies
+        run: pnpm install
+
+      # install system dependencies for Playwright
+      # see: https://playwright.dev/docs/browsers#install-system-dependencies
+      - name: 📦 Install Playwright system dependencies
+        run: pnpm exec playwright install-deps
+
+      - name: 🧪 Run tests
+        run: pnpm test:playwright
+
+      # upload report if tests failed for debugging
+      - uses: actions/upload-artifact@v4
+        if: ${{ failure() }}
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/

.gitignore

@@ -23,3 +23,7 @@ logs
 .env
 .env.*
 !.env.example
+
+# Tests
+playwright-report
+test-results

README.md

@@ -6,6 +6,7 @@ Additional features:
 
 - [nuxt i18n](https://nuxt.com/modules/i18n)
 - [eslint](https://nuxt.com/modules/eslint) and [prettier](https://prettier.io/) setup (also runs pre-commit)
+- [Playwright](https://playwright.dev) for testing
 - [Docker](https://www.docker.com) setup
 - GitHub action to check and build code in CI
 

eslint.config.mjs

@@ -1,6 +1,11 @@
 // @ts-check
+import playwright from "eslint-plugin-playwright";
 import withNuxt from "./.nuxt/eslint.config.mjs";
 
 export default withNuxt([
   // Your custom configs here
+  {
+    ...playwright.configs["flat/recommended"],
+    files: ["tests/**"],
+  },
 ]);

package.json

@@ -8,6 +8,7 @@
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "test:playwright": "playwright install && playwright test",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
@@ -23,6 +24,9 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "~0.3.10",
+    "@nuxt/test-utils": "^3.12.1",
+    "@playwright/test": "~1.43.1",
+    "eslint-plugin-playwright": "^1.6.0",
     "lint-staged": "^15.2.2",
     "prettier": "^3.2.5",
     "sass": "^1.76.0",

playwright.config.ts

@@ -0,0 +1,27 @@
+import type { ConfigOptions } from "@nuxt/test-utils/playwright";
+import { defineConfig, devices } from "@playwright/test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * Global Playwright configuration.
+ *
+ * @see https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig<ConfigOptions>({
+  testDir: "./tests",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  reporter: [["html", { open: "never" }]],
+  use: {
+    trace: process.env.CI ? "retain-on-failure" : "off",
+    video: process.env.CI ? "retain-on-failure" : "off",
+    nuxt: {
+      rootDir: fileURLToPath(new URL(".", import.meta.url)),
+    },
+  },
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+  ],
+});

tests/example.spec.ts

@@ -0,0 +1,6 @@
+import { expect, test } from "@nuxt/test-utils/playwright";
+
+test("example test", async ({ page, goto }) => {
+  await goto("/", { waitUntil: "hydration" });
+  await expect(page.getByRole("heading", { name: "Welcome to Nuxt!" })).toBeVisible();
+});