feat(browser): support actionTimeout as playwright provider options (#6984)

Author: hi-ogawa

packages/browser/matchers.d.ts

@@ -17,6 +17,10 @@ declare module 'vitest' {
   type PromisifyDomAssertion<T> = Promisify<Assertion<T>>
 
   interface ExpectStatic {
+    /**
+     * `expect.element(locator)` is a shorthand for `expect.poll(() => locator.element())`.
+     * You can set default timeout via `expect.poll.timeout` config.
+     */
     element: <T extends Element | Locator>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<Element | null>>
   }
 }

packages/browser/providers/playwright.d.ts

@@ -16,7 +16,13 @@ declare module 'vitest/node' {
     context?: Omit<
       BrowserContextOptions,
       'ignoreHTTPSErrors' | 'serviceWorkers'
-    >
+    > & {
+      /**
+       * The maximum time in milliseconds to wait for `userEvent` action to complete.
+       * @default 0 (no timeout)
+       */
+      actionTimeout?: number
+    }
   }
 
   export interface BrowserCommandContext {

packages/browser/src/node/commands/clear.ts

@@ -10,9 +10,7 @@ export const clear: UserEventCommand<UserEvent['clear']> = async (
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context
     const element = iframe.locator(selector)
-    await element.clear({
-      timeout: 1000,
-    })
+    await element.clear()
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser

packages/browser/src/node/commands/click.ts

@@ -11,10 +11,7 @@ export const click: UserEventCommand<UserEvent['click']> = async (
   const provider = context.provider
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe
-    await tester.locator(selector).click({
-      timeout: 1000,
-      ...options,
-    })
+    await tester.locator(selector).click(options)
   }
   else if (provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser
@@ -53,7 +50,6 @@ export const tripleClick: UserEventCommand<UserEvent['tripleClick']> = async (
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe
     await tester.locator(selector).click({
-      timeout: 1000,
       ...options,
       clickCount: 3,
     })

packages/browser/src/node/commands/dragAndDrop.ts

@@ -14,10 +14,7 @@ export const dragAndDrop: UserEventCommand<UserEvent['dragAndDrop']> = async (
     await frame.dragAndDrop(
       source,
       target,
-      {
-        timeout: 1000,
-        ...options_,
-      },
+      options_,
     )
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {

packages/browser/src/node/commands/fill.ts

@@ -12,7 +12,7 @@ export const fill: UserEventCommand<UserEvent['fill']> = async (
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context
     const element = iframe.locator(selector)
-    await element.fill(text, { timeout: 1000, ...options })
+    await element.fill(text, options)
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser

packages/browser/src/node/commands/hover.ts

@@ -9,10 +9,7 @@ export const hover: UserEventCommand<UserEvent['hover']> = async (
   options = {},
 ) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
-    await context.iframe.locator(selector).hover({
-      timeout: 1000,
-      ...options,
-    })
+    await context.iframe.locator(selector).hover(options)
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser

packages/browser/src/node/commands/screenshot.ts

@@ -30,7 +30,6 @@ export const screenshot: BrowserCommand<[string, ScreenshotOptions]> = async (
       const { element: selector, ...config } = options
       const element = context.iframe.locator(`${selector}`)
       const buffer = await element.screenshot({
-        timeout: 1000,
         ...config,
         path: savePath,
       })

packages/browser/src/node/commands/select.ts

@@ -26,10 +26,7 @@ export const selectOptions: UserEventCommand<UserEvent['selectOptions']> = async
       return elementHandler
     })) as (readonly string[]) | (readonly ElementHandle[])
 
-    await selectElement.selectOption(values, {
-      timeout: 1000,
-      ...options,
-    })
+    await selectElement.selectOption(values, options)
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {
     const values = userValues as any as [({ index: number })]

packages/browser/src/node/providers/playwright.ts

@@ -31,7 +31,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
   private options?: {
     launch?: LaunchOptions
-    context?: BrowserContextOptions
+    context?: BrowserContextOptions & { actionTimeout?: number }
   }
 
   public contexts = new Map<string, BrowserContext>()
@@ -108,15 +108,19 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
     }
 
     const browser = await this.openBrowser()
+    const { actionTimeout, ...contextOptions } = this.options?.context ?? {}
     const options = {
-      ...this.options?.context,
+      ...contextOptions,
       ignoreHTTPSErrors: true,
       serviceWorkers: 'allow',
     } satisfies BrowserContextOptions
     if (this.project.config.browser.ui) {
       options.viewport = null
     }
     const context = await browser.newContext(options)
+    if (actionTimeout) {
+      context.setDefaultTimeout(actionTimeout)
+    }
     this.contexts.set(contextId, context)
     return context
   }
@@ -187,7 +191,7 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
   async openPage(contextId: string, url: string, beforeNavigate?: () => Promise<void>) {
     const browserPage = await this.openBrowserPage(contextId)
     await beforeNavigate?.()
-    await browserPage.goto(url)
+    await browserPage.goto(url, { timeout: 0 })
   }
 
   async getCDPSession(contextId: string) {