pack: basic automation test implementation with playwright

.github/workflows/app-test.yml

@@ -0,0 +1,45 @@
+name: app-test
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+jobs:
+  app-test:
+    runs-on: ${{ matrix.os }}
+    name: Test NodeJS ${{ matrix.node_version }} on ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        node_version: ['16', '18', '20']
+        os: [windows-latest, macos-latest, ubuntu-latest]
+
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup NodeJS ${{ matrix.node_version }}
+        uses: actions/setup-node@v2
+        with:
+          node-version: ${{ matrix.node_version }}
+          cache: npm
+          cache-dependency-path: '**/package-lock.json'
+
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        id: npm-cache
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-npm-
+
+      - name: Install dependencies
+        if: steps.npm-cache.outputs.cache-hit != 'true'
+        run: npm i
+
+      - name: Test module script
+        run: npm run test

package-lock.json

@@ -17,6 +17,7 @@
       },
       "devDependencies": {
         "@mdi/font": "^7.2.96",
+        "@playwright/test": "^1.35.1",
         "@typescript-eslint/eslint-plugin": "^5.60.0",
         "@typescript-eslint/parser": "^5.60.0",
         "@vitejs/plugin-vue": "^4.2.3",
@@ -31,6 +32,7 @@
         "eslint-plugin-n": "^16.0.0",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-vue": "^9.14.1",
+        "playwright": "^1.35.1",
         "prettier": "^2.8.8",
         "typescript": "^5.0.4",
         "vite": "^4.3.9",
@@ -1433,6 +1435,25 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "playwright-core": "1.35.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
     "node_modules/@rollup/pluginutils": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-4.2.1.tgz",
@@ -6113,6 +6134,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.35.1.tgz",
+      "integrity": "sha512-NbwBeGJLu5m7VGM0+xtlmLAH9VUfWwYOhUi/lSEDyGg46r1CA9RWlvoc5yywxR9AzQb0mOCm7bWtOXV7/w43ZA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "dependencies": {
+        "playwright-core": "1.35.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.35.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/plist": {
       "version": "3.0.6",
       "resolved": "https://registry.npmjs.org/plist/-/plist-3.0.6.tgz",

package.json

@@ -27,7 +27,8 @@
     "lint": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter src",
     "lint:fix": "eslint --ext .js,.ts,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
     "format": "prettier .",
-    "format:fix": "prettier . --write"
+    "format:fix": "prettier . --write",
+    "test": "npm run build:dir && playwright test"
   },
   "engines": {
     "node": ">=16.0.0"
@@ -41,6 +42,7 @@
   },
   "devDependencies": {
     "@mdi/font": "^7.2.96",
+    "@playwright/test": "^1.35.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "@vitejs/plugin-vue": "^4.2.3",
@@ -55,6 +57,7 @@
     "eslint-plugin-n": "^16.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.14.1",
+    "playwright": "^1.35.1",
     "prettier": "^2.8.8",
     "typescript": "^5.0.4",
     "vite": "^4.3.9",

src/renderer/screens/MainScreen.vue

@@ -49,6 +49,7 @@ const handleCountIncrease = (): void => {
     <v-row no-gutters align="center" class="text-center">
       <v-col cols="12" md="5">
         <img
+          id="main-logo"
           alt="logo"
           draggable="false"
           class="ma-auto h-auto w-75"
@@ -71,8 +72,8 @@ const handleCountIncrease = (): void => {
             </v-btn>
           </v-col>
           <v-col cols="3">
-            <v-badge color="blue" :content="counter">
-              <v-btn icon color="primary" @click="handleCountIncrease">
+            <v-badge id="counter-badge" color="blue" :content="counter">
+              <v-btn id="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
                 <v-tooltip activator="parent" location="bottom">
                   {{ $t('menu.increase-count') }}
@@ -98,6 +99,7 @@ const handleCountIncrease = (): void => {
           </v-col>
           <v-col cols="12">
             <v-select
+              id="select-language"
               :model-value="locale"
               density="compact"
               :label="$t('menu.change-language')"

tests/app.spec.ts

@@ -0,0 +1,59 @@
+import { Page, _electron as electron } from 'playwright'
+import { ElectronApplication } from 'playwright-core'
+import { test, expect } from '@playwright/test'
+
+let appWindow: Page
+let appElectron: ElectronApplication
+
+function waiting(milliseconds: number) {
+  return new Promise((resolve) => setTimeout(resolve, milliseconds))
+}
+
+function isElementVisible(selector: string, waitingMilliseconds = 100) {
+  return new Promise((resolve) => {
+    setTimeout(async () => {
+      expect(await appWindow.isVisible(selector), `Confirm selector '${selector}' is visible`).toBe(
+        true
+      )
+      resolve(true)
+    }, waitingMilliseconds)
+  })
+}
+
+test.beforeAll(async () => {
+  // Open Electron app from build directory
+  appElectron = await electron.launch({ args: ['dist/main/index.js'] })
+  appWindow = await appElectron.firstWindow()
+
+  await appWindow.waitForEvent('load')
+})
+
+test('Environment check', async () => {
+  const isPackaged = await appElectron.evaluate(async ({ app }) => {
+    return app.isPackaged
+  })
+
+  expect(isPackaged, 'Confirm that is in development mode').toBe(false)
+})
+
+test('Document element check', async () => {
+  await isElementVisible('.v-toolbar__content')
+  await isElementVisible('#main-logo')
+  await isElementVisible('#select-language')
+})
+
+test('Counter button click check', async () => {
+  await appWindow.click('#btn-counter', { clickCount: 10, delay: 50 })
+
+  const counterValueElement = await appWindow.$('#counter-badge .v-badge__badge')
+
+  expect(
+    await appWindow.evaluate((element) => element.innerHTML, counterValueElement),
+    'Confirm counter value is same'
+  ).toBe('10')
+})
+
+test.afterAll(async () => {
+  await waiting(2000)
+  await appElectron.close()
+})