test: add playwright e2e suite for files-inspector and streaming-chat

Covers the browser-level paths the existing in-process vitest suites
can't reach — DOM render, RPC results landing in the UI, client-side
route navigation, live token streaming over WS, and shared-state-backed
history clearing. Suite spins up the real CLI dev servers via
Playwright webServer; files-inspector's cwd is pinned to a fixture dir
through a new DEVFRAME_E2E_CWD env so list-files assertions stay
deterministic. Wires test:e2e into the root scripts and adds an e2e
job alongside unit-test in ci.yml (renamed to CI).

Author: antfu

.github/workflows/ci.yml

@@ -1,4 +1,4 @@
-name: Unit Test
+name: CI
 
 on:
   push:
@@ -13,6 +13,31 @@ jobs:
   unit-test:
     uses: sxzz/workflows/.github/workflows/unit-test.yml@main
 
+  e2e:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ hashFiles('pnpm-lock.yaml') }}
+      - run: pnpm exec playwright install --with-deps chromium
+      - run: pnpm test:e2e
+      - if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
   # coverage:
   #   uses: sxzz/workflows/.github/workflows/coverage.yml@main
   #   needs: unit-test

.gitignore

@@ -15,3 +15,7 @@ temp
 **/.vitepress/cache
 **/.vitepress/dist
 packages/devframe/skills
+test-results
+playwright-report
+playwright/.cache
+blob-report

examples/files-inspector/src/devframe.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { fileURLToPath } from 'node:url'
 import { defineRpcFunction } from 'devframe'
 import { defineDevframe } from 'devframe/types'
@@ -18,19 +19,21 @@ export default defineDevframe({
   },
   spa: { loader: 'none' },
   async setup(ctx) {
+    const targetCwd = process.env.DEVFRAME_E2E_CWD || ctx.cwd
+
     ctx.rpc.register(defineRpcFunction({
       name: 'devframe-files-inspector:get-cwd',
       type: 'static',
       jsonSerializable: true,
-      handler: () => ({ cwd: ctx.cwd }),
+      handler: () => ({ cwd: targetCwd }),
     }))
 
     ctx.rpc.register(defineRpcFunction({
       name: 'devframe-files-inspector:list-files',
       type: 'query',
       jsonSerializable: true,
       handler: async () => {
-        const files = await glob(['*'], { cwd: ctx.cwd, onlyFiles: true, dot: false })
+        const files = await glob(['*'], { cwd: targetCwd, onlyFiles: true, dot: false })
         return files.map(f => f.replace(/\\/g, '/')).sort()
       },
       snapshot: true,

package.json

@@ -21,6 +21,8 @@
     "docs:serve": "pnpm -C docs run docs:serve",
     "lint": "eslint --cache",
     "test": "turbo run build && vitest",
+    "test:e2e": "turbo run build && playwright test",
+    "test:e2e:ui": "turbo run build && playwright test --ui",
     "release": "bumpp -r",
     "typecheck": "tsc -b",
     "postinstall": "npx simple-git-hooks && skills-npm"
@@ -29,6 +31,7 @@
     "@antfu/eslint-config": "catalog:devtools",
     "@antfu/ni": "catalog:build",
     "@antfu/utils": "catalog:inlined",
+    "@playwright/test": "catalog:testing",
     "@types/node": "catalog:types",
     "@types/ws": "catalog:types",
     "bumpp": "catalog:devtools",

playwright.config.ts

@@ -0,0 +1,43 @@
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+import { defineConfig, devices } from '@playwright/test'
+
+const fixtureCwd = fileURLToPath(new URL('./tests/e2e/fixtures', import.meta.url))
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['github'], ['html']] : 'list',
+  use: {
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: [
+    {
+      command: 'node bin.mjs',
+      cwd: 'examples/files-inspector',
+      env: { DEVFRAME_E2E_CWD: fixtureCwd },
+      url: 'http://localhost:9876/__devframe-files-inspector/',
+      timeout: 60_000,
+      reuseExistingServer: !process.env.CI,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+    {
+      command: 'node bin.mjs',
+      cwd: 'examples/streaming-chat',
+      url: 'http://localhost:9897/__devframe-streaming-chat/',
+      timeout: 60_000,
+      reuseExistingServer: !process.env.CI,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+  ],
+})

pnpm-lock.yaml

@@ -72,6 +72,7 @@ catalogs:
     human-id: ^4.1.3
     ua-parser-modern: ^0.1.1
   testing:
+    '@playwright/test': ^1.50.0
     tsnapi: ^0.3.3
     vitest: ^4.1.6
   types:

pnpm-workspace.yaml

@@ -0,0 +1,28 @@
+import { expect, test } from '@playwright/test'
+
+const BASE = 'http://localhost:9876/__devframe-files-inspector/'
+
+test.describe('files-inspector', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(BASE)
+    await expect(page.locator('h1')).toHaveText('Files Inspector')
+  })
+
+  test('lists fixture files on home', async ({ page }) => {
+    await expect(page.locator('section h2')).toContainText('Files')
+    await expect(page.locator('section h2 small')).toHaveText('(3)')
+    await expect(page.locator('section ul li')).toHaveText([
+      'README.md',
+      'package.json',
+      'sample.txt',
+    ])
+  })
+
+  test('navigates to about and shows cwd', async ({ page }) => {
+    await page.click('a:has-text("About")')
+    await expect(page.locator('section h2')).toHaveText('About')
+
+    const cwdValue = page.locator('dt:has-text("Server cwd") + dd code')
+    await expect(cwdValue).toContainText(/fixtures$/)
+  })
+})

tests/e2e/files-inspector.spec.ts

@@ -0,0 +1 @@
+# fixture

tests/e2e/fixtures/README.md

@@ -0,0 +1 @@
+{ "name": "fixture" }