test(vapor): use browser mode instead of pupeteer to run tests

.gitignore

@@ -12,3 +12,4 @@ dts-build/packages
 *.tsbuildinfo
 *.tgz
 packages-private/benchmark/reference
+**/__tests__/**/__screenshots__/**/*

package.json

@@ -74,8 +74,10 @@
     "@types/node": "^22.18.6",
     "@types/semver": "^7.7.1",
     "@types/serve-handler": "^6.1.4",
-    "@vitest/ui": "^3.0.2",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^4.0.1",
+    "@vitest/browser": "^4.0.1",
+    "@vitest/browser-playwright": "^4.0.1",
+    "@vitest/coverage-v8": "^4.0.1",
     "@vitest/eslint-plugin": "^1.3.12",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
@@ -93,6 +95,7 @@
     "marked": "13.0.3",
     "npm-run-all2": "^8.0.4",
     "picocolors": "^1.1.1",
+    "playwright": "^1.56.1",
     "prettier": "^3.5.3",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
@@ -111,6 +114,6 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.32.1",
     "vite": "catalog:",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.1"
   }
 }

packages-private/vapor-e2e-test/__tests__/e2eUtils.ts

@@ -0,0 +1,21 @@
+import { type Locator, page, userEvent } from 'vitest/browser'
+
+export const css = (css: string) => page.getByCSS(css)
+export const E2E_TIMEOUT: number = 30 * 1000
+
+export async function enterValue(locator: Locator, text: string) {
+  await locator.fill(text)
+  await userEvent.type(locator, '{enter}')
+}
+
+export function nextFrame() {
+  // this page is not same as Playwright's page
+  // how to wait for the next frame?
+  return page.evaluate(() => {
+    return new Promise(resolve => {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(resolve)
+      })
+    })
+  })
+}

packages-private/vapor-e2e-test/__tests__/setupBrowser.ts

@@ -0,0 +1,17 @@
+import { type Locator, locators } from 'vitest/browser'
+
+locators.extend({
+  getByCSS(css: string) {
+    return `css=${css}`
+  },
+})
+
+const div = document.createElement('div')
+div.id = 'app'
+document.body.appendChild(div)
+
+declare module 'vitest/browser' {
+  interface LocatorSelectors {
+    getByCSS(css: string): Locator
+  }
+}