test(status-page): add Playwright PoC with landing page smoke test

.github/workflows/test.yml

@@ -58,3 +58,11 @@ jobs:
 
       - name: 🧪 Tests
         run: pnpm test
+
+      - name: 🎭 Install Playwright browsers
+        run: pnpm exec playwright install --with-deps chromium
+        working-directory: ./apps/status-page
+
+      - name: 🎭 Run E2E tests
+        run: pnpm e2e
+        working-directory: ./apps/status-page

apps/status-page/.gitignore

@@ -1 +1,6 @@
 .vercel
+
+# Playwright
+/test-results/
+/playwright-report/
+/playwright/.cache/

apps/status-page/e2e/smoke.spec.ts

@@ -0,0 +1,7 @@
+import { expect, test } from "@playwright/test";
+
+test("seeded status page renders for /acme/en", async ({ page }) => {
+  const response = await page.goto("/acme/en");
+  expect(response?.status()).toBe(200);
+  await expect(page.getByText("Acme Inc.")).toBeVisible();
+});

apps/status-page/package.json

@@ -9,6 +9,7 @@
     "start": "next start",
     "lint": "next lint",
     "test": "bun test",
+    "e2e": "playwright test",
     "tsc": "tsc --noEmit"
   },
   "dependencies": {
@@ -77,6 +78,7 @@
   },
   "devDependencies": {
     "@openstatus/tsconfig": "workspace:*",
+    "@playwright/test": "1.60.0",
     "@tailwindcss/postcss": "4.1.11",
     "@tailwindcss/typography": "0.5.10",
     "@types/dom-speech-recognition": "0.0.6",

apps/status-page/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const PORT = Number(process.env.PORT ?? 3003);
+const baseURL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: "list",
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  projects: [{ name: "chromium", use: { ...devices["Desktop Chrome"] } }],
+  webServer: {
+    command: "pnpm dev",
+    env: { PORT: String(PORT) },
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});