feat(E2E): testing

.github/workflows/frontend-test.yml

@@ -0,0 +1,137 @@
+name: Frontend Test
+on:
+  push:
+    paths:
+      - '.github/workflows/frontend-test.yml'
+      - 'web'
+  pull_request:
+    paths:
+      - '.github/workflows/frontend-test.yml'
+      - 'web'
+jobs:
+  e2e-tests:
+    name: E2E Testing (Real APIs)
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ ubuntu-latest ]
+        php-version: [ '8.1' ]
+        sw-version: [ '5.0.3' ]
+        node-version: [ '20' ]
+    env:
+      SW_VERSION: ${{ matrix.sw-version }}
+      MYSQL_VERSION: '8.0'
+      PGSQL_VERSION: '14'
+      PHP_EXTENSIONS: redis, pdo, pdo_mysql, sqlsrv, pdo_sqlsrv, pdo_odbc, bcmath, swoole
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Generate PHP_EXTENSIONS Cache Key
+        id: ext_key
+        run: |
+          md5=$(echo -n "${{ env.PHP_EXTENSIONS }}" | md5sum | awk '{print $1}')
+          echo "key=${{ matrix.os }}-php-${{ matrix.php-version }}-extensions-$md5" >> $GITHUB_OUTPUT
+      - name: Setup PHP Extensions cache environment
+        id: php-extcache
+        uses: shivammathur/cache-extensions@v1
+        with:
+          php-version: ${{ matrix.php-version }}
+          extensions: ${{ env.PHP_EXTENSIONS }}
+          key: ${{ steps.ext_key.outputs.key }}
+      - name: Setup PHP Cache extensions
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.php-extcache.outputs.dir }}
+          key: ${{ steps.php-extcache.outputs.key }}
+          restore-keys: ${{ steps.php-extcache.outputs.key }}
+      - name: Setup PHP TS
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: ${{ matrix.php-version }}
+          extensions: ${{ env.PHP_EXTENSIONS }}
+          ini-values: opcache.enable_cli=0
+        env:
+          phpts: ts
+      - name: Set Swoole Shortname
+        run: |
+          sudo sh -c "echo swoole.use_shortname='Off' >> /etc/php/${{ matrix.php-version }}/cli/conf.d/swoole.ini"
+          php --ri swoole
+      - name: Get Composer Cache Directory
+        id: composer-cache
+        run: echo "composer_cache_dir=$(composer config cache-files-dir)" >> $GITHUB_OUTPUT
+      - name: Setup composer cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.composer-cache.outputs.composer_cache_dir }}
+          key: ${{ matrix.os }}-composer-${{ hashFiles('**/composer.lock') }}
+          restore-keys: ${{ matrix.os }}-composer-
+      - name: Setup Backend Packages
+        run: .github/ci/requirement.install.sh
+      - name: Setup Services
+        run: .github/ci/setup.services.sh
+      - name: Setup Mysql
+        run: bash .github/ci/setup.mysql.sh
+      - name: Run Scripts Before Test
+        run: cp .github/ci/.env.example .env
+      - name: Print PHP Environments
+        run: |
+          sudo rm -rf /etc/php/${{ matrix.php-version }}/cli/conf.d/20-xdebug.ini
+          php -i
+          php -m
+      - name: Install PNPM
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+          cache-dependency-path: web/pnpm-lock.yaml
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        run: echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+      - uses: actions/cache@v4
+        name: Setup pnpm Cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }}
+          key: ${{ matrix.os }}-pnpm-store-${{ hashFiles('web/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ matrix.os }}-pnpm-store-
+      - name: Setup Frontend Packages
+        working-directory: web
+        run: .github/ci/requirement.install.sh
+      - name: Get Playwright Version
+        id: playwright-version
+        working-directory: web
+        run: echo "playwright_version=$(jq -r '.devDependencies["@playwright/test"]' package.json)" >> $GITHUB_OUTPUT
+      - name: Setup Playwright Cache
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ matrix.os }}-${{ steps.playwright-version.outputs.playwright_version }}
+      - name: Install Playwright dependencies
+        working-directory: web
+        shell: bash
+        run: pnpm exec playwright install --with-deps --only-shell
+      - name: Start Backend Server
+        working-directory: web
+        run:  .github/ci/run.start-backend-server.sh
+        env:
+          DB_DRIVER: mysql
+          DB_HOST: 127.0.0.1
+          DB_DATABASE: mineadmin
+      - name: Run E2E Tests
+        working-directory: web
+        run: .github/ci/run.test.sh
+      - name: Upload E2E Test Report
+        if: always() && hashFiles('web/playwright-report/index.html')
+        uses: actions/upload-artifact@v4
+        with:
+          path: web/playwright-report/
+          retention-days: 1
+      - name: Stop Backend Server
+        if: always()
+        working-directory: web
+        run: .github/ci/run.stop-backend-server.sh

web/.github/ci/requirement.install.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+
+set -e
+
+set -x
+
+pnpm install --frozen-lockfile

web/.github/ci/run.start-backend-server.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env sh
+
+set -e
+
+set -x
+
+# 运行migrate 和 seeder
+
+php ../bin/hyperf.php migrate --seed
+
+# 启动 MineAdmin 后端服务在后台，保存 PID 和输出
+LOG_FILE="mineadmin_server.log"
+PID_FILE="mineadmin_server.pid"
+
+# 启动服务并保存 PID
+php ../bin/hyperf.php start > ${LOG_FILE} 2>&1 &
+SERVER_PID=$!
+
+# 保存 PID 到文件
+echo ${SERVER_PID} > ${PID_FILE}
+
+echo "MineAdmin server started with PID: ${SERVER_PID}"
+echo "Log file: ${LOG_FILE}"
+echo "PID file: ${PID_FILE}"
+
+# 等待服务启动并进行健康检查
+echo "Waiting for server to be ready..."
+for i in $(seq 1 10); do
+    sleep 2
+    if kill -0 ${SERVER_PID} 2>/dev/null; then
+        echo "Attempt $i: Server process is alive"
+        # HTTP健康检查
+        if curl -f http://localhost:9501 >/dev/null 2>&1; then
+            echo "Server is responding to HTTP requests"
+            break
+        fi
+    else
+        echo "Server process died during startup"
+        cat ${LOG_FILE}
+        exit 1
+    fi
+done
+
+# 检查服务是否启动成功
+if kill -0 ${SERVER_PID} 2>/dev/null; then
+    echo "MineAdmin server is running"
+else
+    echo "Failed to start MineAdmin server"
+    exit 1
+fi

web/.github/ci/run.stop-backend-server.sh

@@ -0,0 +1,26 @@
+#!/usr/bin/env sh
+
+set -e
+
+set -x
+
+# 停止 MineAdmin 后端服务
+LOG_FILE="mineadmin_server.log"
+PID_FILE="mineadmin_server.pid"
+
+# 检查 PID 文件是否存在
+if [ -f ${PID_FILE} ]; then
+    SERVER_PID=$(cat ${PID_FILE})
+    echo "Stopping MineAdmin server with PID: ${SERVER_PID}"
+    # 停止服务
+    if kill -0 ${SERVER_PID} 2>/dev/null; then
+        kill ${SERVER_PID}
+        echo "MineAdmin server stopped successfully"
+    else
+        echo "MineAdmin server is not running or already stopped"
+    fi
+    # 删除 PID 文件
+    rm -f ${PID_FILE}
+else
+    echo "PID file not found, MineAdmin server may not be running"
+fi

web/.github/ci/run.test.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+
+set -e
+
+pnpm test:e2e

web/.gitignore

@@ -5,7 +5,12 @@ dist-ssr
 *.local
 .eslintcache
 .stylelintcache
-pnpm-lock.yaml
 .idea*
 types/auto-imports.d.ts
 types/components.d.ts
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

web/package.json

@@ -15,7 +15,8 @@
     "lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
     "lint:tsc": "vue-tsc --noEmit",
     "lint:eslint": "eslint . --cache --fix",
-    "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix"
+    "lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
+    "test:e2e": "playwright test --config=playwright.config.ts"
   },
   "dependencies": {
     "@imengyu/vue3-context-menu": "^1.4.4",
@@ -58,9 +59,11 @@
     "@iconify/json": "^2.2.309",
     "@iconify/vue": "^4.3.0",
     "@intlify/unplugin-vue-i18n": "^6.0.3",
+    "@playwright/test": "^1.54.1",
     "@stylistic/stylelint-config": "^2.0.0",
     "@types/archiver": "^6.0.3",
     "@types/mockjs": "^1.0.10",
+    "@types/node": "^24.0.14",
     "@types/nprogress": "^0.2.3",
     "@types/path-browserify": "^1.0.3",
     "@types/qs": "^6.9.18",
@@ -101,4 +104,4 @@
     "vue-tsc": "^2.2.2",
     "vue3-ace-editor": "^2.2.4"
   }
-}
+}

web/playwright.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig, devices } from '@playwright/test';
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : 1,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:2888',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'retain-on-first-failure',
+
+    // 失败时截图
+    screenshot: 'only-on-failure',
+
+    // headless: process.env.CI ? true : false, // 在 CI 环境中运行时使用无头模式
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm run dev',
+    url: 'http://localhost:2888',
+    reuseExistingServer: !process.env.CI,
+  },
+});