Merge pull request #44 from zz-plant/codex/set-up-playwright-cli-with-typescript

Add Playwright smoke tests and CI workflow

Author: zz-plant

.github/workflows/playwright.yml

@@ -0,0 +1,29 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Build site for preview
+      run: npm run build
+    - name: Run Playwright tests
+      run: npm run e2e:ci
+    - uses: actions/upload-artifact@v4
+      if: ${{ !cancelled() }}
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -4,3 +4,10 @@ node_modules
 /.vercel
 .env
 .DS_Store
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/

README.md

@@ -3,16 +3,28 @@
 This repository powers [ethotechnics.org](https://ethotechnics.org), a content-driven site exploring ethical technology, human-centered design, and the sociotechnical systems that shape them. The project favors lean, fast-loading pages and clear storytelling.
 
 ## Getting started
+
 1. Install dependencies: `npm install`
 2. Run the dev server: `npm run dev`
 3. Build the Worker bundle: `npm run build` (optionally preview with `npm run preview`).
 
 ## Checks before committing
+
 Use `npm run check` for a full pre-commit sweep. It will run linting, tests, TypeScript checks, and Astro's checker (skipping any step that is not configured).
+
+## End-to-end tests
+
+- `npm run e2e` builds the Worker bundle and runs Playwright against `npm run preview`.
+- Override the preview target with `PLAYWRIGHT_BASE_URL` (defaults to `http://127.0.0.1:4321`).
+- CI uses `npm run e2e:ci` and publishes the Playwright HTML report as a workflow artifact.
+
 ### Environment configuration
+
 - Copy `.env.example` to `.env.local` for local development. Astro automatically loads `.env`, `.env.local`, and environment-specific files (such as `.env.development`).
 - No environment variables are required today, but add new entries to `.env.example` if the project adopts external services.
+
 ## Quickstart for agents
+
 - **Prerequisites:** Node.js 20+ with npm (project uses `package-lock.json`), Git, and a shell with `npm` on PATH.
 - **Dev server:** `npm run dev`
   - Expected log snippet: `[@astrojs/compiler] ready` followed by `Local  http://localhost:4321/`.
@@ -23,6 +35,7 @@ Use `npm run check` for a full pre-commit sweep. It will run linting, tests, Typ
 - If commands are slow or fail, confirm Node version with `node -v` and reinstall dependencies via `rm -rf node_modules && npm install`.
 
 ## Deployment to Cloudflare Workers
+
 The site uses the official Cloudflare adapter for Astro to produce a Worker-compatible server build.
 
 `wrangler.toml` captures the Worker name, compatibility date, and entrypoint (`dist/_worker.js`). Session storage is not enabled by default; if you add it later, define the KV binding in `wrangler.toml` before deploying.
@@ -36,15 +49,18 @@ The site uses the official Cloudflare adapter for Astro to produce a Worker-comp
 5. Configure DNS for `ethotechnics.org` to point to the Cloudflare Worker route you set in Wrangler.
 
 ## Tech stack
+
 - [Astro 5](https://astro.build) with strict TypeScript defaults
 - React island for the navigation, hydrated on load
 - Cloudflare Worker adapter for server output
 - Modern, responsive styling with a focus on accessibility and contrast
 
 ## Staying updated
+
 - Subscribe to the RSS feed at [`/rss.xml`](https://ethotechnics.org/rss.xml) to catch new pages and updates as they ship.
 
 ## Where things live
+
 - `src/pages`: Astro routes, starting with [`src/pages/index.astro`](src/pages/index.astro) for the homepage content.
 - `src/layouts`: Shared layouts such as [`src/layouts/BaseLayout.astro`](src/layouts/BaseLayout.astro), which wires global SEO, fonts, and the navigation shell.
 - `src/components`: Interactive islands like the navigation React component in [`src/components/Navigation.tsx`](src/components/Navigation.tsx).

package-lock.json

@@ -13,7 +13,9 @@
     "typecheck": "tsc --noEmit",
     "check": "npm run lint --if-present && npm test --if-present && npm run typecheck --if-present && npm run astro:check",
     "test": "vitest",
-    "test:ci": "vitest --run --coverage"
+    "test:ci": "vitest --run --coverage",
+    "e2e": "npm run build && npx playwright test",
+    "e2e:ci": "npm run build && npx playwright test --reporter=line"
   },
   "dependencies": {
     "@astrojs/cloudflare": "^12.6.12",
@@ -33,7 +35,9 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
+    "@playwright/test": "^1.57.0",
     "@types/jsdom": "^27.0.0",
+    "@types/node": "^24.10.1",
     "@vitest/coverage-v8": "^4.0.15",
     "jsdom": "^27.2.0",
     "typescript": "^5.9.3",

package.json

@@ -0,0 +1,36 @@
+import { defineConfig, devices } from "@playwright/test";
+
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? "http://127.0.0.1:4321";
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: "html",
+  use: {
+    baseURL,
+    trace: "on-first-retry",
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+  ],
+  webServer: {
+    command: "npm run preview -- --host 0.0.0.0 --port 4321",
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

playwright.config.ts

@@ -0,0 +1,49 @@
+import { expect, test } from "@playwright/test";
+
+const HERO_HEADING =
+  "Technology should serve people — not the other way around.";
+
+test.describe("Homepage smoke", () => {
+  test("shows the primary hero content", async ({ page }) => {
+    await page.goto("/");
+
+    await expect(
+      page.getByRole("heading", { level: 1, name: HERO_HEADING }),
+    ).toBeVisible();
+    await expect(page.getByRole("link", { name: "Get updates" })).toBeVisible();
+    await expect(
+      page.getByRole("link", { name: "Explore focus areas" }),
+    ).toBeVisible();
+  });
+});
+
+test("serves an XML RSS feed", async ({ request }) => {
+  const rss = await request.get("/rss.xml");
+
+  expect(rss.ok()).toBeTruthy();
+  expect(rss.headers()["content-type"]).toContain("xml");
+
+  const body = await rss.text();
+  expect(body).toContain("<rss");
+});
+
+test.describe("Navigation", () => {
+  test("opens on mobile and navigates to library", async ({ page }) => {
+    await page.setViewportSize({ width: 480, height: 900 });
+    await page.goto("/");
+
+    const navContent = page.locator(".nav__content");
+    await expect(navContent).not.toHaveClass(/is-open/);
+
+    await page.getByRole("button", { name: /open navigation/i }).click();
+    await expect(navContent).toHaveClass(/is-open/);
+
+    await page.getByRole("link", { name: "Library" }).click();
+    await page.waitForURL(/\/library/);
+
+    await expect(
+      page.getByRole("heading", { level: 1, name: "Library" }),
+    ).toBeVisible();
+    await expect(page.locator(".nav__content")).not.toHaveClass(/is-open/);
+  });
+});

tests/e2e/smoke.spec.ts

@@ -1,16 +1,30 @@
-import { defineConfig, getViteConfig } from 'astro/config';
+import { defineConfig, getViteConfig } from "astro/config";
 
-const resolvedViteConfig = await getViteConfig({})({ mode: 'test', command: 'serve' });
+const resolvedViteConfig = await getViteConfig({})({
+  mode: "test",
+  command: "serve",
+});
+const resolvedTestConfig = (
+  resolvedViteConfig as { test?: { exclude?: string[] } }
+).test;
 
 export default defineConfig({
   ...resolvedViteConfig,
   test: {
-    environment: 'node',
+    ...resolvedTestConfig,
+    environment: "node",
     globals: true,
-    globalSetup: ['src/test/global-setup.ts'],
-    setupFiles: ['src/test/setup.ts'],
+    globalSetup: ["src/test/global-setup.ts"],
+    setupFiles: ["src/test/setup.ts"],
+    exclude: [
+      "**/node_modules/**",
+      "**/.git/**",
+      "**/dist/**",
+      ...(resolvedTestConfig?.exclude ?? []),
+      "tests/e2e/**",
+    ],
     deps: {
-      inline: ['astro', '@astrojs/react'],
+      inline: ["astro", "@astrojs/react"],
     },
   },
-} as unknown as import('astro').AstroUserConfig);
+} as unknown as import("astro").AstroUserConfig);