test(vapor-e2e): migrate e2e tests to browser mode (#14618)

Author: edison1105

.github/renovate.json5

@@ -11,7 +11,13 @@
     },
     {
       groupName: 'test',
-      matchPackageNames: ['vitest', 'jsdom', 'puppeteer', '@vitest{/,}**'],
+      matchPackageNames: [
+        'vitest',
+        'jsdom',
+        'playwright',
+        'puppeteer',
+        '@vitest{/,}**',
+      ],
     },
     {
       groupName: 'playground',

.github/workflows/test.yml

@@ -70,18 +70,20 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - name: Setup cache for Chromium binary
+      - name: Setup cache for Playwright browsers
         uses: actions/cache@v5
         with:
-          path: ~/.cache/puppeteer
-          key: chromium-${{ hashFiles('pnpm-lock.yaml') }}
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
 
       - name: Setup Vite+
         uses: voidzero-dev/setup-vp@v1
         with:
           node-version-file: '.node-version'
           cache: true
-      - run: node node_modules/puppeteer/install.mjs
+
+      - name: Install Playwright Chromium
+        run: vp exec playwright install chromium
 
       - name: Run e2e tests
         run: vp run test-e2e-vapor

package.json

@@ -19,7 +19,7 @@
     "test": "vp test",
     "test-unit": "vp test --project unit*",
     "test-e2e": "node scripts/build.js -e vue -f global+esm-browser-vapor -d && vp test --project e2e",
-    "test-e2e-vapor": "vp run prepare-e2e-vapor && VUE_INCLUDE_VAPOR_BROWSER_E2E=1 vp test --project 'e2e-vapor*'",
+    "test-e2e-vapor": "vp run prepare-e2e-vapor && VAPOR_E2E=1 vp test --project e2e-vapor",
     "prepare-e2e-vapor": "node scripts/build.js -e -f cjs+esm-bundler+esm-bundler-runtime && vp build packages-private/vapor-e2e-test",
     "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 && tsc -p ./packages-private/dts-test/vapor/tsconfig.json",
@@ -58,7 +58,6 @@
     "@types/serve-handler": "^6.1.4",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.14",
     "@vue/consolidate": "1.0.0",
     "conventional-changelog-cli": "^5.0.0",
     "enquirer": "^2.4.1",

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

@@ -1,17 +1,73 @@
 import { type Locator, page, userEvent } from 'vitest/browser'
 
 export const css = (css: string) => page.getByCSS(css)
-export const E2E_TIMEOUT: number = 30 * 1000
+export const html = (selector: string) => css(selector).element().innerHTML
+export const E2E_TIMEOUT: number = 10 * 1000
 
-export async function enterValue(locator: Locator, text: string) {
-  await locator.fill(text)
-  await userEvent.type(locator, '{enter}')
+const duration = 50
+export function timeout(time: number) {
+  return new Promise(r => {
+    setTimeout(r, time)
+  })
 }
 
-export function nextFrame() {
-  return new Promise(resolve => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(resolve)
+export const transitionFinish = (time = duration) => timeout(time)
+
+export function waitForInnerHTML(
+  selector: string,
+  expected: string,
+  timeoutMs = 1000,
+) {
+  const container = css(selector).element()
+  const getHTML = () => container.innerHTML
+
+  if (getHTML().includes(expected)) {
+    return Promise.resolve()
+  }
+
+  return new Promise<void>((resolve, reject) => {
+    const cleanup = () => {
+      clearTimeout(timer)
+      observer.disconnect()
+    }
+
+    const check = () => {
+      if (getHTML().includes(expected)) {
+        cleanup()
+        resolve()
+      }
+    }
+
+    const observer = new MutationObserver(check)
+    const timer = setTimeout(() => {
+      const actual = getHTML()
+      cleanup()
+      reject(
+        new Error(
+          `Timed out waiting for innerHTML to contain ${expected} in ${selector}.\nReceived: ${actual}`,
+        ),
+      )
+    }, timeoutMs)
+
+    observer.observe(container, {
+      subtree: true,
+      childList: true,
+      characterData: true,
+      attributes: true,
     })
   })
 }
+
+export const nextFrame = () =>
+  new Promise(resolve => {
+    requestAnimationFrame(resolve)
+  })
+
+export const click = (selector: string) => {
+  ;(css(selector).element() as HTMLButtonElement).click()
+}
+
+export async function enterValue(locator: Locator, text: string) {
+  await locator.fill(text)
+  await userEvent.type(locator, '{enter}')
+}