Test: Playwright E2E

Author: certainly-param

.github/workflows/ci.yml

@@ -35,3 +35,16 @@ jobs:
 
       - name: Test
         run: npm run test
+
+      - name: Install Playwright Chromium
+        run: npx playwright install --with-deps chromium
+
+      - name: E2E (Playwright)
+        run: npm run test:e2e
+        env:
+          CI: true
+          GOOGLE_GENERATIVE_AI_API_KEY: ${{ secrets.GOOGLE_GENERATIVE_AI_API_KEY || 'sk-dummy' }}
+          UPSTASH_REDIS_REST_URL: ${{ secrets.UPSTASH_REDIS_REST_URL || 'https://dummy.upstash.io' }}
+          UPSTASH_REDIS_REST_TOKEN: ${{ secrets.UPSTASH_REDIS_REST_TOKEN || 'dummy' }}
+          UPSTASH_VECTOR_REST_URL: ${{ secrets.UPSTASH_VECTOR_REST_URL || 'https://dummy.upstash.io' }}
+          UPSTASH_VECTOR_REST_TOKEN: ${{ secrets.UPSTASH_VECTOR_REST_TOKEN || 'dummy' }}

.gitignore

@@ -12,6 +12,10 @@
 
 # testing
 /coverage
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 # next.js
 /.next/

README.md

@@ -27,7 +27,7 @@
 - **Streaming Citations**: Citations stream before the answer for instant transparency
 - **Hybrid Runtime**: Edge for chat, Node.js for ingestion (optimal performance)
 - **Observability**: OpenTelemetry (ingest/retrieval spans), Langfuse (LLM traces, token usage)
-- **CI/CD & Testing**: GitHub Actions (lint, build, test), Vitest unit tests
+- **CI/CD & Testing**: GitHub Actions (lint, build, unit + E2E), Vitest, Playwright
 - **Docker**: Standalone image + docker-compose for local/self-hosted run
 - **Modern UI**: Beautiful, responsive chat interface with real-time streaming
 - **Optional gRPC Gateway**: Binary-efficient vector upsert/query sidecar (Proto + Node server)
