Setup Playwright as E2E test framework

.github/workflows/health-check.yml

@@ -16,14 +16,13 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
           run_install: false
 
       # https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
-      - name: Use Node.js 24.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: pnpm
 
       - name: Install dependencies

.github/workflows/test.yml

@@ -4,6 +4,9 @@ on:
   push:
     paths-ignore:
       - '**.md'
+  pull_request:
+    paths-ignore:
+      - '**.md'
 
 env:
   CI: true
@@ -17,13 +20,12 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
           run_install: false
 
-      - name: Use Node.js 24.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: pnpm
 
       - name: Install dependencies
@@ -43,13 +45,12 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
           run_install: false
 
-      - name: Use Node.js 24.x
+      - name: Use Node.js 22.x
         uses: actions/setup-node@v5
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: pnpm
 
       - name: Install dependencies
@@ -62,41 +63,65 @@ jobs:
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/unit/lcov.info
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: unit-test-report
+          path: |
+            coverage/
+          retention-days: 30
 
   e2e_tests:
-    name: E2E test
-    runs-on: ubuntu-latest
+    name: Playwright E2E test
+    timeout-minutes: 10
+    runs-on: macos-latest
     steps:
       - uses: actions/checkout@v5
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 10
           run_install: false
 
-      - name: Use Node.js 24.x
-        uses: actions/setup-node@v5
+      - name: Use Node.js 22.x
+        uses: actions/setup-node@v4
         with:
-          node-version: 24.x
+          node-version: 22.x
           cache: pnpm
 
       - name: Install dependencies
         run: pnpm install
 
-      - name: Get cypress version
-        id: cypress-version
-        run: echo "version=$(pnpm info cypress version)" >> $GITHUB_OUTPUT
+      - name: Get playwright version
+        id: playwright-version
+        run: echo "version=$(pnpm info playwright version)" >> $GITHUB_OUTPUT
 
-      - name: Cache cypress binary
-        id: cache-cypress-binary
+      - name: Cache playwright binary
+        id: cache-playwright-binary
         uses: actions/cache@v4
         with:
-          path: ~/.cache/Cypress
-          key: cypress-binary-${{ runner.os }}-${{ steps.cypress-version.outputs.version }}
+          path: ~/.cache/ms-playwright
+          key: playwright-binary-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
 
-      - name: Install cypress binary
-        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
-        run: pnpm cypress install
+      - name: Install Playwright binary
+        if: steps.cache-playwright-binary.outputs.cache-hit != 'true'
+        run: pnpm playwright install --with-deps
 
       - name: E2E test
-        run: pnpm test:e2e:ci
+        run: pnpm test:e2e
+
+      - name: Update coverage report
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          files: ./coverage/e2e/lcov.info
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: e2e-test-report
+          path: |
+            playwright-report/
+            coverage/
+          retention-days: 30

.gitignore

@@ -11,11 +11,14 @@ node_modules
 .DS_Store
 dist
 dist-ssr
-coverage
 *.local
 
-/cypress/videos/
-/cypress/screenshots/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/coverage-reports
+/coverage
 
 # Editor directories and files
 .vscode/*

.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "cenfun.monocart-coverage-vscode",
+    "vue.volar",
+    "dbaeumer.vscode-eslint",
+    "antfu.vite",
+    "vitest.explorer",
+    "ms-playwright.playwright"
+  ]
+}

README.md

@@ -28,7 +28,7 @@ For more information on how to this works with other frontends/backends, head ov
 - [x] [ESLint](https://eslint.vuejs.org/) and [@mutoe/eslint-config](https://github.com/mutoe/eslint-config) for linting and styling (based on [@anthony/eslint-config](https://github.com/anthony/eslint-config))
 - [x] [Vitest](https://vitest.dev/) for unit testing
 - [x] [Testing Library](https://testing-library.com/docs/vue-testing-library/intro/) for component testing
-- [x] [Cypress](https://docs.cypress.io) for E2E testing
+- [x] [Playwright](https://playwright.dev) for E2E and visual testing
 - [x] [GitHub Actions](https://docs.github.com/en/actions) CI/CD
 
 > Basically, some of they are necessary features for the development of medium to large projects, and you can also use this repository as a starter.

config/mcr.base.config.ts

@@ -0,0 +1,53 @@
+import type { CoverageReportOptions } from 'monocart-coverage-reports'
+
+// https://github.com/cenfun/monocart-coverage-reports
+const coverageOptions = {
+  reports: [
+    'text',
+    'v8',
+    'v8-json',
+    'lcovonly',
+    'raw',
+  ],
+
+  /**
+   * V8 entity filter. The entry.url is the URL of the entity.
+   * @example http://localhost:4173/assets/index-Bn6Ml0wL.js
+   * @example https://fonts.googleapis.com/css?family=Titillium+Web:700
+   * @example https://demo.realworld.io/main.css
+   * @example https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css
+   */
+  entryFilter: entry => {
+    const excludeList = [
+      'googleapis.com',
+      'realworld.(io|show)/main.css',
+      'ionicons.min.css',
+    ]
+    for (const regexp of excludeList) {
+      if (new RegExp(regexp).test(entry.url)) return false
+    }
+    return true
+  },
+
+  /**
+   * Source filter. The sourcePath is the path of the source file.
+   * @example src/components/HelloWorld.vue
+   * @example src/config.ts
+   * @example node_modules/.pnpm/@[email protected]/node_modules/@vue/devtools-kit/dist/index.js
+   */
+  sourceFilter: sourcePath => {
+    const excludeList = [
+      'node_modules',
+      'src/services/api.ts',
+      'src/setup-tests.ts',
+      'src/utils/test',
+      '.(spec|test).ts$',
+    ]
+    for (const regexp of excludeList) {
+      if (new RegExp(regexp).test(sourcePath)) return false
+    }
+    return true
+  },
+} satisfies CoverageReportOptions
+
+export default coverageOptions

config/mcr.e2e.config.ts

@@ -0,0 +1,13 @@
+import type { CoverageReportOptions } from 'monocart-coverage-reports'
+import baseConfig from './mcr.base.config'
+
+// https://github.com/cenfun/monocart-coverage-reports
+const coverageOptions: CoverageReportOptions = {
+  ...baseConfig,
+
+  name: 'E2E Test Coverage Report',
+
+  outputDir: './coverage/e2e',
+}
+
+export default coverageOptions

config/mcr.unit.config.ts

@@ -0,0 +1,13 @@
+import type { CoverageReportOptions } from 'monocart-coverage-reports'
+import baseConfig from './mcr.base.config'
+
+// https://github.com/cenfun/monocart-coverage-reports
+const coverageOptions: CoverageReportOptions = {
+  ...baseConfig,
+
+  name: 'Unit Test Coverage Report',
+
+  outputDir: './coverage/unit',
+}
+
+export default coverageOptions