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

.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/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,

examples/streaming-chat/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"
   },

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,64 @@
+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))
+const serveStatic = fileURLToPath(new URL('./tests/e2e/_support/serve-static.mjs', import.meta.url))
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  testIgnore: ['_support/**'],
+  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',
+    },
+    {
+      command: `node bin.mjs build --out-dir dist/static && node ${JSON.stringify(serveStatic)} dist/static 9886`,
+      cwd: 'examples/files-inspector',
+      env: { DEVFRAME_E2E_CWD: fixtureCwd },
+      url: 'http://127.0.0.1:9886/',
+      timeout: 60_000,
+      reuseExistingServer: !process.env.CI,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+    {
+      command: `node bin.mjs build --out-dir dist/static && node ${JSON.stringify(serveStatic)} dist/static 9898`,
+      cwd: 'examples/streaming-chat',
+      url: 'http://127.0.0.1:9898/',
+      timeout: 60_000,
+      reuseExistingServer: !process.env.CI,
+      stdout: 'pipe',
+      stderr: 'pipe',
+    },
+  ],
+})