test: use DOM click to stabilize dynamic transition name test

Author: edison1105

packages-private/vapor-e2e-test/__tests__/transition.spec.ts

@@ -16,6 +16,7 @@ const {
   transitionStart,
   waitForInnerHTML,
   click,
+  domClick,
 } = setupPuppeteer()
 
 const duration = process.env.CI ? 200 : 50
@@ -196,8 +197,9 @@ describe('vapor transition', () => {
         await waitForInnerHTML(containerSelector, '')
 
         // enter
-        await click(btnChangeNameSelector)
-        await nextTick()
+        await domClick(btnChangeNameSelector)
+        await waitForInnerHTML(btnChangeNameSelector, 'changed')
+
         expect(
           (await transitionStart(btnSelector, childSelector)).classNames,
         ).toStrictEqual(['test', 'changed-enter-from', 'changed-enter-active'])

packages/vue/__tests__/e2e/e2eUtils.ts

@@ -34,6 +34,7 @@ export async function expectByPolling(
 interface PuppeteerUtils {
   page: () => Page
   click(selector: string, options?: ClickOptions): Promise<void>
+  domClick(selector: string): Promise<void>
   count(selector: string): Promise<number>
   text(selector: string): Promise<string | null>
   value(selector: string): Promise<string>
@@ -111,6 +112,10 @@ export function setupPuppeteer(args?: string[]): PuppeteerUtils {
     await page.click(selector, options)
   }
 
+  async function domClick(selector: string): Promise<void> {
+    await page.$eval(selector, (el: any) => el.click())
+  }
+
   async function count(selector: string): Promise<number> {
     return (await page.$$(selector)).length
   }
@@ -271,6 +276,7 @@ export function setupPuppeteer(args?: string[]): PuppeteerUtils {
   return {
     page: () => page,
     click,
+    domClick,
     count,
     text,
     value,