feat: Playwright E2E tests — 5 critical flows, CI workflow

.github/workflows/e2e.yml

@@ -0,0 +1,77 @@
+name: E2E Tests
+
+on:
+  push:
+    tags: ["v*"]
+  workflow_dispatch:
+
+concurrency:
+  group: e2e-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    services:
+      postgres:
+        image: postgres:16
+        env:
+          POSTGRES_USER: vectorflow_e2e
+          POSTGRES_PASSWORD: e2e_test_password
+          POSTGRES_DB: vectorflow_e2e
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
+    env:
+      DATABASE_URL: postgresql://vectorflow_e2e:e2e_test_password@localhost:5432/vectorflow_e2e
+      NEXTAUTH_SECRET: e2e-test-secret-key-at-least-32-chars
+      NEXTAUTH_URL: http://localhost:3000
+      ENCRYPTION_KEY: e2e-test-encryption-key-32chars!!
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run database migrations
+        run: npx prisma migrate deploy
+
+      - name: Build application
+        run: pnpm build
+
+      - name: Install Playwright Chromium
+        run: npx playwright install chromium --with-deps
+
+      - name: Start server
+        run: pnpm start &
+
+      - name: Wait for server
+        run: npx wait-on http://localhost:3000 --timeout 60000
+
+      - name: Run E2E tests
+        run: pnpm test:e2e
+
+      - name: Upload test artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: |
+            playwright-report/
+            test-results/
+          retention-days: 7

.gitignore

@@ -57,8 +57,6 @@ next-env.d.ts
 # worktrees
 .worktrees/
 
-# ── GSD baseline (auto-generated) ──
-.gsd
 Thumbs.db
 *.swp
 *.swo
@@ -82,3 +80,10 @@ vendor/
 coverage/
 .cache/
 tmp/
+
+# playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+e2e/.auth/

e2e/docker-compose.e2e.yml

@@ -0,0 +1,16 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    environment:
+      POSTGRES_USER: vectorflow_e2e
+      POSTGRES_PASSWORD: e2e_test_password
+      POSTGRES_DB: vectorflow_e2e
+    ports:
+      - "5433:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U vectorflow_e2e"]
+      interval: 5s
+      timeout: 3s
+      retries: 5
+    tmpfs:
+      - /var/lib/postgresql/data

e2e/fixtures/test.fixture.ts

@@ -0,0 +1,50 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { test as base } from "@playwright/test";
+import { LoginPage } from "../pages/login.page";
+import { PipelinesPage } from "../pages/pipelines.page";
+import { PipelineEditorPage } from "../pages/pipeline-editor.page";
+import { FleetPage } from "../pages/fleet.page";
+import { AlertsPage } from "../pages/alerts.page";
+import { SidebarComponent } from "../pages/components/sidebar.component";
+import { ToastComponent } from "../pages/components/toast.component";
+import { DeployDialogComponent } from "../pages/components/deploy-dialog.component";
+
+interface E2EFixtures {
+  loginPage: LoginPage;
+  pipelinesPage: PipelinesPage;
+  pipelineEditor: PipelineEditorPage;
+  fleetPage: FleetPage;
+  alertsPage: AlertsPage;
+  sidebar: SidebarComponent;
+  toast: ToastComponent;
+  deployDialog: DeployDialogComponent;
+}
+
+export const test = base.extend<E2EFixtures>({
+  loginPage: async ({ page }, use) => {
+    await use(new LoginPage(page));
+  },
+  pipelinesPage: async ({ page }, use) => {
+    await use(new PipelinesPage(page));
+  },
+  pipelineEditor: async ({ page }, use) => {
+    await use(new PipelineEditorPage(page));
+  },
+  fleetPage: async ({ page }, use) => {
+    await use(new FleetPage(page));
+  },
+  alertsPage: async ({ page }, use) => {
+    await use(new AlertsPage(page));
+  },
+  sidebar: async ({ page }, use) => {
+    await use(new SidebarComponent(page));
+  },
+  toast: async ({ page }, use) => {
+    await use(new ToastComponent(page));
+  },
+  deployDialog: async ({ page }, use) => {
+    await use(new DeployDialogComponent(page));
+  },
+});
+
+export { expect } from "@playwright/test";

e2e/global-setup.ts

@@ -0,0 +1,39 @@
+import { test as setup } from "@playwright/test";
+import { PrismaClient } from "../src/generated/prisma";
+import { seed } from "./helpers/seed";
+import { cleanup } from "./helpers/cleanup";
+import { TEST_USER } from "./helpers/constants";
+
+const authFile = "e2e/.auth/user.json";
+
+setup("seed database and authenticate", async ({ page }) => {
+  const prisma = new PrismaClient();
+
+  try {
+    await cleanup(prisma);
+    const result = await seed(prisma);
+
+    const fs = await import("fs/promises");
+    await fs.mkdir("e2e/.auth", { recursive: true });
+    await fs.writeFile(
+      "e2e/.auth/seed-result.json",
+      JSON.stringify(result, null, 2),
+    );
+  } finally {
+    await prisma.$disconnect();
+  }
+
+  await page.goto("/login");
+  await page.getByRole("button", { name: /sign in/i }).waitFor({
+    state: "visible",
+    timeout: 15_000,
+  });
+
+  await page.getByRole("textbox", { name: /email/i }).fill(TEST_USER.email);
+  await page.locator('input[type="password"]').fill(TEST_USER.password);
+  await page.getByRole("button", { name: /sign in/i }).click();
+
+  await page.waitForURL((url) => !url.pathname.includes("/login"), { timeout: 15_000 });
+
+  await page.context().storageState({ path: authFile });
+});

