Setup Playwright as E2E test framework

.github/workflows/code-quality.yml

@@ -0,0 +1,24 @@
+name: Qodana
+on:
+  workflow_dispatch:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  qodana:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      checks: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          fetch-depth: 0
+      - name: Qodana Scan
+        uses: JetBrains/qodana-action@v2024.1.9
+        env:
+          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN }}

.github/workflows/health-check.yml

@@ -16,14 +16,13 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: false
 
       # https://github.com/microsoft/TypeScript/wiki/Node-Target-Mapping
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version: 24.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: 9
           run_install: false
 
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: pnpm
 
       - name: Install dependencies
@@ -43,13 +45,12 @@ jobs:
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: false
 
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: pnpm
 
       - name: Install dependencies
@@ -63,21 +64,20 @@ 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
 
       - uses: pnpm/action-setup@v4
         with:
-          version: 9
           run_install: false
 
-      - name: Use Node.js 22.x
+      - name: Use Node.js 24.x
         uses: actions/setup-node@v4
         with:
-          node-version: 22.x
+          node-version: 24.x
           cache: pnpm
 
       - name: Install dependencies
@@ -99,4 +99,36 @@ 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:
+          run_install: false
+
+      - name: Use Node.js 24.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24.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

.gitignore

@@ -17,6 +17,11 @@ coverage
 /cypress/videos/
 /cypress/screenshots/
 
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

cypress/fixtures/article.json

@@ -5,7 +5,7 @@
     "body": "# Article body\n\nThis is **Strong** text",
     "createdAt": "2020-11-01T14:59:39.404Z",
     "updatedAt": "2020-11-01T14:59:39.404Z",
-    "tagList": [],
+    "tagList": ["foo", "bar"],
     "description": "this is descripion",
     "author": {
       "username": "plumrx",

eslint.config.js

@@ -26,4 +26,12 @@ export default defineConfig({
   rules: {
     'ts/method-signature-style': 'off',
   },
+}, {
+  files: [
+    '*.config.ts',
+    'playwright/**/*',
+  ],
+  rules: {
+    'node/prefer-global/process': 'off',
+  },
 })

index.html

@@ -6,10 +6,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="icon" href="/favicon.ico" />
-  <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
-  <link href="//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
+  <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">
 
-  <link rel="stylesheet" href="//demo.realworld.io/main.css">
+  <link rel="stylesheet" href="https://demo.realworld.io/main.css">
 </head>
 <body>
 <div id="app"></div>

package.json

@@ -5,16 +5,19 @@
   "type": "module",
   "scripts": {
     "prepare": "simple-git-hooks",
-    "dev": "vite",
+    "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: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:e2e:local": "cypress open --e2e -c baseUrl=http://localhost:5173",
-    "test:e2e:prod": "cypress run --e2e -c baseUrl=https://vue3-realworld-example-app-mutoe.vercel.app",
+    "test": "npm run test:unit && npm run test:playwright",
+    "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: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/refs/heads/main/api/openapi.yml -o ./src/services/openapi.yml && sta generate -p ./src/services/openapi.yml -o ./src/services -n api.ts"
   },
@@ -28,16 +31,22 @@
   "devDependencies": {
     "@mutoe/eslint-config": "^4.11.0-2",
     "@pinia/testing": "^1.0.2",
+    "@playwright/test": "^1.55.1",
     "@testing-library/cypress": "^10.1.0",
     "@testing-library/user-event": "^14.6.1",
     "@testing-library/vue": "^8.1.0",
+    "@types/html": "^1.0.4",
+    "@types/node": "^24.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vitest/coverage-v8": "^3.2.4",
     "concurrently": "^9.2.1",
+    "cross-env": "^7.0.3",
     "cypress": "^13.13.2",
     "eslint": "^9.36.0",
     "eslint-plugin-cypress": "^5.1.1",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^18.0.1",
+    "html": "^1.0.0",
     "lint-staged": "^16.2.0",
     "msw": "^2.11.3",
     "rollup-plugin-analyzer": "^4.0.0",