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

@@ -19,7 +19,7 @@
     "test": "vitest",
     "test-unit": "vitest --project unit --project unit-jsdom",
     "test-e2e": "node scripts/build.js vue -f global -d && vitest --project e2e",
-    "test-e2e-vapor": "pnpm run prepare-e2e-vapor && vitest --project e2e-vapor",
+    "test-e2e-vapor": "vitest --project e2e-vapor",
     "prepare-e2e-vapor": "node scripts/build.js -f cjs+esm-bundler+esm-bundler-runtime && pnpm run -C packages-private/vapor-e2e-test build",
     "test-dts": "run-s build-dts test-dts-only",
     "test-dts-only": "tsc -p packages-private/dts-built-test/tsconfig.json && tsc -p ./packages-private/dts-test/tsconfig.test.json",
@@ -74,9 +74,10 @@
     "@types/node": "^22.17.2",
     "@types/semver": "^7.7.0",
     "@types/serve-handler": "^6.1.4",
-    "@vitest/ui": "^3.0.2",
-    "@vitest/coverage-v8": "^3.2.4",
-    "@vitest/eslint-plugin": "^1.3.4",
+    "@vitest/ui": "^4.0.0-beta.12",
+    "@vitest/browser": "^4.0.0-beta.12",
+    "@vitest/coverage-v8": "^4.0.0-beta.12",
+    "@vitest/eslint-plugin": "^1.3.12",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",
@@ -93,6 +94,7 @@
     "marked": "13.0.3",
     "npm-run-all2": "^7.0.2",
     "picocolors": "^1.1.1",
+    "playwright": "^1.55.1",
     "prettier": "^3.5.3",
     "pretty-bytes": "^6.1.1",
     "pug": "^3.0.3",
@@ -111,6 +113,6 @@
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.32.1",
     "vite": "catalog:",
-    "vitest": "^3.2.4"
+    "vitest": "^4.0.0-beta.12"
   }
 }

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

@@ -0,0 +1,9 @@
+import { type Locator, page, userEvent } from '@vitest/browser/context'
+
+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}')
+}

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

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