test: run frontend unit tests in browsers (#38860)

Run them in headless [vitest browser
mode](https://vitest.dev/guide/browser/) in chromium and firefox.
Similar UX than current tests, it's about 5 times as slow (goes from 1s
to 5s on my machine), but definitely worth it as it removes all
happy-dom problems.

---------

Signed-off-by: silverwind <me@silverwind.io>

vitest.config.ts

@@ -1,25 +1,44 @@
 import {defineConfig} from 'vitest/config';
+import {playwright} from '@vitest/browser-playwright';
 import {sharedPlugins, vueDefines} from './tools/shared.ts';
+import {env} from 'node:process';
 
 export default defineConfig({
   test: {
-    include: [
-      'web_src/**/*.test.ts',
-      'tools/eslint-rules/**/*.test.ts',
-    ],
-    setupFiles: ['web_src/js/vitest.setup.ts'],
-    environment: 'happy-dom',
     testTimeout: 20000,
-    open: false,
     allowOnly: true,
     passWithNoTests: true,
     globals: true,
     watch: false,
-    isolate: false,
-    sequence: {
-      concurrent: true,
-    },
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: 'browser',
+          include: ['web_src/**/*.test.ts'],
+          setupFiles: ['web_src/js/vitest.setup.ts'],
+          browser: {
+            enabled: true,
+            provider: playwright(),
+            headless: true,
+            screenshotFailures: false,
+            instances: ((env.PLAYWRIGHT_BROWSERS || 'chromium firefox')
+              .split(' ') as Array<'chromium' | 'firefox' | 'webkit'>)
+              .map((browser) => ({browser, name: browser})),
+          },
+        },
+      },
+      {
+        extends: true,
+        test: {
+          name: 'node',
+          include: ['tools/**/*.test.ts'],
+          environment: 'node',
+        },
+      },
+    ],
   },
+  publicDir: false,
   define: vueDefines,
   plugins: sharedPlugins(),
 });