test: add playwright e2e suite for files-inspector and streaming-chat (#14)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

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

docs/guide/built-with.md

@@ -12,6 +12,5 @@ Real-world devtools shipping on Devframe:
 
 End-to-end examples in this repo, exercising the full adapter surface:
 
-- [**counter**](https://github.com/devframes/devframe/tree/main/examples/counter) — smallest possible demo, exercises all adapters.
 - [**files-inspector**](https://github.com/devframes/devframe/tree/main/examples/files-inspector) — lists files in cwd via RPC; exercises CLI dev/build/spa surfaces.
 - [**streaming-chat**](https://github.com/devframes/devframe/tree/main/examples/streaming-chat) — streams synthetic chat tokens from server to client via `ctx.rpc.streaming`.

examples/counter/bin.mjs

@@ -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,

examples/counter/package.json

@@ -10,6 +10,7 @@
   },
   "scripts": {
     "build": "vite build --config src/client/vite.config.ts",
+    "cli:build": "node bin.mjs build --out-dir dist/static",
     "dev": "node bin.mjs",
     "test": "vitest run"
   },