@@ -106,6 +106,13 @@ graph TB
 
 6. **Open [http://localhost:3000](http://localhost:3000)**
 
+### E2E tests (Playwright)
+
+- **Scripts**: `npm run test:e2e` (starts the app on **port 3100** by default so it does not clash with `next dev` on 3000), `npm run test:e2e:ui` for the Playwright UI mode. Override with `PLAYWRIGHT_E2E_PORT` / `PLAYWRIGHT_BASE_URL`.
+- **CI**: After `npm run build`, the workflow installs Chromium and runs `npm run test:e2e`, which starts the **standalone** server (`node .next/standalone/server.js` on port 3100) because this app uses `output: "standalone"`. Only **smoke** tests run by default (no real Gemini/Upstash calls required for the UI checks).
+- **Full RAG E2E**: Set `E2E_FULL=1` and real API keys in the environment used by the Next server, add `e2e/fixtures/sample.pdf` (or `E2E_FIXTURE_PDF`), then run `npx playwright test e2e/optional-full-flow.spec.ts`.
+- **Preview deployments**: Run with `PLAYWRIGHT_SKIP_WEB_SERVER=1` and `PLAYWRIGHT_BASE_URL=https://your-preview.vercel.app`.
+
 ## How It Works
 
 ### 1. PDF Ingestion (Client-Side)
@@ -146,14 +153,16 @@ graph TB
 | **PDF Parsing** | `pdfjs-dist` | Client-side to avoid Edge limits |
 | **UI** | React + `@ai-sdk/react` | Streaming chat with citation support |
 | **Observability** | OpenTelemetry, Langfuse | Traces (ingest/retrieval), LLM generations & token usage |
-| **CI/CD** | GitHub Actions | Lint, build, test on push/PR |
-| **Testing** | Vitest | Unit tests (chunking, observability) |
+| **CI/CD** | GitHub Actions | Lint, build, unit + E2E on push/PR |
+| **Testing** | Vitest, Playwright | Unit tests; browser E2E (smoke + optional full RAG) |
 | **Containers** | Docker, docker-compose | Local/self-hosted run |
 
 ## Project Structure
 
 ```
 serverless-rag/
+├── e2e/                          # Playwright tests (smoke + optional full flow)
+├── playwright.config.ts          # Playwright + webServer (dev local / start in CI)
 ├── src/
 │   ├── app/
 │   │   ├── api/

e2e/fixtures/.gitkeep

@@ -0,0 +1,51 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import { expect, test } from "@playwright/test";
+
+/**
+ * End-to-end tests that call real `/api/ingest` and `/api/chat`.
+ * Not run in default CI (no production secrets). Enable locally or in a
+ * protected workflow with repository secrets.
+ *
+ *   E2E_FULL=1 npx playwright test e2e/optional-full-flow.spec.ts
+ *
+ * For ingest, place a small PDF at `e2e/fixtures/sample.pdf` or set E2E_FIXTURE_PDF to its path.
+ */
+const fullEnabled = process.env.E2E_FULL === "1";
+const fixturePath =
+  process.env.E2E_FIXTURE_PDF?.trim() ||
+  path.join(process.cwd(), "e2e", "fixtures", "sample.pdf");
+const hasFixture = fs.existsSync(fixturePath);
+
+test.describe("optional full RAG flow", () => {
+  if (!fullEnabled) {
+    return;
+  }
+
+  test("PDF upload shows completion or a clear error from the API", async ({ page }) => {
+    test.skip(
+      !hasFixture,
+      `Add a PDF at ${fixturePath} or set E2E_FIXTURE_PDF to a PDF path.`,
+    );
+
+    await page.goto("/");
+    await page.getByTestId("pdf-file-input").setInputFiles(fixturePath);
+
+    const uploader = page.getByTestId("pdf-uploader");
+    await expect(uploader).toContainText(
+      /Done\. Upserted|Upload failed|Ingestion failed|Rate limit|error|Error/i,
+      { timeout: 90_000 },
+    );
+  });
+
+  test("chat completes a turn when Gemini and Upstash are configured", async ({ page }) => {
+    await page.goto("/");
+    await page.getByTestId("chat-input").fill("Reply with a single word: ok");
+    await page.getByTestId("chat-send").click();
+
+    // `useChat` disables Send while streaming; re-enabled when the turn finishes
+    await expect(page.getByTestId("chat-send")).toBeEnabled({ timeout: 120_000 });
+    await expect(page.getByTestId("chat-messages")).toBeVisible();
+  });
+});

e2e/optional-full-flow.spec.ts

@@ -0,0 +1,22 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("smoke", () => {
+  test("home page renders core RAG UI", async ({ page }) => {
+    await page.goto("/");
+
+    await expect(page.getByTestId("app-title")).toHaveText("Serverless RAG Chatbot");
+
+    await expect(page.getByTestId("pdf-uploader")).toBeVisible();
+    await expect(page.getByTestId("pdf-file-input")).toBeAttached();
+
+    await expect(page.getByTestId("chat-input")).toBeVisible();
+    await expect(page.getByTestId("chat-send")).toBeEnabled();
+  });
+
+  test("user can type in chat and submit is wired", async ({ page }) => {
+    await page.goto("/");
+    const input = page.getByTestId("chat-input");
+    await input.fill("Hello from Playwright");
+    await expect(input).toHaveValue("Hello from Playwright");
+  });
+});

e2e/smoke.spec.ts

@@ -25,3 +25,15 @@ UPSTASH_VECTOR_REST_TOKEN=
 # LANGFUSE_SECRET_KEY=
 # LANGFUSE_BASE_URL=https://cloud.langfuse.com
 
+## Playwright E2E (optional)
+# CI runs smoke tests against a local `next start` server (see playwright.config.ts).
+# Full-stack tests: set E2E_FULL=1 and use real keys in the env for the Next server.
+# E2E_FULL=1
+# Optional path to a PDF for ingest E2E (default: e2e/fixtures/sample.pdf)
+# E2E_FIXTURE_PDF=
+# Point Playwright at an already-running app (skip auto webServer)
+# PLAYWRIGHT_SKIP_WEB_SERVER=1
+# Default E2E app URL is http://127.0.0.1:3100 (see playwright.config.ts)
+# PLAYWRIGHT_E2E_PORT=3100
+# PLAYWRIGHT_BASE_URL=http://127.0.0.1:3100
+