test: add e2e test (#25)

* setup e2e and add test job in pipeline

* revert deploy and test

* Revert "revert deploy and test"

This reverts commit cf8ebee.

* fix lint

* use pnpm in e2e job

* move pnpm before setup nodejs

* add html reporter

* install playwright deps properly in gitpod and pipeline

* properly assert against screenshots

* adjust dependencies a bit

* fix spelling

* disable animations for screenshots

* add diff pixel ratio to screenshots

---------

Co-authored-by: mariusheine <[email protected]>

Author: hmathavan

.cspell.json

@@ -7,7 +7,8 @@
     ".vscode/settings.json",
     ".cspell.json",
     ".nuxt",
-    "pnpm-lock.yaml"
+    "pnpm-lock.yaml",
+    "playwright-report"
   ],
   "words": [
     "dprint",
@@ -21,6 +22,10 @@
       "language": "de,en",
       "words": [
       ]
+    },
+    {
+      "filename": ["package.json"],
+      "words": ["libatk1.0-0", "libatk-bridge2.0-0", "libcups2", "libxkbcommon0", "libatspi2.0-0", "libxcomposite1", "libxdamage1", "libxfixes3", "libxrandr2", "libgbm1"]
     }
   ]
 }

.github/workflows/deploy.yaml

@@ -1,12 +1,11 @@
 name: Deploy
 
 on:
-  pull_request:
-    branches:
-      - main
-  push:
-    branches:
-      - main
+  workflow_run:
+    workflows: [Tests]
+    types:
+      - completed
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
 
 jobs:
   build:

.github/workflows/tests.yaml

@@ -1,6 +1,11 @@
 name: Tests
-
-on: push
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
 
 jobs:
   lint:
@@ -41,3 +46,39 @@ jobs:
         with:
           run_install: true
       - run: pnpm spelling
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: false
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright browsers and system dependencies
+        run: pnpm playwright:install
+
+      - name: Run Playwright tests
+        run: pnpm test:e2e
+
+      - name: Upload Playwright Test Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -24,3 +24,8 @@ logs
 .env
 .env.*
 !.env.example
+
+# playwright report
+playwright-report/
+test-results/
+

.gitpod.yml

@@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: pnpm install && pnpm run build
+    command: pnpm run dev

e2e/tests/navigation.test.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '@nuxt/test-utils/playwright';
+
+test.describe('Page Navigation', () => {
+  test('should navigate to the Start page on click', async ({ page }) => {
+    await page.goto('/');
+    await page.click('text="Start page"');
+    await expect(page).toHaveURL('/');
+    await expect(page).toHaveScreenshot('start-page.png');
+  });
+
+  test('should navigate to the Other page on click', async ({ page }) => {
+    await page.goto('/');
+    await page.click('text="Other page"');
+    await expect(page).toHaveURL('/other');
+    await expect(page).toHaveScreenshot('other-page.png');
+  });
+});

e2e/tests/navigation.test.ts-snapshots/other-page-linux.png

@@ -10,4 +10,11 @@ tasks:
       pnpm install
       nvm alias default 22
       echo "nvm use default &>/dev/null" >> ~/.bashrc.d/51-nvm-fix
+      gp sync-done install
     command: pnpm dev
+
+  - name: Playwright install
+    before: |
+      gp sync-await install
+      pnpm playwright:install
+      exit 0

e2e/tests/navigation.test.ts-snapshots/start-page-linux.png

@@ -14,7 +14,9 @@
     "spelling": "cspell lint --no-progress '**'",
     "typecheck": "nuxt typecheck",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "test:e2e": "playwright test",
+    "playwright:install": "playwright install && sudo apt-get install libatk1.0-0 libatk-bridge2.0-0 libcups2 libxkbcommon0 libatspi2.0-0 libxcomposite1 libxdamage1 libxfixes3 libxrandr2 libgbm1"
   },
   "dependencies": {
     "@nuxt/ui": "3.1.0",
@@ -25,9 +27,14 @@
   "devDependencies": {
     "@antfu/eslint-config": "4.13.3",
     "@cspell/dict-de-de": "4.1.0",
+    "@nuxt/test-utils": "3.19.1",
+    "@playwright/test": "1.53.0",
+    "@vue/test-utils": "2.4.6",
     "cspell": "9.0.1",
     "eslint": "9.28.0",
     "eslint-plugin-format": "1.0.1",
+    "happy-dom": "18.0.1",
+    "vitest": "3.2.3",
     "vue-tsc": "2.2.10"
   }
 }