test: Playwright 三引擎+手机视口冒烟进 CI

.github/workflows/ci-cd.yml

@@ -70,9 +70,34 @@ jobs:
         working-directory: web
         run: pnpm run build
 
+  e2e-smoke:
+    name: E2E smoke (3 engines + mobile viewports)
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+      - uses: pnpm/action-setup@v6
+        with: { version: 10 }
+      - uses: actions/setup-node@v5
+        with:
+          node-version: 22
+          cache: pnpm
+          cache-dependency-path: web/pnpm-lock.yaml
+      - name: Install
+        working-directory: web
+        run: pnpm install --frozen-lockfile
+      - name: Build
+        working-directory: web
+        run: pnpm run build
+      - name: Install browsers
+        working-directory: web
+        run: pnpm exec playwright install --with-deps chromium firefox webkit
+      - name: Run smoke
+        working-directory: web
+        run: pnpm test:e2e
+
   deploy:
     name: Build & Deploy
-    needs: [test-server, test-web]
+    needs: [test-server, test-web, e2e-smoke]
     if: github.event_name == 'push' && (github.ref == 'refs/heads/master' || github.ref == 'refs/heads/main')
     runs-on: ubuntu-latest
     permissions:

docs/changelog/CHANGELOG.md

@@ -8,6 +8,10 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) · versi
 
 > 时间戳精确到分钟（`YYYY-MM-DD HH:MM`，北京时间 UTC+8）。同一天多次改动按时间倒序——最新在最上。每段下面扁平列表，前缀标类型（`add` / `change` / `fix` / `test` / `chore`）。
 
+### 2026-08-23 23:22
+
+- **test(e2e)**：新增 Playwright 多引擎冒烟进 CI——Chromium/Firefox/WebKit 桌面 + iPhone 13/Pixel 7 手机视口，验证登录页渲染、输入交互、未知分享链接降级且无未捕获异常；deploy 需等其通过
+
 ### 2026-08-23 23:16
 
 - **fix(web)**：结果页雅思分数下的结论文字（如「任务完成，表达有中式痕迹」）从 14px 浅灰调为 17px 加粗主文字色，浅色主题下近黑、深色主题下近白，更醒目

web/e2e/smoke.spec.js

@@ -0,0 +1,31 @@
+import { expect, test } from "@playwright/test";
+
+// 兼容性冒烟：不依赖后端，只验证各引擎能加载、渲染、无未捕获异常
+test.describe("多引擎冒烟", () => {
+  test("登录页渲染且无未捕获异常", async ({ page }) => {
+    const errors = [];
+    page.on("pageerror", (err) => errors.push(String(err)));
+    await page.goto("/");
+    await expect(page.locator("input[type='tel']")).toBeVisible();
+    await expect(page.locator(".login-page h1")).not.toBeEmpty();
+    expect(errors).toEqual([]);
+  });
+
+  test("手机号输入与校验交互正常", async ({ page }) => {
+    await page.goto("/");
+    const input = page.locator("input[type='tel']");
+    await input.fill("13800000001");
+    await expect(input).toHaveValue("13800000001");
+    // 非数字字符会被过滤
+    await input.fill("138abcd");
+    await expect(input).toHaveValue("138");
+  });
+
+  test("未知分享链接优雅降级、不白屏", async ({ page }) => {
+    const errors = [];
+    page.on("pageerror", (err) => errors.push(String(err)));
+    await page.goto("/s/does-not-exist");
+    await expect(page.locator("#root")).not.toBeEmpty();
+    expect(errors).toEqual([]);
+  });
+});

web/eslint.config.js

@@ -30,4 +30,13 @@ export default defineConfig([
       globals: globals.node,
     },
   },
+  {
+    files: ['e2e/**/*.js', 'playwright.config.js'],
+    languageOptions: {
+      globals: globals.node,
+    },
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
 ])

web/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
+    "test:e2e": "playwright test",
     "test:watch": "vitest"
   },
   "dependencies": {
@@ -20,6 +21,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.62.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

web/playwright.config.js

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// 多引擎/多设备冒烟：三大渲染引擎桌面 + 手机视口（WebKit≈Safari/iOS，Pixel≈Android Chrome）
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  retries: process.env.CI ? 1 : 0,
+  reporter: "list",
+  use: {
+    baseURL: "http://127.0.0.1:4173",
+  },
+  webServer: {
+    command: "pnpm exec vite preview --host 127.0.0.1 --port 4173 --strictPort",
+    port: 4173,
+    reuseExistingServer: !process.env.CI,
+  },
+  projects: [
+    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
+    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
+    { name: "webkit", use: { ...devices["Desktop Safari"] } },
+    { name: "mobile-iphone13", use: { ...devices["iPhone 13"] } },
+    { name: "mobile-pixel7", use: { ...devices["Pixel 7"] } },
+  ],
+});