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

[omonicrown]

Refs #1610.

PoC for the E2E framework discussion in #1610. Adds Playwright with a single passing smoke test in apps/status-page so the framework choice can be approved or rejected before any wider investment.

Why this scope

• Playwright over Cypress: TypeScript-first API matches the codebase, built-in test runner avoids extra deps, faster and more reliable in CI, cross-browser including WebKit.
• apps/status-page over apps/web: per @mxkaske's note in E2E Testing for Dashboard, Web and Status Page #1610 ("the critical app is the status page").
• One test, one browser: chromium only (~280 MB cache vs ~700 MB for all three). No auth, no monitor flows, no CI changes — those are explicit follow-ups once the framework is approved.

Files

• apps/status-page/playwright.config.ts — chromium-only, webServer boots pnpm dev on port 3003, reuseExistingServer locally
• apps/status-page/e2e/smoke.spec.ts — navigates to /, asserts title matches /Status Page/
• apps/status-page/package.json — @playwright/test devDep + "e2e": "playwright test" script
• apps/status-page/.gitignore — Playwright artifact dirs

How to verify

cd apps/status-page
pnpm install
pnpm exec playwright install chromium
pnpm e2e
Expected: 1 passed.

[vercel]

@omonicrown is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

[cubic-dev-ai]

2 issues found across 5 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/status-page/package.json">

<violation number="1" location="apps/status-page/package.json:81">
P2: `@playwright/test` is added with a range (`^1.60.0`) instead of an exact pinned version, violating the team's reproducible-dependency policy.</violation>
</file>

<file name="apps/status-page/playwright.config.ts">

<violation number="1" location="apps/status-page/playwright.config.ts:18">
P2: POSIX env syntax in Playwright webServer.command breaks on Windows; use webServer.env instead</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
Re-trigger cubic}

[mxkaske]

thanks for the pr, will have a closer look next week!

[mxkaske]

@claude review

[claude]

Claude finished @mxkaske's task in 2m 19s —— View job

---

Code Review

• Read changed files
• Assess existing review comments from cubic-dev-ai
• Provide comprehensive review feedback

---

Overall: Well-scoped PoC. The framework choice (Playwright) and the target app (apps/status-page) are both well-justified. The smoke test correctly targets the root route — metadata.ts sets the default title to "Status Page", so the assertion will hold. Two issues worth fixing before merge.

---

Issues to fix

1. Unpinned version — apps/status-page/package.json:81

The existing project convention is exact versions for all devDependencies. ^1.60.0 is the one outlier here.

- "@playwright/test": "^1.60.0",
+ "@playwright/test": "1.60.0",

Fix this →

---

2. POSIX env syntax in webServer.command — apps/status-page/playwright.config.ts:18

PORT=${PORT} pnpm dev is shell-specific and breaks on Windows. Playwright's webServer has a dedicated env field for this:

// before
command: `PORT=${PORT} pnpm dev`,

// after
command: "pnpm dev",
env: { PORT: String(PORT) },

Fix this →

---

Observations (non-blocking)

Lockfile churn is cosmetic: The 94+/155- diff in pnpm-lock.yaml is entirely peer-dependency resolution noise — Next.js has an optional peer on @playwright/test, so adding it to apps/status-page causes pnpm to embed it in every next-dependent resolution string. No actual packages change; this is expected behavior.

Reporter: "list" works fine, but when CI integration is added as a follow-up, consider reporter: process.env.CI ? "github" : "list" for inline GitHub annotations.

Retries: retries: 2 in CI is generous for a smoke test — 1 is usually enough, but not a blocker for a PoC.

---

The two fixes above are straightforward — the rest of the setup (config structure, gitignore entries, test scope) looks good.

[omonicrown]

Hello @mxkaske . Still awaiting your action. Thanks.

[mxkaske]

Hey @omonicrown, apologies for the late response - we had a conference this week.

The POC works.

I wonder if we can add a few more things (either via stacked PR or within here directly):

• it currently hits the marketing "Theme Explorer" page and not a status page itself
• it requires a real db connection to the seeded data (e.g. /acme/en) and hitting a real example
• it could be wired into the test.yaml reusing the existing libsql seed

Let me know if you have questions.

[omonicrown]

Hello @mxkaske .

Thanks for the feedback! Updated in the latest push:

1.) Test now hits /acme/en (the seeded Acme Inc. status page) instead of the Theme Explorer
2.) Added Playwright install + pnpm e2e steps to test.yml after the existing seed step — reuses the sqld service and seed that's already there.

To run locally: start turso dev and seed the DB first (same steps as the existing unit tests), then pnpm e2e from apps/status-page.