test: add playwright end to end test

.github/workflows/playwright.yml

@@ -0,0 +1,47 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+      - name: List repo structure
+        run: ls -R
+      #backend setup and start
+      - name: Install backend dependencies
+        working-directory: backend
+        run: pip install -r requirements.txt
+
+      #frontend setup and run
+      - name: Setup pnpm
+        run: npm install -g pnpm
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: pnpm install
+
+      #Playwright setup and run tests
+      - name: Install Playwright Browsers
+        working-directory: frontend
+        run: pnpm exec playwright install --with-deps
+
+      - name: Run Playwright tests
+        working-directory: frontend
+        run: pnpm exec playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 30

README.md

@@ -16,10 +16,14 @@ cd fastapi-vue-spa-boilerplate
 # Backend
 cd backend && source .venv/bin/activate && uvicorn app.main:app --reload
 
-# Frontend  
+# Frontend
 cd frontend && pnpm dev
+
+# E2E testing
+cd frontend && pnpm test:e2e
+
 ```
 
 - Frontend: http://localhost:3000
 - Backend: http://localhost:8000
-- API Docs: http://localhost:8000/docs
+- API Docs: http://localhost:8000/docs

frontend/.gitignore

@@ -22,3 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

frontend/e2e/homepage.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from "@playwright/test";
+
+test("should display the correct page title", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page).toHaveTitle("Vite + Vue + TS");
+});
+
+test("should display backend health status", async ({ page }) => {
+  await page.goto("/");
+
+  const healthStatus = page.getByRole("paragraph");
+  await expect(healthStatus).toHaveText(
+    'Health: {"status":"healthy","message":"FastAPI backend is running","environment":"development","version":"1.0.0"}',
+  );
+});

frontend/package.json

@@ -3,12 +3,14 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "vite build"
+    "build": "vite build",
+    "test:e2e": "pnpm exec playwright test"
   },
   "dependencies": {
     "vue": "^3.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.59.1",
     "@types/node": "^24.3.0",
     "@vitejs/plugin-vue": "^4.5.0",
     "@vue/tsconfig": "^0.8.1",

frontend/playwright.config.ts

@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+import path from "path";
+
+const absolutePathBackend = path.resolve(__dirname, "../backend");
+
+export default defineConfig({
+  testDir: "./e2e",
+
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL: "http://127.0.0.1:5173",
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+
+  /*   Run your local dev server before starting the tests*/
+  webServer: [
+    {
+      command: `cd ${absolutePathBackend} && uvicorn app.main:app --host 127.0.0.1 --port 8000`,
+      url: "http://127.0.0.1:8000",
+    },
+    {
+      command: "pnpm dev --host 0.0.0.0",
+      url: "http://127.0.0.1:5173",
+    },
+  ],
+});

frontend/pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true