chore: add playwright and add e2e tests

Author: simonwep

.dockerignore

@@ -5,4 +5,7 @@ dist
 .gitignore
 .eslint.config.mjs
 .data
+tests
+test-results
 *.md
+*.spec.ts

.github/workflows/main.yml

@@ -35,21 +35,30 @@ jobs:
           path: ./.eslintcache
           key: ${{ runner.os }}-eslint-${{ hashFiles('**/pnpm-lock.yaml', '**/eslint.config.mjs') }}
 
-      - name: Lint
+      - name: Run eslint
         run: pnpm lint
 
-      - name: Build
+      - name: Build app
         run: pnpm build
+        env:
 
-      - name: Test
+
+      - name: Run unit tests
         run: pnpm test
 
-      - name: Upload artifact
-        if: success()
-        uses: actions/upload-artifact@v4
+      - name: Install playwright browsers
+        run: pnpm exec playwright install --with-deps firefox
+
+      - name: Run e2e tests
+        run: pnpm test:e2e
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
         with:
-          name: app
-          path: dist
+          name: test-results
+          path: test-results/
+          retention-days: 30
+
 
   publish_release:
     if: startsWith(github.event.ref, 'refs/tags/v')

.gitignore

@@ -28,3 +28,7 @@ dist-ssr
 .env
 .data
 .eslintcache
+
+# Playwright
+/test-results/
+/blob-report/

package.json

@@ -19,7 +19,9 @@
     "lint:fix": "pnpm lint --fix",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:ci": "pnpm lint:fix && pnpm build && pnpm test"
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:ci": "pnpm lint:fix && pnpm build && pnpm test && pnpm test:e2e"
   },
   "dependencies": {
     "@popperjs/core": "2.11.8",
@@ -34,6 +36,7 @@
   "devDependencies": {
     "@eslint/js": "9.20.0",
     "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@playwright/test": "1.50.1",
     "@types/ackee-tracker": "5.0.4",
     "@types/html-minifier-terser": "7.0.2",
     "@types/node": "22.13.1",
@@ -42,6 +45,7 @@
     "@vitejs/plugin-vue": "5.2.1",
     "@vue/eslint-config-prettier": "10.2.0",
     "@vue/eslint-config-typescript": "14.3.0",
+    "dotenv": "16.4.7",
     "eslint": "9.20.0",
     "eslint-config-prettier": "10.0.1",
     "eslint-import-resolver-typescript": "3.7.0",

playwright.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+import { config } from 'dotenv';
+
+config();
+
+export default defineConfig({
+  testDir: './test',
+  outputDir: './test-results',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'github' : 'list',
+  projects: [
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+        contextOptions: { reducedMotion: 'reduce', serviceWorkers: 'block' }
+      }
+    }
+  ],
+  webServer: {
+    command: 'pnpm preview',
+    url: 'http://localhost:3000',
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI
+  },
+  use: {
+    baseURL: 'http://localhost:3000',
+    video: 'retain-on-failure'
+  }
+});

pnpm-lock.yaml

@@ -2,6 +2,7 @@
   <button
     v-tooltip="{ text: tooltip, position: tooltipPosition }"
     :class="classes"
+    :data-testid="testId"
     :disabled="disabled"
     :type="type"
     @click="emit('click', $event)"
@@ -36,6 +37,7 @@ const props = withDefaults(
     textual?: boolean;
     rounded?: boolean;
     disabled?: boolean;
+    testId?: string;
   }>(),
   {
     color: 'primary',

src/app/components/base/button/Button.vue

@@ -6,7 +6,7 @@
     </label>
 
     <div :class="$style.box">
-      <input :id="inputId" v-model="modelValue" :class="$style.input" type="checkbox" />
+      <input :id="inputId" v-model="modelValue" :data-testid="testId" :class="$style.input" type="checkbox" />
       <RiCheckLine size="16" :class="$style.icon" />
     </div>
   </div>
@@ -21,6 +21,7 @@ const modelValue = defineModel<boolean>();
 defineProps<{
   label: string;
   subLabel?: string;
+  testId?: string;
 }>();
 
 const inputId = uuid();

src/app/components/base/check-box/CheckBox.vue

@@ -9,6 +9,7 @@
         <ContextMenuButton
           v-for="option of options"
           :key="option.id"
+          :testId="`${testId}-${option.id}`"
           :padIcon="hasOptionWithIcon"
           :text="option.label ?? option.id"
           :icon="option.icon"
@@ -46,6 +47,7 @@ const props = withDefaults(
     position?: Placement;
     options?: ContextMenuOption[];
     highlight?: ContextMenuOptionId;
+    testId?: string;
   }>(),
   {
     position: 'right-end'

src/app/components/base/context-menu/ContextMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <li :class="$style.item">
-    <button :class="classes" @click="onClick">
+    <button :data-testid="testId" type="button" :class="classes" @click="onClick">
       <component :is="icon" v-if="icon" :class="$style.icon" />
       <span>{{ text }}</span>
     </button>
@@ -25,6 +25,7 @@ const props = withDefaults(
     muted?: boolean;
     padIcon?: boolean;
     highlight?: boolean;
+    testId?: string;
   }>(),
   {
     highlight: false,