test(app): initial e2e test setup

5 files changed, 72 insertions, 1 deletions

diff --git a/packages/app/.gitignore b/packages/app/.gitignore
index 4a20d55a7..d699efb38 100644
--- a/packages/app/.gitignore
+++ b/packages/app/.gitignore
@@ -1 +1,3 @@
 src/assets/theme.css
+e2e/test-results
+e2e/playwright-report
diff --git a/packages/app/README.md b/packages/app/README.md
index bd10e6c8d..42a688150 100644
--- a/packages/app/README.md
+++ b/packages/app/README.md
@@ -29,6 +29,21 @@ It correctly bundles Solid in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 
+## E2E Testing
+
+The Playwright runner expects the app already running at `http://localhost:3000`.
+
+```bash
+bun add -D @playwright/test
+bunx playwright install
+bun run test:e2e
+```
+
+Environment options:
+
+- `PLAYWRIGHT_BASE_URL` (default: `http://localhost:3000`)
+- `PLAYWRIGHT_PORT` (default: `3000`)
+
 ## Deployment
 
 You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
diff --git a/packages/app/e2e/home.spec.ts b/packages/app/e2e/home.spec.ts
new file mode 100644
index 000000000..ff57923d5
--- /dev/null
+++ b/packages/app/e2e/home.spec.ts
@@ -0,0 +1,6 @@
+import { test, expect } from "@playwright/test"
+
+test("home shows recent projects header", async ({ page }) => {
+  await page.goto("/")
+  await expect(page.getByText("Recent projects")).toBeVisible()
+})
diff --git a/packages/app/package.json b/packages/app/package.json
index 38d9a25f5..2a754c967 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -12,11 +12,16 @@
     "start": "vite",
     "dev": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "test": "playwright test",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:report": "playwright show-report e2e/playwright-report"
   },
   "license": "MIT",
   "devDependencies": {
     "@happy-dom/global-registrator": "20.0.11",
+    "@playwright/test": "1.57.0",
     "@tailwindcss/vite": "catalog:",
     "@tsconfig/bun": "1.0.9",
     "@types/bun": "catalog:",
diff --git a/packages/app/playwright.config.ts b/packages/app/playwright.config.ts
new file mode 100644
index 000000000..10819e69f
--- /dev/null
+++ b/packages/app/playwright.config.ts
@@ -0,0 +1,43 @@
+import { defineConfig, devices } from "@playwright/test"
+
+const port = Number(process.env.PLAYWRIGHT_PORT ?? 3000)
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? `http://localhost:${port}`
+const serverHost = process.env.PLAYWRIGHT_SERVER_HOST ?? "localhost"
+const serverPort = process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"
+const command = `bun run dev -- --host 0.0.0.0 --port ${port}`
+const reuse = !process.env.CI
+
+export default defineConfig({
+  testDir: "./e2e",
+  outputDir: "./e2e/test-results",
+  timeout: 60_000,
+  expect: {
+    timeout: 10_000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [["html", { outputFolder: "e2e/playwright-report", open: "never" }], ["line"]],
+  webServer: {
+    command,
+    url: baseURL,
+    reuseExistingServer: reuse,
+    timeout: 120_000,
+    env: {
+      VITE_OPENCODE_SERVER_HOST: serverHost,
+      VITE_OPENCODE_SERVER_PORT: serverPort,
+    },
+  },
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+    screenshot: "only-on-failure",
+    video: "retain-on-failure",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+})