e2e/global-teardown.ts

@@ -0,0 +1,11 @@
+import { PrismaClient } from "../src/generated/prisma";
+import { cleanup } from "./helpers/cleanup";
+
+export default async function globalTeardown(): Promise<void> {
+  const prisma = new PrismaClient();
+  try {
+    await cleanup(prisma);
+  } finally {
+    await prisma.$disconnect();
+  }
+}

e2e/helpers/cleanup.ts

@@ -0,0 +1,90 @@
+import { PrismaClient } from "../../src/generated/prisma";
+import { TEST_USER, TEST_TEAM } from "./constants";
+
+export async function cleanup(prisma: PrismaClient): Promise<void> {
+  const user = await prisma.user.findUnique({
+    where: { email: TEST_USER.email },
+  });
+  if (!user) return;
+
+  const team = await prisma.team.findFirst({
+    where: { name: TEST_TEAM.name },
+  });
+
+  if (team) {
+    const alertRules = await prisma.alertRule.findMany({
+      where: { teamId: team.id },
+      select: { id: true },
+    });
+    const alertRuleIds = alertRules.map((r) => r.id);
+
+    if (alertRuleIds.length > 0) {
+      await prisma.deliveryAttempt.deleteMany({
+        where: { alertEvent: { alertRuleId: { in: alertRuleIds } } },
+      });
+      await prisma.alertEvent.deleteMany({
+        where: { alertRuleId: { in: alertRuleIds } },
+      });
+      await prisma.alertRule.deleteMany({
+        where: { id: { in: alertRuleIds } },
+      });
+    }
+
+    const environments = await prisma.environment.findMany({
+      where: { teamId: team.id },
+      select: { id: true },
+    });
+    const envIds = environments.map((e) => e.id);
+
+    if (envIds.length > 0) {
+      await prisma.notificationChannel.deleteMany({
+        where: { environmentId: { in: envIds } },
+      });
+
+      const pipelines = await prisma.pipeline.findMany({
+        where: { environmentId: { in: envIds } },
+        select: { id: true },
+      });
+      const pipelineIds = pipelines.map((p) => p.id);
+
+      if (pipelineIds.length > 0) {
+        await prisma.pipelineEdge.deleteMany({
+          where: { pipelineId: { in: pipelineIds } },
+        });
+        await prisma.pipelineNode.deleteMany({
+          where: { pipelineId: { in: pipelineIds } },
+        });
+        await prisma.pipelineVersion.deleteMany({
+          where: { pipelineId: { in: pipelineIds } },
+        });
+        await prisma.pipeline.deleteMany({
+          where: { id: { in: pipelineIds } },
+        });
+      }
+
+      await prisma.vectorNode.deleteMany({
+        where: { environmentId: { in: envIds } },
+      });
+
+      await prisma.team.update({
+        where: { id: team.id },
+        data: { defaultEnvironmentId: null },
+      });
+
+      await prisma.environment.deleteMany({
+        where: { id: { in: envIds } },
+      });
+    }
+
+    await prisma.teamMember.deleteMany({
+      where: { teamId: team.id },
+    });
+    await prisma.team.delete({
+      where: { id: team.id },
+    });
+  }
+
+  await prisma.user.delete({
+    where: { id: user.id },
+  });
+}

e2e/helpers/constants.ts

@@ -0,0 +1,40 @@
+export const TEST_USER = {
+  email: "e2e@test.local",
+  password: "TestPassword123!",
+  name: "E2E Test User",
+} as const;
+
+export const TEST_TEAM = {
+  name: "E2E Test Team",
+} as const;
+
+export const TEST_ENVIRONMENT = {
+  name: "e2e-test-env",
+} as const;
+
+export const TEST_PIPELINE = {
+  name: "E2E Test Pipeline",
+  description: "Pipeline created by E2E seed script",
+} as const;
+
+export const TEST_NODE = {
+  name: "e2e-node-01",
+  host: "e2e-host-01.local",
+  apiPort: 8686,
+} as const;
+
+export const TEST_ALERT_RULE = {
+  name: "E2E Error Rate Alert",
+} as const;
+
+export const SELECTORS = {
+  sidebar: {
+    nav: '[data-slot="sidebar"]',
+    menuButton: (title: string) => `a:has(span:text("${title}"))`,
+  },
+  toast: {
+    container: '[data-sonner-toaster]',
+    success: '[data-type="success"]',
+    error: '[data-type="error"]',
+  },
+} as const;