test: add Playwright e2e coverage

.github/workflows/e2e.yml

@@ -0,0 +1,35 @@
+name: Frontend E2E
+
+on:
+  pull_request:
+    branches: ["dev"]
+  push:
+    branches: ["dev"]
+
+jobs:
+  playwright:
+    name: Playwright
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: frontend/package-lock.json
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Install Playwright browser
+        working-directory: frontend
+        run: npx playwright install --with-deps chromium
+
+      - name: Run Playwright E2E tests
+        working-directory: frontend
+        run: npm run test:e2e -- --reporter=list

README.md

@@ -494,6 +494,7 @@ docker compose up --build
 | `npm run dev` | Start **Next.js** dev server |
 | `npm run build` | Production build → `out/` (static export) |
 | `npm run lint` | Run ESLint |
+| `npm run test:e2e` | Run Playwright end-to-end tests |
 
 ### Docker
 

frontend/e2e/auth-and-chat.spec.ts

@@ -0,0 +1,130 @@
+import { expect, test, type Page } from "@playwright/test";
+
+const user = {
+  id: "user-1",
+  username: "tester",
+  email: "tester@example.com",
+  is_admin: false,
+  created_at: "2026-05-28T00:00:00Z",
+};
+
+const tokenResponse = {
+  access_token: "access-token",
+  refresh_token: "refresh-token",
+  token_type: "bearer",
+  user,
+};
+
+const uploadedDocument = {
+  id: "doc-1",
+  original_name: "notes.txt",
+  file_size: 11,
+  page_count: 1,
+  chunk_count: 1,
+  status: "ready",
+  error_message: null,
+  uploaded_at: "2026-05-28T00:00:00Z",
+};
+
+async function mockDashboardApis(page: Page, documents: typeof uploadedDocument[] = []) {
+  await page.route("**/api/v1/auth/me", async (route) => {
+    await route.fulfill({ json: user });
+  });
+
+  await page.route("**/api/v1/documents/", async (route) => {
+    await route.fulfill({
+      json: {
+        items: documents,
+        total: documents.length,
+        page: 1,
+        pages: documents.length > 0 ? 1 : 0,
+      },
+    });
+  });
+}
+
+test("logs in with email and password", async ({ page }) => {
+  await mockDashboardApis(page);
+  await page.route("**/api/v1/auth/login", async (route) => {
+    const body = route.request().postDataJSON() as { email: string };
+    expect(body.email).toBe(user.email);
+    await route.fulfill({ json: tokenResponse });
+  });
+
+  await page.goto("/login");
+  await page.locator("#login-email").fill(user.email);
+  await page.locator("#login-password").fill("password123");
+  await page.getByRole("button", { name: "Sign In" }).click();
+
+  await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(page.getByText("No documents yet")).toBeVisible();
+});
+
+test("creates an account from the signup form", async ({ page }) => {
+  await mockDashboardApis(page);
+  await page.route("**/api/v1/auth/register", async (route) => {
+    const body = route.request().postDataJSON() as { username: string; email: string };
+    expect(body.username).toBe(user.username);
+    expect(body.email).toBe(user.email);
+    await route.fulfill({ status: 201, json: tokenResponse });
+  });
+
+  await page.goto("/register");
+  await page.locator("#reg-username").fill(user.username);
+  await page.locator("#reg-email").fill(user.email);
+  await page.locator("#reg-password").fill("password123");
+  await page.getByRole("button", { name: "Create Account" }).click();
+
+  await expect(page).toHaveURL(/\/dashboard$/);
+  await expect(page.getByText("No documents yet")).toBeVisible();
+});
+
+test("uploads a document and chats with it", async ({ page }) => {
+  const documents: typeof uploadedDocument[] = [];
+
+  await page.addInitScript(() => {
+    localStorage.setItem("token", "access-token");
+    localStorage.setItem("refresh_token", "refresh-token");
+  });
+
+  await mockDashboardApis(page, documents);
+
+  await page.route("**/api/v1/documents/upload", async (route) => {
+    documents.push(uploadedDocument);
+    await route.fulfill({ status: 202, json: uploadedDocument });
+  });
+
+  await page.route("**/api/v1/chat/history/doc-1", async (route) => {
+    await route.fulfill({ json: { messages: [], document_id: "doc-1" } });
+  });
+
+  await page.route("**/api/v1/chat/ask/stream", async (route) => {
+    await route.fulfill({
+      status: 200,
+      headers: { "content-type": "text/event-stream" },
+      body: [
+        'data: {"type":"token","data":"A short"}\n\n',
+        'data: {"type":"token","data":" summary."}\n\n',
+        'data: {"type":"sources","data":[]}\n\n',
+        'data: {"type":"done"}\n\n',
+      ].join(""),
+    });
+  });
+
+  await page.goto("/dashboard");
+  await page.locator('input[type="file"]').setInputFiles({
+    name: "notes.txt",
+    mimeType: "text/plain",
+    buffer: Buffer.from("hello world"),
+  });
+
+  await expect(page.getByText("notes.txt")).toBeVisible();
+  await page.getByText("notes.txt").click();
+  await expect(page.getByText("Ask about your document")).toBeVisible();
+
+  await page.locator("#chat-input").fill("Summarize this document");
+  await page.locator("#send-btn").click();
+
+  await expect(page.getByText("Summarize this document")).toBeVisible();
+  await expect(page.getByText("A short summary.")).toBeVisible();
+});

frontend/package-lock.json

@@ -25,6 +25,7 @@
         "tw-animate-css": "^1.4.0"
       },
       "devDependencies": {
+        "@playwright/test": "^1.60.0",
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19",
@@ -2279,6 +2280,22 @@
       "integrity": "sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==",
       "license": "MIT"
     },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -5756,6 +5773,20 @@
         "node": ">=14.14"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -9303,6 +9334,38 @@
         "node": ">=16.20.0"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

frontend/package.json

@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint"
+    "lint": "eslint",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
   },
   "dependencies": {
     "@base-ui/react": "^1.4.1",
@@ -26,6 +28,7 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.60.0",
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",

frontend/playwright.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const port = Number(process.env.E2E_PORT ?? 3000);
+const baseURL = process.env.E2E_BASE_URL ?? `http://127.0.0.1:${port}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  timeout: 30_000,
+  expect: {
+    timeout: 5_000,
+  },
+  fullyParallel: true,
+  reporter: process.env.CI ? [["github"], ["list"]] : "list",
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  webServer: {
+    command: `npm run dev -- --hostname 127.0.0.1 --port ${port}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});