feat(test): add playwright e2e test tool

package.json

@@ -8,12 +8,15 @@
     "dev": "node scripts/watch.mjs",
     "prebuild": "vue-tsc --project packages/renderer/tsconfig.json --noEmit && node scripts/build.mjs",
     "build": "electron-builder",
-    "debug": "npm run prebuild && vite ./packages/renderer"
+    "debug": "npm run prebuild && vite ./packages/renderer",
+    "test:e2e": "npx playwright test",
+    "test:e2e:headless": "npx playwright test --headed"
   },
   "engines": {
     "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.19.2",
     "@vitejs/plugin-vue": "^2.1.0",
     "electron": "16.0.8",
     "electron-builder": "^22.14.5",

playwright.config.ts

@@ -0,0 +1,16 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  use: {
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+};
+export default config;

test/example.spec.ts

@@ -0,0 +1,16 @@
+// example.spec.ts
+import { test, expect } from '@playwright/test'
+import { env } from '../package.json'
+const VITE_SERVER_ADDRESS = `http://127.0.0.1:${env.PORT || 3344}`
+
+test('example test case', async ({ page }) => {
+  await page.goto(VITE_SERVER_ADDRESS)
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Vite App/)
+
+  // Expect an attribute "Hello Vue 3 + TypeScript + Vite" to be visible on the page.
+  await expect(
+    page.locator('text=Hello Vue 3 + TypeScript + Vite').first(),
+  ).toBeVisible()
+})