mutoe · mutoe · Aug 9, 2024 · Aug 15, 2024 · Aug 17, 2024 · Aug 17, 2024
diff --git a/.github/workflows/code_quality.yml b/.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/[email protected]
+        env:
+          QODANA_TOKEN: ${{ secrets.QODANA_TOKEN }}
diff --git a/.github/workflows/pull-request.yml b/.github/workflows/pull-request.yml
diff --git 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
diff --git a/.gitignore b/.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

diff --git a/cypress/fixtures/article.json b/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",

diff --git a/eslint.config.js b/eslint.config.js
@@ -6,6 +6,7 @@ export default defineConfig({
       'tsconfig.json',
       'tsconfig.node.json',
       'cypress/e2e/tsconfig.json',
+      'playwright/tsconfig.json',
     ],
   },
   vue: {
@@ -27,4 +28,12 @@ export default defineConfig({
   rules: {
     'ts/method-signature-style': 'off',
   },
+}, {
+  files: [
+    '*.config.ts',
+    'playwright/**/*',
+  ],
+  rules: {
+    'node/prefer-global/process': 'off',
+  },
 })
diff --git a/index.html b/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>

diff --git a/package.json b/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/main/api/openapi.yml -o ./src/services/openapi.yml && sta -p ./src/services/openapi.yml -o ./src/services -n api.ts"
   },
@@ -28,18 +31,23 @@
   "devDependencies": {
     "@mutoe/eslint-config": "^2.8.3",
     "@pinia/testing": "^0.1.5",
+    "@playwright/test": "^1.46.0",
     "@testing-library/cypress": "^10.0.2",
     "@testing-library/user-event": "^14.5.2",
     "@testing-library/vue": "^8.1.0",
+    "@types/html": "^1.0.4",
+    "@types/node": "^22.1.0",
     "@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",
     "eslint-plugin-vitest": "^0.5.4",
     "eslint-plugin-vue": "^9.27.0",
     "happy-dom": "^14.12.3",
+    "html": "^1.0.0",
     "lint-staged": "^15.2.8",
     "msw": "^2.3.5",
     "rollup-plugin-analyzer": "^4.0.0",

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -0,0 +1,77 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+const isCI = process.env.CI
+const baseURL = process.env.E2E_BASE_URL || 'http://localhost:4173'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './playwright',
+  /* Run tests in files in parallel */
+  fullyParallel: false,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!isCI,
+  /* Retry on CI only */
+  retries: isCI ? 1 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: isCI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['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: 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',
+    trace: isCI ? 'on-first-retry' : 'retain-on-failure',
+    video: isCI ? 'on-first-retry' : 'retain-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  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: isCI ? 'pnpm serve' : 'npm run dev',
+    url: baseURL,
+    reuseExistingServer: !isCI,
+    ignoreHTTPSErrors: true,
+  },
+})
diff --git a/playwright/constant.ts b/playwright/constant.ts
@@ -0,0 +1,8 @@
+export enum Route {
+  Home = '/#/',
+  Login = '/#/login',
+  Register = '/#/register',
+  Settings = '/#/settings',
+  ArticleCreate = '/#/article/create',
+  ArticleDetail = '/#/article/article-title',
+}