test: add end-to-end tests for mobile adaptation (#113)

* fix: update mobile responsive styles based on test feedback

* test: add end-to-end tests for mobile adaptation

* chore: update pnpm-lock.yaml

* chore: update lockfile with @playwright/test

* fix(e2e-test): fix test failures

* fix(e2e-test): resolve backend connection errors by setting DATABASE_HOST and REDIS_HOST in docker-compose.yml

Author: WangWant7

.github/workflows/e2e-test.yml

@@ -0,0 +1,46 @@
+name: Playwright E2E Tests
+
+on:
+  - pull_request
+  - workflow_dispatch
+
+jobs:
+  e2e-test:
+    runs-on: ubuntu-latest
+    permissions:
+      checks: write
+      pull-requests: write
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        name: Install pnpm
+        with:
+          version: 10
+          run_install: false
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Install Playwright browsers
+        run: pnpm exec playwright install --with-deps
+      - name: Start Backend Services
+        run: |
+          cd template/nestJs
+          cp .env.example .env
+          docker compose up -d
+      - name: Wait for Backend Services
+        run: |
+          echo "Waiting for Backend Services to start..."
+          timeout 120s bash -c 'until nc -z localhost 3000; do
+            echo "Backend Services are starting..."
+            sleep 3
+          done'
+          echo "Backend Services are ready!"
+          cd template/nestJs && docker compose ps
+      - name: Run E2E tests
+        run: pnpm test:e2e

.github/workflows/unit-test.yaml

@@ -27,4 +27,4 @@ jobs:
       - name: Install depend
         run: pnpm i
       - name: Run Unit Test without coverage
-        run: pnpm test
+        run: pnpm test:unit

package.json

@@ -38,10 +38,12 @@
     "fix": "run-s fix:*",
     "fix:prettier": "prettier \"src/**/*.ts\" --write",
     "fix:tslint": "tslint --fix --project .",
-    "test": "run-s build test:**",
+    "test:unit": "run-s build test:lint test:unit:backend test:cov:backend",
+    "test:all": "run-s build test:**",
     "test:lint": "tslint --project . && prettier \"src/**/*.ts\" --list-different",
     "test:unit:backend": "pnpm -F tiny-pro-nestjs test",
     "test:cov:backend": "pnpm -F tiny-pro-nestjs test:cov",
+    "test:e2e": "playwright test",
     "watch": "run-s clean build:main && run-p \"build:main -- -w\"  ",
     "cov": "run-s build test:unit cov:html && open-cli coverage/index.html",
     "cov:html": "nyc report --reporter=html",
@@ -84,6 +86,7 @@
   "devDependencies": {
     "@bitjson/npm-scripts-info": "^1.0.0",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
+    "@playwright/test": "^1.55.0",
     "@types/fs-extra": "^11.0.4",
     "@types/inquirer": "^9.0.3",
     "@types/node": "^14.18.63",

playwright.config.ts

@@ -0,0 +1,44 @@
+  import { defineConfig, devices } from '@playwright/test';
+
+  export default defineConfig({
+    workers: 1,
+    timeout: 60_000,
+    expect: { timeout: 10_000 },
+    fullyParallel: false,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 1,
+    reporter: [
+      ['list'],
+      ['html', { outputFolder: 'playwright-report', open: 'never' }]
+    ],
+    use: {
+      baseURL: 'http://localhost:3031/vue-pro', 
+      trace: 'on-first-retry',
+    },
+    projects: [
+      // 手机
+      {
+        name: 'iPhone 12 Safari', // 390 * 664
+        use: { ...devices['iPhone 12'] },
+        testDir: './tests/e2e/mobile',
+      },
+      {
+        name: 'Pixel 5', // 393 * 727
+        use: { ...devices['Pixel 5'] },
+        testDir: './tests/e2e/mobile',
+      },
+      // 平板
+      {
+        name: 'iPad (gen 5)', // 768 * 1024
+        use: { ...devices['iPad (gen 5)'] },
+        testDir: './tests/e2e/mobile',
+      }
+    ],
+    webServer: {
+      command: 'pnpm start',
+      cwd: 'template/tinyvue',
+      url: 'http://localhost:3031/vue-pro',
+      reuseExistingServer: true,
+      timeout: 120_000
+    }
+  });