feat : configure playwright e2e testing and integrate into CI

.github/workflows/ci.yml

@@ -27,3 +27,27 @@ jobs:
       - run: pnpm typecheck
       - run: pnpm test
       - run: pnpm build
+
+  e2e:
+    runs-on: ubuntu-latest
+    env:
+      AUTH_SECRET: some-dummy-secret-for-ci
+      AUTH_TRUST_HOST: "true"
+      TURSO_DATABASE_URL: file:local.db
+    steps:
+      - uses: actions/checkout@v7
+
+      - uses: pnpm/action-setup@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright Chromium Browser
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run E2E Smoke Tests
+        run: pnpm test:e2e

.gitignore

@@ -10,7 +10,8 @@
 
 # testing
 /coverage
-
+/playwright-report
+/test-results
 # next.js
 /.next/
 /out/

e2e/smoke.spec.ts

@@ -0,0 +1,28 @@
+import { test, expect } from "@playwright/test";
+
+test("should load app, click analyze on default snippet, and render call graph nodes", async ({ page }) => {
+  // 1. Visit the app in English locale
+  await page.goto("/en/app");
+
+  // 2. Locate the textarea for code input and verify it is visible
+  const textarea = page.locator("textarea");
+  await expect(textarea).toBeVisible();
+
+  // 3. Click the "Analyze" button (using the default Python sample code)
+  const analyzeBtn = page.getByRole("button", { name: /^Analyze$/ });
+  await expect(analyzeBtn).toBeEnabled();
+  await analyzeBtn.click();
+
+  // 4. Assert that the React Flow workspace container is rendered
+  const reactFlow = page.locator(".react-flow");
+  await expect(reactFlow).toBeVisible();
+
+  // 5. Assert that we successfully render 6 nodes (1 file container + 5 defined functions)
+  const nodes = page.locator(".react-flow__node");
+  await expect(nodes).toHaveCount(6);
+
+  // 6. Verify key node labels contain our function names and container file
+  await expect(page.locator(".react-flow__node", { hasText: "snippet.py" })).toBeVisible();
+  await expect(page.locator(".react-flow__node", { hasText: "main" })).toBeVisible();
+  await expect(page.locator(".react-flow__node", { hasText: "clean" })).toBeVisible();
+});

package.json

@@ -16,6 +16,8 @@
     "lint": "eslint",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
     "format": "prettier --write .",
@@ -43,6 +45,7 @@
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@playwright/test": "^1.61.0",
     "@types/dagre": "^0.7.54",
     "@types/node": "^26",
     "@types/react": "^19",

playwright.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from "@playwright/test";
+
+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",
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    stdout: "ignore",
+    stderr: "pipe",
+    env: {
+      AUTH_TRUST_HOST: "true",
+      AUTH_SECRET: "some-dummy-secret-for-e2e",
+    },
+  },
+  use: {
+    baseURL: "http://localhost:3000",
+    trace: "on",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+});