fix(browser): user event cleanup on retry (#6764)

Author: hi-ogawa

packages/browser/src/client/tester/runner.ts

@@ -40,8 +40,12 @@ export function createBrowserRunner(
       this.config = options.config
     }
 
-    onAfterRunTask = async (task: Task) => {
+    onBeforeTryTask: VitestRunner['onBeforeTryTask'] = async (...args) => {
       await userEvent.cleanup()
+      await super.onBeforeTryTask?.(...args)
+    }
+
+    onAfterRunTask = async (task: Task) => {
       await super.onAfterRunTask?.(task)
 
       if (this.config.bail && task.result?.state === 'fail') {

packages/browser/src/client/tester/tester.ts

@@ -1,5 +1,5 @@
 import { SpyModule, collectTests, setupCommonEnv, startCoverageInsideWorker, startTests, stopCoverageInsideWorker } from 'vitest/browser'
-import { page } from '@vitest/browser/context'
+import { page, userEvent } from '@vitest/browser/context'
 import type { IframeMockEvent, IframeMockInvalidateEvent, IframeUnmockEvent } from '@vitest/browser/client'
 import { channel, client, onCancel, waitForChannel } from '@vitest/browser/client'
 import { executor, getBrowserState, getConfig, getWorkerState } from '../utils'
@@ -168,6 +168,9 @@ async function executeTests(method: 'run' | 'collect', files: string[]) {
       if (cleanupSymbol in page) {
         (page[cleanupSymbol] as any)()
       }
+      // need to cleanup for each tester
+      // since playwright keybaord API is stateful on page instance level
+      await userEvent.cleanup()
     }
     catch (error: any) {
       await client.rpc.onUnhandledError({

test/browser/fixtures/user-event/cleanup-retry.test.ts

@@ -0,0 +1,31 @@
+import { expect, onTestFinished, test } from 'vitest'
+import { userEvent } from '@vitest/browser/context'
+
+test('cleanup retry', { retry: 1 }, async (ctx) => {
+  let logs: any[] = [];
+  function handler(e: KeyboardEvent) {
+    logs.push([e.key, e.altKey]);
+  };
+  document.addEventListener('keydown', handler)
+  onTestFinished(() => {
+    document.removeEventListener('keydown', handler);
+  })
+
+  await userEvent.keyboard('{Tab}')
+  await userEvent.keyboard("{Alt>}")
+  if (ctx.task.result.retryCount === 0) {
+    throw new Error("test retry")
+  }
+  expect(logs).toEqual(
+    [
+      [
+        "Tab",
+        false,
+      ],
+      [
+        "Alt",
+        true,
+      ],
+    ]
+  )
+})

test/browser/specs/runner.test.ts

@@ -144,6 +144,7 @@ test('user-event', async () => {
   })
   expect(Object.fromEntries(ctx.state.getFiles().map(f => [f.name, f.result.state]))).toMatchInlineSnapshot(`
     {
+      "cleanup-retry.test.ts": "pass",
       "cleanup1.test.ts": "pass",
       "cleanup2.test.ts": "pass",
     }