ci: setup playwright pipeline

2024-08-17 17:44:14 +08:00 · 2024-08-17 17:44:14 +08:00 · 6b314c4aa7
parent 7db05d7f91
commit 6b314c4aa7
5 changed files with 87 additions and 153 deletions
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@ -1,102 +0,0 @@
-name: Pull request
-
-on:
-  pull_request:
-    paths-ignore:
-      - '**.md'
-
-env:
-  CI: true
-
-jobs:
-  lint:
-    name: Lint
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-
-      - name: TypeScript check
-        run: pnpm lint
-
-      - name: Eslint check
-        run: pnpm lint
-
-  unit_test:
-    name: Unit test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-
-      - name: Unit test
-        run: pnpm test:unit
-
-      - name: Update coverage report
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-
-  e2e_tests:
-    name: E2E test
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-
-      - uses: pnpm/action-setup@v4
-        with:
-          version: 9
-          run_install: false
-
-      - name: Use Node.js 22.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22.x
-          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --no-frozen-lockfile
-
-      - name: Get cypress version
-        id: cypress-version
-        run: echo "version=$(pnpm info cypress version)" >> $GITHUB_OUTPUT
-
-      - name: Cache cypress binary
-        id: cache-cypress-binary
-        uses: actions/cache@v4
-        with:
-          path: ~/.cache/Cypress
-          key: cypress-binary-${{ runner.os }}-${{ steps.cypress-version.outputs.version }}
-
-      - name: Install cypress binary
-        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
-        run: pnpm cypress install
-
-      - name: E2E test
-        run: pnpm test:e2e:ci
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -4,6 +4,9 @@ on:
  push:
    paths-ignore:
      - '**.md'
+  pull_request:
+    paths-ignore:
+      - '**.md'

 env:
  CI: true
@ -63,8 +66,8 @@ jobs:
        with:
          token: ${{ secrets.CODECOV_TOKEN }}

-  e2e_tests:
-    name: E2E test
+  cypress_e2e_tests:
+    name: Cypress E2E test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
@ -99,4 +102,37 @@ jobs:
        run: pnpm cypress install

      - name: E2E test
-        run: pnpm test:e2e:ci
+        run: pnpm test:cypress
+
+  playwright_e2e_tests:
+    name: Playwright E2E test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: false
+
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.x
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install playwright binary
+        run: pnpm playwright install --with-deps
+
+      - name: E2E test
+        run: pnpm test:playwright
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
--- a/package.json
+++ b/package.json
@ -5,19 +5,19 @@
  "type": "module",
  "scripts": {
    "prepare": "simple-git-hooks",
-    "dev": "vite --port 5173",
+    "dev": "vite --port 4173",
    "build": "vite build",
    "serve": "vite preview --port 4173",
    "type-check": "vue-tsc --noEmit",
    "lint": "eslint --fix .",
    "test": "npm run test:unit && npm run test:playwright",
-    "test:cypress:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
+    "test:cypress": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress run --e2e",
+    "test:cypress:ui": "cypress open --e2e",
    "test:cyprsss:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
-    "test:e2e": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress open --e2e -c baseUrl=http://localhost:4173\"",
-    "test:e2e:ci": "npm run build && concurrently -rk -s first \"npm run serve\" \"cypress run --e2e -c baseUrl=http://localhost:4173\"",
-    "test:playwright:ci": "playwright test",
-    "test:playwright:local": "playwright test --ui",
-    "test:playwright:local:debug": "playwright test --ui --headed --debug",
+    "test:playwright": "npm run build && cross-env CI=true playwright test",
+    "test:playwright:prod": "cross-env E2E_BASE_URL='https://vue3-realworld-example-app-mutoe.vercel.app' playwright test",
+    "test:playwright:ui": "playwright test --ui",
+    "test:playwright:ui:debug": "playwright test --ui --headed --debug",
    "test:unit": "vitest run",
    "generate:api": "curl -sL https://raw.githubusercontent.com/gothinkster/realworld/main/api/openapi.yml -o ./src/services/openapi.yml && sta -p ./src/services/openapi.yml -o ./src/services -n api.ts"
  },
@ -40,6 +40,7 @@
    "@vitejs/plugin-vue": "^5.1.2",
    "@vitest/coverage-v8": "^2.0.5",
    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
    "cypress": "^13.13.2",
    "eslint": "^8.57.0",
    "eslint-plugin-cypress": "^3.4.0",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -7,9 +7,8 @@ import { defineConfig, devices } from '@playwright/test'
 // import dotenv from 'dotenv';
 // dotenv.config({ path: path.resolve(__dirname, '.env') });

-const baseURL = 'http://localhost:5173'
-
 const isCI = process.env.CI
+const baseURL = process.env.E2E_BASE_URL || 'http://localhost:4173'

 /**
 * See https://playwright.dev/docs/test-configuration.
@ -26,15 +25,16 @@ export default defineConfig({
  workers: isCI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [
-    ['line'],
    ['html', { open: 'never' }],
+    isCI ? ['github'] : ['list'],
  ],
  /* 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,

-    navigationTimeout: 4000,
+    navigationTimeout: isCI ? 10_000 : 4000,
+    actionTimeout: isCI ? 10_000 : 4000,

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    screenshot: 'only-on-failure',
@ -43,46 +43,33 @@ export default defineConfig({
  },

  /* Configure projects for major browsers */
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-
-    isCI && {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
-
-    isCI && {
-      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' },
-    // },
-  ].filter(Boolean),
+  projects: isCI
+    ? [
+        {
+          name: 'chromium',
+          use: { ...devices['Desktop Chrome'] },
+        },
+        {
+          name: 'firefox',
+          use: { ...devices['Desktop Firefox'] },
+        },
+        {
+          name: 'webkit',
+          use: { ...devices['Desktop Safari'] },
+        },
+      ]
+    : [
+        {
+          name: 'chromium',
+          use: {
+            ...devices['Desktop Chrome'],
+          },
+        },
+      ],

  /* Run your local dev server before starting the tests */
  webServer: {
-    command: 'npm run dev',
+    command: isCI ? 'pnpm serve' : 'npm run dev',
    url: baseURL,
    reuseExistingServer: !isCI,
    ignoreHTTPSErrors: true,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -57,6 +57,9 @@ importers:
      concurrently:
        specifier: ^8.2.2
        version: 8.2.2
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
      cypress:
        specifier: ^13.13.2
        version: 13.13.2
@ -1312,6 +1315,11 @@ packages:
      typescript:
        optional: true

+  cross-env@7.0.3:
+    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
+    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
+    hasBin: true
+
  cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@ -4721,6 +4729,10 @@ snapshots:
    optionalDependencies:
      typescript: 5.5.4

+  cross-env@7.0.3:
+    dependencies:
+      cross-spawn: 7.0.3
+
  cross-spawn@7.0.3:
    dependencies:
      path-key: 3.1.1