ci: setup playwright pipeline

Author: mutoe

.github/workflows/test.yml

@@ -63,8 +63,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
@@ -100,3 +100,36 @@ jobs:
 
       - name: E2E test
         run: pnpm test:e2e:ci
+
+  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:ci
+
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

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:e2e:ci",
-    "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",

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,