fix(browser): fail playwright timeouts earlier than a test timeout (#7565)

Co-authored-by: Hiroshi Ogawa <hi.ogawa.zz@gmail.com>

Author: sheremet-va

docs/guide/browser/interactivity-api.md

@@ -292,7 +292,7 @@ References:
 ## userEvent.clear
 
 ```ts
-function clear(element: Element | Locator): Promise<void>
+function clear(element: Element | Locator, options?: UserEventClearOptions): Promise<void>
 ```
 
 This method clears the input element content.
@@ -451,6 +451,7 @@ References:
 function upload(
   element: Element | Locator,
   files: string[] | string | File[] | File,
+  options?: UserEventUploadOptions,
 ): Promise<void>
 ```
 

docs/guide/browser/locators.md

@@ -3,7 +3,7 @@ title: Locators | Browser Mode
 outline: [2, 3]
 ---
 
-# Locators <Version>2.1.0</Version>
+# Locators
 
 A locator is a representation of an element or a number of elements. Every locator is defined by a string called a selector. Vitest abstracts this selector by providing convenient methods that generate those selectors behind the scenes.
 
@@ -505,7 +505,7 @@ await page.getByRole('img', { name: 'Rose' }).tripleClick()
 ### clear
 
 ```ts
-function clear(): Promise<void>
+function clear(options?: UserEventClearOptions): Promise<void>
 ```
 
 Clears the input element content.

packages/browser/context.d.ts

@@ -142,7 +142,7 @@ export interface UserEvent {
    * @see {@link https://webdriver.io/docs/api/element/clearValue} WebdriverIO API
    * @see {@link https://testing-library.com/docs/user-event/utility/#clear} testing-library API
    */
-  clear: (element: Element | Locator) => Promise<void>
+  clear: (element: Element | Locator, options?: UserEventClearOptions) => Promise<void>
   /**
    * Sends a `Tab` key event. Uses provider's API under the hood.
    * @see {@link https://playwright.dev/docs/api/class-keyboard} Playwright API
@@ -171,7 +171,7 @@ export interface UserEvent {
    * @see {@link https://playwright.dev/docs/api/class-locator#locator-set-input-files} Playwright API
    * @see {@link https://testing-library.com/docs/user-event/utility#upload} testing-library API
    */
-  upload: (element: Element | Locator, files: File | File[] | string | string[]) => Promise<void>
+  upload: (element: Element | Locator, files: File | File[] | string | string[], options?: UserEventUploadOptions) => Promise<void>
   /**
    * Copies the selected content.
    * @see {@link https://playwright.dev/docs/api/class-keyboard} Playwright API
@@ -218,9 +218,11 @@ export interface UserEventFillOptions {}
 export interface UserEventHoverOptions {}
 export interface UserEventSelectOptions {}
 export interface UserEventClickOptions {}
+export interface UserEventClearOptions {}
 export interface UserEventDoubleClickOptions {}
 export interface UserEventTripleClickOptions {}
 export interface UserEventDragAndDropOptions {}
+export interface UserEventUploadOptions {}
 
 export interface LocatorOptions {
   /**
@@ -358,7 +360,7 @@ export interface Locator extends LocatorSelectors {
    * Clears the input element content
    * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-clear}
    */
-  clear(): Promise<void>
+  clear(options?: UserEventClearOptions): Promise<void>
   /**
    * Moves the cursor position to the selected element
    * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-hover}
@@ -391,7 +393,7 @@ export interface Locator extends LocatorSelectors {
    * Change a file input element to have the specified files. Uses provider's API under the hood.
    * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-upload}
    */
-  upload(files: File | File[] | string | string[]): Promise<void>
+  upload(files: File | File[] | string | string[], options?: UserEventUploadOptions): Promise<void>
 
   /**
    * Make a screenshot of an element matching the locator.

packages/browser/matchers.d.ts

@@ -19,7 +19,8 @@ declare module 'vitest' {
   interface ExpectStatic {
     /**
      * `expect.element(locator)` is a shorthand for `expect.poll(() => locator.element())`.
-     * You can set default timeout via `expect.poll.timeout` config.
+     * You can set default timeout via `expect.poll.timeout` option in the config.
+     * @see {@link https://vitest.dev/api/expect#poll}
      */
     element: <T extends Element | Locator>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<Element | null>>
   }

packages/browser/providers/playwright.d.ts

@@ -41,6 +41,7 @@ type PWFillOptions = NonNullable<Parameters<Page['fill']>[2]>
 type PWScreenshotOptions = NonNullable<Parameters<Page['screenshot']>[0]>
 type PWSelectOptions = NonNullable<Parameters<Page['selectOption']>[2]>
 type PWDragAndDropOptions = NonNullable<Parameters<Page['dragAndDrop']>[2]>
+type PWSetInputFiles = NonNullable<Parameters<Page['setInputFiles']>[2]>
 
 declare module '@vitest/browser/context' {
   export interface UserEventHoverOptions extends PWHoverOptions {}
@@ -50,6 +51,7 @@ declare module '@vitest/browser/context' {
   export interface UserEventFillOptions extends PWFillOptions {}
   export interface UserEventSelectOptions extends PWSelectOptions {}
   export interface UserEventDragAndDropOptions extends PWDragAndDropOptions {}
+  export interface UserEventUploadOptions extends PWSetInputFiles {}
 
   export interface ScreenshotOptions extends PWScreenshotOptions {}
 

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

@@ -4,25 +4,20 @@ import type {
   BrowserPage,
   Locator,
   UserEvent,
-  UserEventClickOptions,
-  UserEventDragAndDropOptions,
-  UserEventHoverOptions,
-  UserEventTabOptions,
-  UserEventTypeOptions,
 } from '../../../context'
 import type { BrowserRunnerState } from '../utils'
-import { convertElementToCssSelector, ensureAwaited, getBrowserState, getWorkerState } from '../utils'
+import { ensureAwaited, getBrowserState, getWorkerState } from '../utils'
+import { convertElementToCssSelector, processTimeoutOptions } from './utils'
 
 // this file should not import anything directly, only types and utils
 
-const state = () => getWorkerState()
 // @ts-expect-error not typed global
 const provider = __vitest_browser_runner__.provider
 const sessionId = getBrowserState().sessionId
 const channel = new BroadcastChannel(`vitest:${sessionId}`)
 
-function triggerCommand<T>(command: string, ...args: any[]) {
-  return getBrowserState().commands.triggerCommand<T>(command, args)
+function triggerCommand<T>(command: string, args: any[], error?: Error) {
+  return getBrowserState().commands.triggerCommand<T>(command, args, error)
 }
 
 export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent, options?: TestingLibraryOptions): UserEvent {
@@ -51,68 +46,71 @@ export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent
       if (!keyboard.unreleased.length) {
         return
       }
-      return ensureAwaited(async () => {
-        await triggerCommand('__vitest_cleanup', keyboard)
+      return ensureAwaited(async (error) => {
+        await triggerCommand('__vitest_cleanup', [keyboard], error)
         keyboard.unreleased = []
       })
     },
-    click(element: Element | Locator, options: UserEventClickOptions = {}) {
-      return convertToLocator(element).click(processClickOptions(options))
+    click(element, options) {
+      return convertToLocator(element).click(options)
     },
-    dblClick(element: Element | Locator, options: UserEventClickOptions = {}) {
-      return convertToLocator(element).dblClick(processClickOptions(options))
+    dblClick(element, options) {
+      return convertToLocator(element).dblClick(options)
     },
-    tripleClick(element: Element | Locator, options: UserEventClickOptions = {}) {
-      return convertToLocator(element).tripleClick(processClickOptions(options))
+    tripleClick(element, options) {
+      return convertToLocator(element).tripleClick(options)
     },
-    selectOptions(element, value) {
-      return convertToLocator(element).selectOptions(value)
+    selectOptions(element, value, options) {
+      return convertToLocator(element).selectOptions(value, options)
     },
-    clear(element: Element | Locator) {
-      return convertToLocator(element).clear()
+    clear(element, options) {
+      return convertToLocator(element).clear(options)
     },
-    hover(element: Element | Locator, options: UserEventHoverOptions = {}) {
-      return convertToLocator(element).hover(processHoverOptions(options))
+    hover(element, options) {
+      return convertToLocator(element).hover(options)
     },
-    unhover(element: Element | Locator, options: UserEventHoverOptions = {}) {
+    unhover(element, options) {
       return convertToLocator(element).unhover(options)
     },
-    upload(element: Element | Locator, files: string | string[] | File | File[]) {
-      return convertToLocator(element).upload(files)
+    upload(element, files: string | string[] | File | File[], options) {
+      return convertToLocator(element).upload(files, options)
     },
 
     // non userEvent events, but still useful
-    fill(element: Element | Locator, text: string, options) {
+    fill(element, text, options) {
       return convertToLocator(element).fill(text, options)
     },
-    dragAndDrop(source: Element | Locator, target: Element | Locator, options = {}) {
+    dragAndDrop(source, target, options) {
       const sourceLocator = convertToLocator(source)
       const targetLocator = convertToLocator(target)
-      return sourceLocator.dropTo(targetLocator, processDragAndDropOptions(options))
+      return sourceLocator.dropTo(targetLocator, options)
     },
 
     // testing-library user-event
-    async type(element: Element | Locator, text: string, options: UserEventTypeOptions = {}) {
-      return ensureAwaited(async () => {
+    async type(element, text, options) {
+      return ensureAwaited(async (error) => {
         const selector = convertToSelector(element)
         const { unreleased } = await triggerCommand<{ unreleased: string[] }>(
           '__vitest_type',
-          selector,
-          text,
-          { ...options, unreleased: keyboard.unreleased },
+          [
+            selector,
+            text,
+            { ...options, unreleased: keyboard.unreleased },
+          ],
+          error,
         )
         keyboard.unreleased = unreleased
       })
     },
-    tab(options: UserEventTabOptions = {}) {
-      return ensureAwaited(() => triggerCommand('__vitest_tab', options))
+    tab(options = {}) {
+      return ensureAwaited(error => triggerCommand('__vitest_tab', [options], error))
     },
-    async keyboard(text: string) {
-      return ensureAwaited(async () => {
+    async keyboard(text) {
+      return ensureAwaited(async (error) => {
         const { unreleased } = await triggerCommand<{ unreleased: string[] }>(
           '__vitest_keyboard',
-          text,
-          keyboard,
+          [text, keyboard],
+          error,
         )
         keyboard.unreleased = unreleased
       })
@@ -175,7 +173,7 @@ function createPreviewUserEvent(userEventBase: TestingLibraryUserEvent, options:
     async unhover(element: Element | Locator) {
       await userEvent.unhover(toElement(element))
     },
-    async upload(element: Element | Locator, files: string | string[] | File | File[]) {
+    async upload(element, files: string | string[] | File | File[]) {
       const uploadPromise = (Array.isArray(files) ? files : [files]).map(async (file) => {
         if (typeof file !== 'string') {
           return file
@@ -185,7 +183,7 @@ function createPreviewUserEvent(userEventBase: TestingLibraryUserEvent, options:
           content: string
           basename: string
           mime: string
-        }>('__vitest_fileInfo', file, 'base64')
+        }>('__vitest_fileInfo', [file, 'base64'])
 
         const fileInstance = fetch(`data:${mime};base64,${base64}`)
           .then(r => r.blob())
@@ -196,18 +194,18 @@ function createPreviewUserEvent(userEventBase: TestingLibraryUserEvent, options:
       return userEvent.upload(toElement(element) as HTMLElement, uploadFiles)
     },
 
-    async fill(element: Element | Locator, text: string) {
+    async fill(element, text) {
       await userEvent.clear(toElement(element))
       return userEvent.type(toElement(element), text)
     },
     async dragAndDrop() {
       throw new Error(`The "preview" provider doesn't support 'userEvent.dragAndDrop'`)
     },
 
-    async type(element: Element | Locator, text: string, options: UserEventTypeOptions = {}) {
+    async type(element, text, options) {
       await userEvent.type(toElement(element), text, options)
     },
-    async tab(options: UserEventTabOptions = {}) {
+    async tab(options) {
       await userEvent.tab(options)
     },
     async keyboard(text: string) {
@@ -282,36 +280,36 @@ export const page: BrowserPage = {
     const name
       = options.path || `${taskName.replace(/[^a-z0-9]/gi, '-')}-${number}.png`
 
-    return ensureAwaited(() => triggerCommand('__vitest_screenshot', name, {
+    return ensureAwaited(error => triggerCommand('__vitest_screenshot', [name, processTimeoutOptions({
       ...options,
       element: options.element
         ? convertToSelector(options.element)
         : undefined,
-    }))
+    })], error))
   },
   getByRole() {
-    throw new Error('Method "getByRole" is not implemented in the current provider.')
+    throw new Error(`Method "getByRole" is not implemented in the "${provider}" provider.`)
   },
   getByLabelText() {
-    throw new Error('Method "getByLabelText" is not implemented in the current provider.')
+    throw new Error(`Method "getByLabelText" is not implemented in the "${provider}" provider.`)
   },
   getByTestId() {
-    throw new Error('Method "getByTestId" is not implemented in the current provider.')
+    throw new Error(`Method "getByTestId" is not implemented in the "${provider}" provider.`)
   },
   getByAltText() {
-    throw new Error('Method "getByAltText" is not implemented in the current provider.')
+    throw new Error(`Method "getByAltText" is not implemented in the "${provider}" provider.`)
   },
   getByPlaceholder() {
-    throw new Error('Method "getByPlaceholder" is not implemented in the current provider.')
+    throw new Error(`Method "getByPlaceholder" is not implemented in the "${provider}" provider.`)
   },
   getByText() {
-    throw new Error('Method "getByText" is not implemented in the current provider.')
+    throw new Error(`Method "getByText" is not implemented in the "${provider}" provider.`)
   },
   getByTitle() {
-    throw new Error('Method "getByTitle" is not implemented in the current provider.')
+    throw new Error(`Method "getByTitle" is not implemented in the "${provider}" provider.`)
   },
   elementLocator() {
-    throw new Error('Method "elementLocator" is not implemented in the current provider.')
+    throw new Error(`Method "elementLocator" is not implemented in the "${provider}" provider.`)
   },
   extend(methods) {
     for (const key in methods) {
@@ -344,130 +342,3 @@ function convertToSelector(elementOrLocator: Element | Locator): string {
 function getTaskFullName(task: RunnerTask): string {
   return task.suite ? `${getTaskFullName(task.suite)} ${task.name}` : task.name
 }
-
-function processClickOptions(options_?: UserEventClickOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
-    return options_
-  }
-  if (provider === 'playwright') {
-    const options = options_ as NonNullable<
-      Parameters<import('playwright').Page['click']>[1]
-    >
-    if (options.position) {
-      options.position = processPlaywrightPosition(options.position)
-    }
-  }
-  if (provider === 'webdriverio') {
-    const options = options_ as import('webdriverio').ClickOptions
-    if (options.x != null || options.y != null) {
-      const cache = {}
-      if (options.x != null) {
-        options.x = scaleCoordinate(options.x, cache)
-      }
-      if (options.y != null) {
-        options.y = scaleCoordinate(options.y, cache)
-      }
-    }
-  }
-  return options_
-}
-
-function processHoverOptions(options_?: UserEventHoverOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
-    return options_
-  }
-
-  if (provider === 'playwright') {
-    const options = options_ as NonNullable<
-      Parameters<import('playwright').Page['hover']>[1]
-    >
-    if (options.position) {
-      options.position = processPlaywrightPosition(options.position)
-    }
-  }
-  if (provider === 'webdriverio') {
-    const options = options_ as import('webdriverio').MoveToOptions
-    const cache = {}
-    if (options.xOffset != null) {
-      options.xOffset = scaleCoordinate(options.xOffset, cache)
-    }
-    if (options.yOffset != null) {
-      options.yOffset = scaleCoordinate(options.yOffset, cache)
-    }
-  }
-  return options_
-}
-
-function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
-  // only ui scales the iframe, so we need to adjust the position
-  if (!options_ || !state().config.browser.ui) {
-    return options_
-  }
-  if (provider === 'playwright') {
-    const options = options_ as NonNullable<
-      Parameters<import('playwright').Page['dragAndDrop']>[2]
-    >
-    if (options.sourcePosition) {
-      options.sourcePosition = processPlaywrightPosition(options.sourcePosition)
-    }
-    if (options.targetPosition) {
-      options.targetPosition = processPlaywrightPosition(options.targetPosition)
-    }
-  }
-  if (provider === 'webdriverio') {
-    const cache = {}
-    const options = options_ as import('webdriverio').DragAndDropOptions & {
-      targetX?: number
-      targetY?: number
-      sourceX?: number
-      sourceY?: number
-    }
-    if (options.sourceX != null) {
-      options.sourceX = scaleCoordinate(options.sourceX, cache)
-    }
-    if (options.sourceY != null) {
-      options.sourceY = scaleCoordinate(options.sourceY, cache)
-    }
-    if (options.targetX != null) {
-      options.targetX = scaleCoordinate(options.targetX, cache)
-    }
-    if (options.targetY != null) {
-      options.targetY = scaleCoordinate(options.targetY, cache)
-    }
-  }
-  return options_
-}
-
-function scaleCoordinate(coordinate: number, cache: any) {
-  return Math.round(coordinate * getCachedScale(cache))
-}
-
-function getCachedScale(cache: { scale: number | undefined }) {
-  return cache.scale ??= getIframeScale()
-}
-
-function processPlaywrightPosition(position: { x: number; y: number }) {
-  const scale = getIframeScale()
-  if (position.x != null) {
-    position.x *= scale
-  }
-  if (position.y != null) {
-    position.y *= scale
-  }
-  return position
-}
-
-function getIframeScale() {
-  const testerUi = window.parent.document.querySelector('#tester-ui') as HTMLElement | null
-  if (!testerUi) {
-    throw new Error(`Cannot find Tester element. This is a bug in Vitest. Please, open a new issue with reproduction.`)
-  }
-  const scaleAttribute = testerUi.getAttribute('data-scale')
-  const scale = Number(scaleAttribute)
-  if (Number.isNaN(scale)) {
-    throw new TypeError(`Cannot parse scale value from Tester element (${scaleAttribute}). This is a bug in Vitest. Please, open a new issue with reproduction.`)
-  }
-  return scale
-}

packages/browser/src/client/tester/expect-element.ts

@@ -2,6 +2,7 @@ import type { Locator } from '@vitest/browser/context'
 import type { ExpectPollOptions } from 'vitest'
 import * as matchers from '@testing-library/jest-dom/matchers'
 import { chai, expect } from 'vitest'
+import { processTimeoutOptions } from './utils'
 
 export async function setupExpectDom(): Promise<void> {
   expect.extend(matchers)
@@ -38,6 +39,6 @@ export async function setupExpectDom(): Promise<void> {
       }
 
       return result
-    }, options)
+    }, processTimeoutOptions(options))
   }
 }

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

@@ -2,10 +2,13 @@ import type {
   LocatorByRoleOptions,
   LocatorOptions,
   LocatorScreenshotOptions,
+  UserEventClearOptions,
   UserEventClickOptions,
   UserEventDragAndDropOptions,
   UserEventFillOptions,
   UserEventHoverOptions,
+  UserEventSelectOptions,
+  UserEventUploadOptions,
 } from '@vitest/browser/context'
 import { page, server } from '@vitest/browser/context'
 import {
@@ -57,23 +60,23 @@ export abstract class Locator {
     return this.triggerCommand<void>('__vitest_tripleClick', this.selector, options)
   }
 
-  public clear(): Promise<void> {
-    return this.triggerCommand<void>('__vitest_clear', this.selector)
+  public clear(options?: UserEventClearOptions): Promise<void> {
+    return this.triggerCommand<void>('__vitest_clear', this.selector, options)
   }
 
-  public hover(options: UserEventHoverOptions): Promise<void> {
+  public hover(options?: UserEventHoverOptions): Promise<void> {
     return this.triggerCommand<void>('__vitest_hover', this.selector, options)
   }
 
-  public unhover(options: UserEventHoverOptions): Promise<void> {
+  public unhover(options?: UserEventHoverOptions): Promise<void> {
     return this.triggerCommand<void>('__vitest_hover', 'html > body', options)
   }
 
   public fill(text: string, options?: UserEventFillOptions): Promise<void> {
     return this.triggerCommand<void>('__vitest_fill', this.selector, text, options)
   }
 
-  public async upload(files: string | string[] | File | File[]): Promise<void> {
+  public async upload(files: string | string[] | File | File[], options?: UserEventUploadOptions): Promise<void> {
     const filesPromise = (Array.isArray(files) ? files : [files]).map(async (file) => {
       if (typeof file === 'string') {
         return file
@@ -91,7 +94,7 @@ export abstract class Locator {
         base64: bas64String,
       }
     })
-    return this.triggerCommand<void>('__vitest_upload', this.selector, await Promise.all(filesPromise))
+    return this.triggerCommand<void>('__vitest_upload', this.selector, await Promise.all(filesPromise), options)
   }
 
   public dropTo(target: Locator, options: UserEventDragAndDropOptions = {}): Promise<void> {
@@ -103,15 +106,18 @@ export abstract class Locator {
     )
   }
 
-  public selectOptions(value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[]): Promise<void> {
+  public selectOptions(
+    value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[],
+    options?: UserEventSelectOptions,
+  ): Promise<void> {
     const values = (Array.isArray(value) ? value : [value]).map((v) => {
       if (typeof v !== 'string') {
         const selector = 'element' in v ? v.selector : selectorEngine.generateSelectorSimple(v)
         return { element: selector }
       }
       return v
     })
-    return this.triggerCommand('__vitest_selectOptions', this.selector, values)
+    return this.triggerCommand('__vitest_selectOptions', this.selector, values, options)
   }
 
   public screenshot(options: Omit<LocatorScreenshotOptions, 'base64'> & { base64: true }): Promise<{
@@ -204,9 +210,10 @@ export abstract class Locator {
 
   protected triggerCommand<T>(command: string, ...args: any[]): Promise<T> {
     const commands = getBrowserState().commands
-    return ensureAwaited(() => commands.triggerCommand<T>(
+    return ensureAwaited(error => commands.triggerCommand<T>(
       command,
       args,
+      error,
     ))
   }
 }

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

@@ -1,3 +1,4 @@
+import type { UserEventClearOptions, UserEventClickOptions, UserEventDragAndDropOptions, UserEventFillOptions, UserEventHoverOptions, UserEventSelectOptions, UserEventUploadOptions } from '@vitest/browser/context'
 import { page, server } from '@vitest/browser/context'
 import {
   getByAltTextSelector,
@@ -8,6 +9,8 @@ import {
   getByTextSelector,
   getByTitleSelector,
 } from 'ivya'
+import { getBrowserState } from '../../utils'
+import { getIframeScale, processTimeoutOptions } from '../utils'
 import { Locator, selectorEngine } from './index'
 
 page.extend({
@@ -46,6 +49,50 @@ class PlaywrightLocator extends Locator {
     super()
   }
 
+  public override click(options?: UserEventClickOptions) {
+    return super.click(processTimeoutOptions(processClickOptions(options)))
+  }
+
+  public override dblClick(options?: UserEventClickOptions): Promise<void> {
+    return super.dblClick(processTimeoutOptions(processClickOptions(options)))
+  }
+
+  public override tripleClick(options?: UserEventClickOptions): Promise<void> {
+    return super.tripleClick(processTimeoutOptions(processClickOptions(options)))
+  }
+
+  public override selectOptions(
+    value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[],
+    options?: UserEventSelectOptions,
+  ): Promise<void> {
+    return super.selectOptions(value, processTimeoutOptions(options))
+  }
+
+  public override clear(options?: UserEventClearOptions): Promise<void> {
+    return super.clear(processTimeoutOptions(options))
+  }
+
+  public override hover(options?: UserEventHoverOptions): Promise<void> {
+    return super.hover(processTimeoutOptions(processHoverOptions(options)))
+  }
+
+  public override upload(
+    files: string | string[] | File | File[],
+    options?: UserEventUploadOptions,
+  ): Promise<void> {
+    return super.upload(files, processTimeoutOptions(options))
+  }
+
+  public override fill(text: string, options?: UserEventFillOptions): Promise<void> {
+    return super.fill(text, processTimeoutOptions(options))
+  }
+
+  public override dropTo(target: Locator, options?: UserEventDragAndDropOptions): Promise<void> {
+    return super.dropTo(target, processTimeoutOptions(
+      processDragAndDropOptions(options),
+    ))
+  }
+
   protected locator(selector: string) {
     return new PlaywrightLocator(`${this.selector} >> ${selector}`, this._container)
   }
@@ -57,3 +104,59 @@ class PlaywrightLocator extends Locator {
     )
   }
 }
+
+function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const options = options_ as NonNullable<
+    Parameters<import('playwright').Page['dragAndDrop']>[2]
+  >
+  if (options.sourcePosition) {
+    options.sourcePosition = processPlaywrightPosition(options.sourcePosition)
+  }
+  if (options.targetPosition) {
+    options.targetPosition = processPlaywrightPosition(options.targetPosition)
+  }
+  return options_
+}
+
+function processHoverOptions(options_?: UserEventHoverOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const options = options_ as NonNullable<
+    Parameters<import('playwright').Page['hover']>[1]
+  >
+  if (options.position) {
+    options.position = processPlaywrightPosition(options.position)
+  }
+  return options_
+}
+
+function processClickOptions(options_?: UserEventClickOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const options = options_ as NonNullable<
+    Parameters<import('playwright').Page['click']>[1]
+  >
+  if (options.position) {
+    options.position = processPlaywrightPosition(options.position)
+  }
+  return options
+}
+
+function processPlaywrightPosition(position: { x: number; y: number }) {
+  const scale = getIframeScale()
+  if (position.x != null) {
+    position.x *= scale
+  }
+  if (position.y != null) {
+    position.y *= scale
+  }
+  return position
+}

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

@@ -8,8 +8,8 @@ import {
   getByTextSelector,
   getByTitleSelector,
 } from 'ivya'
-import { convertElementToCssSelector } from '../../utils'
 import { getElementError } from '../public-utils'
+import { convertElementToCssSelector } from '../utils'
 import { Locator, selectorEngine } from './index'
 
 page.extend({

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

@@ -1,3 +1,4 @@
+import type { UserEventClickOptions, UserEventDragAndDropOptions, UserEventHoverOptions, UserEventSelectOptions } from '@vitest/browser/context'
 import { page, server } from '@vitest/browser/context'
 import {
   getByAltTextSelector,
@@ -8,8 +9,9 @@ import {
   getByTextSelector,
   getByTitleSelector,
 } from 'ivya'
-import { convertElementToCssSelector } from '../../utils'
+import { getBrowserState } from '../../utils'
 import { getElementError } from '../public-utils'
+import { convertElementToCssSelector, getIframeScale } from '../utils'
 import { Locator, selectorEngine } from './index'
 
 page.extend({
@@ -45,17 +47,40 @@ class WebdriverIOLocator extends Locator {
     super()
   }
 
-  override get selector() {
+  override get selector(): string {
     const selectors = this.elements().map(element => convertElementToCssSelector(element))
     if (!selectors.length) {
       throw getElementError(this._pwSelector, this._container || document.body)
     }
     return selectors.join(', ')
   }
 
-  public selectOptions(value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[]): Promise<void> {
+  public override click(options?: UserEventClickOptions): Promise<void> {
+    return super.click(processClickOptions(options))
+  }
+
+  public override dblClick(options?: UserEventClickOptions): Promise<void> {
+    return super.dblClick(processClickOptions(options))
+  }
+
+  public override tripleClick(options?: UserEventClickOptions): Promise<void> {
+    return super.tripleClick(processClickOptions(options))
+  }
+
+  public selectOptions(
+    value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[],
+    options?: UserEventSelectOptions,
+  ): Promise<void> {
     const values = getWebdriverioSelectOptions(this.element(), value)
-    return this.triggerCommand('__vitest_selectOptions', this.selector, values)
+    return this.triggerCommand('__vitest_selectOptions', this.selector, values, options)
+  }
+
+  public override hover(options?: UserEventHoverOptions): Promise<void> {
+    return super.hover(processHoverOptions(options))
+  }
+
+  public override dropTo(target: Locator, options?: UserEventDragAndDropOptions): Promise<void> {
+    return super.dropTo(target, processDragAndDropOptions(options))
   }
 
   protected locator(selector: string) {
@@ -107,3 +132,72 @@ function getWebdriverioSelectOptions(element: Element, value: string | string[]
 
   return [{ index: labelIndex }]
 }
+
+function processClickOptions(options_?: UserEventClickOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const options = options_ as import('webdriverio').ClickOptions
+  if (options.x != null || options.y != null) {
+    const cache = {}
+    if (options.x != null) {
+      options.x = scaleCoordinate(options.x, cache)
+    }
+    if (options.y != null) {
+      options.y = scaleCoordinate(options.y, cache)
+    }
+  }
+  return options_
+}
+
+function processHoverOptions(options_?: UserEventHoverOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const options = options_ as import('webdriverio').MoveToOptions
+  const cache = {}
+  if (options.xOffset != null) {
+    options.xOffset = scaleCoordinate(options.xOffset, cache)
+  }
+  if (options.yOffset != null) {
+    options.yOffset = scaleCoordinate(options.yOffset, cache)
+  }
+  return options_
+}
+
+function processDragAndDropOptions(options_?: UserEventDragAndDropOptions) {
+  // only ui scales the iframe, so we need to adjust the position
+  if (!options_ || !getBrowserState().config.browser.ui) {
+    return options_
+  }
+  const cache = {}
+  const options = options_ as import('webdriverio').DragAndDropOptions & {
+    targetX?: number
+    targetY?: number
+    sourceX?: number
+    sourceY?: number
+  }
+  if (options.sourceX != null) {
+    options.sourceX = scaleCoordinate(options.sourceX, cache)
+  }
+  if (options.sourceY != null) {
+    options.sourceY = scaleCoordinate(options.sourceY, cache)
+  }
+  if (options.targetX != null) {
+    options.targetX = scaleCoordinate(options.targetX, cache)
+  }
+  if (options.targetY != null) {
+    options.targetY = scaleCoordinate(options.targetY, cache)
+  }
+  return options_
+}
+
+function scaleCoordinate(coordinate: number, cache: any) {
+  return Math.round(coordinate * getCachedScale(cache))
+}
+
+function getCachedScale(cache: { scale: number | undefined }) {
+  return cache.scale ??= getIframeScale()
+}

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

@@ -1,14 +1,15 @@
 import { channel, client, onCancel } from '@vitest/browser/client'
 import { page, server, userEvent } from '@vitest/browser/context'
 import { collectTests, setupCommonEnv, SpyModule, startCoverageInsideWorker, startTests, stopCoverageInsideWorker } from 'vitest/browser'
-import { CommandsManager, executor, getBrowserState, getConfig, getWorkerState } from '../utils'
+import { executor, getBrowserState, getConfig, getWorkerState } from '../utils'
 import { setupDialogsSpy } from './dialog'
 import { setupExpectDom } from './expect-element'
 import { setupConsoleLogSpy } from './logger'
 import { VitestBrowserClientMocker } from './mocker'
 import { createModuleMockerInterceptor } from './msw'
 import { createSafeRpc } from './rpc'
 import { browserHashMap, initiateRunner } from './runner'
+import { CommandsManager } from './utils'
 
 const cleanupSymbol = Symbol.for('vitest:component-cleanup')
 

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

@@ -0,0 +1,180 @@
+import type { BrowserRPC } from '../client'
+import { getBrowserState, getWorkerState } from '../utils'
+
+const provider = getBrowserState().provider
+
+/* @__NO_SIDE_EFFECTS__ */
+export function convertElementToCssSelector(element: Element): string {
+  if (!element || !(element instanceof Element)) {
+    throw new Error(
+      `Expected DOM element to be an instance of Element, received ${typeof element}`,
+    )
+  }
+
+  return getUniqueCssSelector(element)
+}
+
+function escapeIdForCSSSelector(id: string) {
+  return id
+    .split('')
+    .map((char) => {
+      const code = char.charCodeAt(0)
+
+      if (char === ' ' || char === '#' || char === '.' || char === ':' || char === '[' || char === ']' || char === '>' || char === '+' || char === '~' || char === '\\') {
+        // Escape common special characters with backslashes
+        return `\\${char}`
+      }
+      else if (code >= 0x10000) {
+        // Unicode escape for characters outside the BMP
+        return `\\${code.toString(16).toUpperCase().padStart(6, '0')} `
+      }
+      else if (code < 0x20 || code === 0x7F) {
+        // Non-printable ASCII characters (0x00-0x1F and 0x7F) are escaped
+        return `\\${code.toString(16).toUpperCase().padStart(2, '0')} `
+      }
+      else if (code >= 0x80) {
+        // Non-ASCII characters (0x80 and above) are escaped
+        return `\\${code.toString(16).toUpperCase().padStart(2, '0')} `
+      }
+      else {
+        // Allowable characters are used directly
+        return char
+      }
+    })
+    .join('')
+}
+
+function getUniqueCssSelector(el: Element) {
+  const path = []
+  let parent: null | ParentNode
+  let hasShadowRoot = false
+  // eslint-disable-next-line no-cond-assign
+  while (parent = getParent(el)) {
+    if ((parent as Element).shadowRoot) {
+      hasShadowRoot = true
+    }
+
+    const tag = el.tagName
+    if (el.id) {
+      path.push(`#${escapeIdForCSSSelector(el.id)}`)
+    }
+    else if (!el.nextElementSibling && !el.previousElementSibling) {
+      path.push(tag.toLowerCase())
+    }
+    else {
+      let index = 0
+      let sameTagSiblings = 0
+      let elementIndex = 0
+
+      for (const sibling of parent.children) {
+        index++
+        if (sibling.tagName === tag) {
+          sameTagSiblings++
+        }
+        if (sibling === el) {
+          elementIndex = index
+        }
+      }
+
+      if (sameTagSiblings > 1) {
+        path.push(`${tag.toLowerCase()}:nth-child(${elementIndex})`)
+      }
+      else {
+        path.push(tag.toLowerCase())
+      }
+    }
+    el = parent as Element
+  };
+  return `${getBrowserState().provider === 'webdriverio' && hasShadowRoot ? '>>>' : ''}${path.reverse().join(' > ')}`
+}
+
+function getParent(el: Element) {
+  const parent = el.parentNode
+  if (parent instanceof ShadowRoot) {
+    return parent.host
+  }
+  return parent
+}
+
+export class CommandsManager {
+  private _listeners: ((command: string, args: any[]) => void)[] = []
+
+  public onCommand(listener: (command: string, args: any[]) => void): void {
+    this._listeners.push(listener)
+  }
+
+  public async triggerCommand<T>(
+    command: string,
+    args: any[],
+    // error makes sure the stack trace is correct on webkit,
+    // if we make the error here, it looses the context
+    clientError: Error = new Error('empty'),
+  ): Promise<T> {
+    const state = getWorkerState()
+    const rpc = state.rpc as any as BrowserRPC
+    const { sessionId } = getBrowserState()
+    const filepath = state.filepath || state.current?.file?.filepath
+    args = args.filter(arg => arg !== undefined) // remove optional fields
+    if (this._listeners.length) {
+      await Promise.all(this._listeners.map(listener => listener(command, args)))
+    }
+    return rpc.triggerCommand<T>(sessionId, command, filepath, args).catch((err) => {
+      // rethrow an error to keep the stack trace in browser
+      // const clientError = new Error(err.message)
+      clientError.message = err.message
+      clientError.name = err.name
+      clientError.stack = clientError.stack?.replace(clientError.message, err.message)
+      throw clientError
+    })
+  }
+}
+
+const now = Date.now
+
+export function processTimeoutOptions<T extends { timeout?: number }>(options_?: T): T | undefined {
+  if (
+    // if timeout is set, keep it
+    (options_ && options_.timeout != null)
+    // timeout can only be set for playwright commands
+    || provider !== 'playwright'
+  ) {
+    return options_
+  }
+  // if there is a default action timeout, use it
+  if (getWorkerState().config.browser.providerOptions.actionTimeout != null) {
+    return options_
+  }
+  const currentTest = getWorkerState().current
+  const startTime = currentTest?.result?.startTime
+  // ignore timeout if this is called outside of a test
+  if (!currentTest || currentTest.type === 'suite' || !startTime) {
+    return options_
+  }
+  const timeout = currentTest.timeout
+  if (timeout === 0 || timeout === Number.POSITIVE_INFINITY) {
+    return options_
+  }
+  options_ = options_ || {} as T
+  const currentTime = now()
+  const endTime = startTime + timeout
+  const remainingTime = endTime - currentTime
+  if (remainingTime <= 0) {
+    return options_
+  }
+  // give us some time to process the timeout
+  options_.timeout = remainingTime - 100
+  return options_
+}
+
+export function getIframeScale(): number {
+  const testerUi = window.parent.document.querySelector('#tester-ui') as HTMLElement | null
+  if (!testerUi) {
+    throw new Error(`Cannot find Tester element. This is a bug in Vitest. Please, open a new issue with reproduction.`)
+  }
+  const scaleAttribute = testerUi.getAttribute('data-scale')
+  const scale = Number(scaleAttribute)
+  if (Number.isNaN(scale)) {
+    throw new TypeError(`Cannot parse scale value from Tester element (${scaleAttribute}). This is a bug in Vitest. Please, open a new issue with reproduction.`)
+  }
+  return scale
+}

packages/browser/src/client/utils.ts

@@ -1,5 +1,5 @@
 import type { SerializedConfig, WorkerGlobalState } from 'vitest'
-import type { BrowserRPC } from './client'
+import type { CommandsManager } from './tester/utils'
 
 export async function importId(id: string): Promise<any> {
   const name = `/@id/${id}`.replace(/\\/g, '/')
@@ -26,7 +26,7 @@ export function getConfig(): SerializedConfig {
   return getBrowserState().config
 }
 
-export function ensureAwaited<T>(promise: () => Promise<T>): Promise<T> {
+export function ensureAwaited<T>(promise: (error?: Error) => Promise<T>): Promise<T> {
   const test = getWorkerState().current
   if (!test || test.type !== 'test') {
     return promise()
@@ -48,13 +48,13 @@ export function ensureAwaited<T>(promise: () => Promise<T>): Promise<T> {
   return {
     then(onFulfilled, onRejected) {
       awaited = true
-      return (promiseResult ||= promise()).then(onFulfilled, onRejected)
+      return (promiseResult ||= promise(sourceError)).then(onFulfilled, onRejected)
     },
     catch(onRejected) {
-      return (promiseResult ||= promise()).catch(onRejected)
+      return (promiseResult ||= promise(sourceError)).catch(onRejected)
     },
     finally(onFinally) {
-      return (promiseResult ||= promise()).finally(onFinally)
+      return (promiseResult ||= promise(sourceError)).finally(onFinally)
     },
     [Symbol.toStringTag]: 'Promise',
   } satisfies Promise<T>
@@ -103,115 +103,3 @@ export function getWorkerState(): WorkerGlobalState {
   }
   return state
 }
-
-/* @__NO_SIDE_EFFECTS__ */
-export function convertElementToCssSelector(element: Element): string {
-  if (!element || !(element instanceof Element)) {
-    throw new Error(
-      `Expected DOM element to be an instance of Element, received ${typeof element}`,
-    )
-  }
-
-  return getUniqueCssSelector(element)
-}
-
-function escapeIdForCSSSelector(id: string) {
-  return id
-    .split('')
-    .map((char) => {
-      const code = char.charCodeAt(0)
-
-      if (char === ' ' || char === '#' || char === '.' || char === ':' || char === '[' || char === ']' || char === '>' || char === '+' || char === '~' || char === '\\') {
-        // Escape common special characters with backslashes
-        return `\\${char}`
-      }
-      else if (code >= 0x10000) {
-        // Unicode escape for characters outside the BMP
-        return `\\${code.toString(16).toUpperCase().padStart(6, '0')} `
-      }
-      else if (code < 0x20 || code === 0x7F) {
-        // Non-printable ASCII characters (0x00-0x1F and 0x7F) are escaped
-        return `\\${code.toString(16).toUpperCase().padStart(2, '0')} `
-      }
-      else if (code >= 0x80) {
-        // Non-ASCII characters (0x80 and above) are escaped
-        return `\\${code.toString(16).toUpperCase().padStart(2, '0')} `
-      }
-      else {
-        // Allowable characters are used directly
-        return char
-      }
-    })
-    .join('')
-}
-
-function getUniqueCssSelector(el: Element) {
-  const path = []
-  let parent: null | ParentNode
-  let hasShadowRoot = false
-  // eslint-disable-next-line no-cond-assign
-  while (parent = getParent(el)) {
-    if ((parent as Element).shadowRoot) {
-      hasShadowRoot = true
-    }
-
-    const tag = el.tagName
-    if (el.id) {
-      path.push(`#${escapeIdForCSSSelector(el.id)}`)
-    }
-    else if (!el.nextElementSibling && !el.previousElementSibling) {
-      path.push(tag.toLowerCase())
-    }
-    else {
-      let index = 0
-      let sameTagSiblings = 0
-      let elementIndex = 0
-
-      for (const sibling of parent.children) {
-        index++
-        if (sibling.tagName === tag) {
-          sameTagSiblings++
-        }
-        if (sibling === el) {
-          elementIndex = index
-        }
-      }
-
-      if (sameTagSiblings > 1) {
-        path.push(`${tag.toLowerCase()}:nth-child(${elementIndex})`)
-      }
-      else {
-        path.push(tag.toLowerCase())
-      }
-    }
-    el = parent as Element
-  };
-  return `${getBrowserState().provider === 'webdriverio' && hasShadowRoot ? '>>>' : ''}${path.reverse().join(' > ')}`
-}
-
-function getParent(el: Element) {
-  const parent = el.parentNode
-  if (parent instanceof ShadowRoot) {
-    return parent.host
-  }
-  return parent
-}
-
-export class CommandsManager {
-  private _listeners: ((command: string, args: any[]) => void)[] = []
-
-  public onCommand(listener: (command: string, args: any[]) => void): void {
-    this._listeners.push(listener)
-  }
-
-  public async triggerCommand<T>(command: string, args: any[]): Promise<T> {
-    const state = getWorkerState()
-    const rpc = state.rpc as any as BrowserRPC
-    const { sessionId } = getBrowserState()
-    const filepath = state.filepath || state.current?.file?.filepath
-    if (this._listeners.length) {
-      await Promise.all(this._listeners.map(listener => listener(command, args)))
-    }
-    return rpc.triggerCommand<T>(sessionId, command, filepath, args)
-  }
-}

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

@@ -59,7 +59,7 @@ export const tripleClick: UserEventCommand<UserEvent['tripleClick']> = async (
     await browser
       .action('pointer', { parameters: { pointerType: 'mouse' } })
       // move the pointer over the button
-      .move({ origin: await browser.$(selector) })
+      .move({ origin: browser.$(selector) })
       // simulate 3 clicks
       .down()
       .up()

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

@@ -19,6 +19,6 @@ export const fill: UserEventCommand<UserEvent['fill']> = async (
     await browser.$(selector).setValue(text)
   }
   else {
-    throw new TypeError(`Provider "${context.provider.name}" does not support clearing elements`)
+    throw new TypeError(`Provider "${context.provider.name}" does not support filling inputs`)
   }
 }

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

@@ -202,7 +202,7 @@ function focusIframe() {
 
 function selectAll() {
   const element = document.activeElement as HTMLInputElement
-  if (element && element.select) {
+  if (element && typeof element.select === 'function') {
     element.select()
   }
 }

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

@@ -45,7 +45,7 @@ export const type: UserEventCommand<UserEvent['type']> = async (
       text,
       () => browser.execute(() => {
         const element = document.activeElement as HTMLInputElement
-        if (element) {
+        if (element && typeof element.select === 'function') {
           element.select()
         }
       }),

packages/runner/src/suite.ts

@@ -303,6 +303,7 @@ function createSuiteCollector(
   initSuite(true)
 
   const task = function (name = '', options: TaskCustomOptions = {}) {
+    const timeout = options?.timeout ?? runner.config.testTimeout
     const task: Test = {
       id: '',
       name,
@@ -312,6 +313,7 @@ function createSuiteCollector(
       context: undefined!,
       type: 'test',
       file: undefined!,
+      timeout,
       retry: options.retry ?? runner.config.retry,
       repeats: options.repeats,
       mode: options.only
@@ -345,7 +347,7 @@ function createSuiteCollector(
         task,
         withTimeout(
           withAwaitAsyncAssertions(withFixtures(handler, context), task),
-          options?.timeout ?? runner.config.testTimeout,
+          timeout,
         ),
       )
     }

packages/runner/src/types/tasks.ts

@@ -247,6 +247,10 @@ export interface Test<ExtraContext = object> extends TaskPopulated {
    * Test context that will be passed to the test function.
    */
   context: TestContext & ExtraContext
+  /**
+   * The test timeout in milliseconds.
+   */
+  timeout: number
 }
 
 /**

packages/vitest/src/integrations/chai/poll.ts

@@ -91,7 +91,7 @@ export function createExpectPoll(expect: ExpectStatic): ExpectStatic['poll'] {
               const rejectWithCause = (cause: any) => {
                 reject(
                   copyStackTrace(
-                    new Error(`Matcher did not succeed in ${timeout}ms`, {
+                    new Error('Matcher did not succeed in time.', {
                       cause,
                     }),
                     STACK_TRACE_ERROR,

packages/vitest/src/node/config/serializeConfig.ts

@@ -156,6 +156,11 @@ export function serializeConfig(
         locators: {
           testIdAttribute: browser.locators.testIdAttribute,
         },
+        providerOptions: browser.provider === 'playwright'
+          ? {
+              actionTimeout: (browser.providerOptions as any)?.context?.actionTimeout,
+            }
+          : {},
       }
     })(config.browser),
     standalone: config.standalone,

packages/vitest/src/node/error.ts

@@ -264,6 +264,9 @@ const skipErrorProperties = new Set([
   'actual',
   'expected',
   'diffOptions',
+  'sourceURL',
+  'column',
+  'line',
   'VITEST_TEST_NAME',
   'VITEST_TEST_PATH',
   'VITEST_AFTER_ENV_TEARDOWN',

packages/vitest/src/node/reporters/junit.ts

@@ -317,6 +317,7 @@ export class JUnitReporter implements Reporter {
           mode: 'run',
           result: file.result,
           meta: {},
+          timeout: 0,
           // NOTE: not used in JUnitReporter
           context: null as any,
           suite: null as any,

packages/vitest/src/runtime/config.ts

@@ -126,6 +126,10 @@ export interface SerializedConfig {
       testIdAttribute: string
     }
     screenshotFailures: boolean
+    providerOptions: {
+      // for playwright
+      actionTimeout?: number
+    }
   }
   standalone: boolean
   logHeapUsage: boolean | undefined

packages/vitest/src/typecheck/collect.ts

@@ -202,6 +202,7 @@ export async function collectTests(
         suite: latestSuite,
         file,
         mode,
+        timeout: 0,
         context: {} as any, // not used in typecheck
         name: definition.name,
         end: definition.end,

test/browser/package.json

@@ -10,6 +10,7 @@
     "test:safaridriver": "PROVIDER=webdriverio BROWSER=safari pnpm run test:unit",
     "test-fixtures": "vitest",
     "test-mocking": "vitest --root ./fixtures/mocking",
+    "test-timeout": "vitest --root ./fixtures/timeout",
     "test-mocking-watch": "vitest --root ./fixtures/mocking-watch",
     "test-locators": "vitest --root ./fixtures/locators",
     "test-different-configs": "vitest --root ./fixtures/multiple-different-configs",

test/browser/specs/runner.test.ts

@@ -175,7 +175,20 @@ error with a stack
 
     expect(stderr).toMatch(/bundled-lib\/src\/b.js:2:(8|18)/)
     expect(stderr).toMatch(/bundled-lib\/src\/index.js:5:(15|17)/)
-    expect(stderr).toMatch(/test\/failing.test.ts:25:(2|8)/)
+
+    if (provider === 'playwright') {
+      // page.getByRole('code').click()
+      expect(stderr).toContain('locator.click: Timeout')
+      // playwright error is proxied from the server to the client and back correctly
+      expect(stderr).toContain('waiting for locator(\'[data-vitest="true"]\').contentFrame().getByRole(\'code\')')
+      expect(stderr).toMatch(/test\/failing.test.ts:27:(33|39)/)
+      // await expect.element().toBeVisible()
+      expect(stderr).toContain('Cannot find element with locator: getByRole(\'code\')')
+      expect(stderr).toMatch(/test\/failing.test.ts:31:(49|61)/)
+    }
+
+    // index() is called from a bundled file
+    expect(stderr).toMatch(/test\/failing.test.ts:36:(2|8)/)
   })
 
   test('popup apis should log a warning', () => {
@@ -210,7 +223,7 @@ test('timeout', async () => {
   const { stderr } = await runBrowserTests({
     root: './fixtures/timeout',
   })
-  expect(stderr).toContain('Matcher did not succeed in 500ms')
+  expect(stderr).toContain('Matcher did not succeed in time.')
   if (provider === 'playwright') {
     expect(stderr).toContain('locator.click: Timeout 500ms exceeded.')
     expect(stderr).toContain('locator.click: Timeout 345ms exceeded.')

test/browser/test/failing.test.ts

@@ -1,6 +1,6 @@
-import { page } from '@vitest/browser/context'
+import { page, server } from '@vitest/browser/context'
 import { index } from '@vitest/bundled-lib'
-import { expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import { throwError } from '../src/error'
 
 document.body.innerHTML = `
@@ -21,6 +21,17 @@ it('several locator methods are not awaited', () => {
   page.getByRole('button').tripleClick()
 })
 
+describe.runIf(server.provider === 'playwright')('timeouts are failing correctly', () => {
+  it('click on non-existing element fails', async () => {
+    await new Promise(r => setTimeout(r, 100))
+    await page.getByRole('code').click()
+  }, 1000)
+
+  it('expect.element on non-existing element fails', async () => {
+    await expect.element(page.getByRole('code')).toBeVisible()
+  }, 1000)
+})
+
 it('correctly prints error from a bundled file', () => {
   index()
 })

test/cli/fixtures/custom-pool/pool/custom-pool.ts

@@ -42,6 +42,7 @@ export default (vitest: Vitest): ProcessPool => {
           suite: taskFile,
           mode: 'run',
           meta: {},
+          timeout: 0,
           file: taskFile,
           result: {
             state: 'pass',

test/core/test/expect-poll.test.ts

@@ -37,7 +37,7 @@ test('timeout', async () => {
   await expect(async () => {
     await expect.poll(() => false, { timeout: 100, interval: 10 }).toBe(true)
   }).rejects.toThrowError(expect.objectContaining({
-    message: 'Matcher did not succeed in 100ms',
+    message: 'Matcher did not succeed in time.',
     stack: expect.stringContaining('expect-poll.test.ts:38:68'),
     cause: expect.objectContaining({
       message: 'expected false to be true // Object.is equality',
@@ -60,7 +60,7 @@ test('fake timers don\'t break it', async () => {
   vi.useFakeTimers()
   await expect(async () => {
     await expect.poll(() => false, { timeout: 100 }).toBe(true)
-  }).rejects.toThrowError('Matcher did not succeed in 100ms')
+  }).rejects.toThrowError('Matcher did not succeed in time.')
   vi.useRealTimers()
   const diff = Date.now() - now
   expect(diff >= 100).toBe(true)
@@ -91,7 +91,7 @@ test('toBeDefined', async () => {
   await expect(() =>
     expect.poll(() => 1, { timeout: 100, interval: 10 }).not.toBeDefined(),
   ).rejects.toThrowError(expect.objectContaining({
-    message: 'Matcher did not succeed in 100ms',
+    message: 'Matcher did not succeed in time.',
     cause: expect.objectContaining({
       message: 'expected 1 to be undefined',
     }),
@@ -100,7 +100,7 @@ test('toBeDefined', async () => {
   await expect(() =>
     expect.poll(() => undefined, { timeout: 100, interval: 10 }).toBeDefined(),
   ).rejects.toThrowError(expect.objectContaining({
-    message: 'Matcher did not succeed in 100ms',
+    message: 'Matcher did not succeed in time.',
     cause: expect.objectContaining({
       message: 'expected undefined to be defined',
     }),
@@ -140,7 +140,7 @@ test('should handle failure on last attempt', async () => {
   await expect(async () => {
     await expect.poll(fn, { interval: 10, timeout: 100 }).toBe(1)
   }).rejects.toThrowError(expect.objectContaining({
-    message: 'Matcher did not succeed in 100ms',
+    message: 'Matcher did not succeed in time.',
     cause: expect.objectContaining({
       // makes sure cause message reflects the last attempt value
       message: 'expected 3 to be 1 // Object.is equality',

test/reporters/src/data.ts

@@ -49,6 +49,7 @@ passedFile.tasks.push({
   suite,
   meta: {},
   file: passedFile,
+  timeout: 0,
   result: {
     state: 'pass',
     duration: 1.4422860145568848,
@@ -95,6 +96,7 @@ const tasks: Task[] = [
       column: 32,
       line: 8,
     },
+    timeout: 0,
     context: null as any,
   },
   {
@@ -104,6 +106,7 @@ const tasks: Task[] = [
     mode: 'run',
     suite,
     fails: undefined,
+    timeout: 0,
     meta: {},
     file,
     result: { state: 'pass', duration: 1.0237109661102295 },
@@ -117,6 +120,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: undefined,
     context: null as any,
@@ -129,6 +133,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: { state: 'pass', duration: 100.50598406791687 },
     context: null as any,
@@ -141,6 +146,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: { state: 'pass', duration: 20.184875011444092 },
     context: null as any,
@@ -153,6 +159,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: { state: 'pass', duration: 0.33245420455932617 },
     context: null as any,
@@ -165,6 +172,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: { state: 'pass', duration: 19.738605976104736 },
     context: null as any,
@@ -177,6 +185,7 @@ const tasks: Task[] = [
     suite,
     fails: undefined,
     meta: {},
+    timeout: 0,
     file,
     result: { state: 'pass', duration: 0.1923508644104004 },
     context: null as any,
@@ -195,6 +204,7 @@ const tasks: Task[] = [
     name: 'todo test',
     mode: 'todo',
     suite,
+    timeout: 0,
     fails: undefined,
     meta: {},
     file,

test/reporters/tests/__snapshots__/html.test.ts.snap

@@ -68,6 +68,7 @@ exports[`html reporter > resolves to "failing" status for test file "json-fail"
             "startTime": 0,
             "state": "fail",
           },
+          "timeout": 5000,
           "type": "test",
         },
       ],
@@ -148,6 +149,7 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
             "startTime": 0,
             "state": "pass",
           },
+          "timeout": 5000,
           "type": "test",
         },
         {
@@ -160,6 +162,7 @@ exports[`html reporter > resolves to "passing" status for test file "all-passing
           "meta": {},
           "mode": "skip",
           "name": "3 + 3 = 6",
+          "timeout": 5000,
           "type": "test",
         },
       ],

test/reporters/tests/junit.test.ts

@@ -36,6 +36,7 @@ test('calc the duration used by junit', () => {
     mode: 'run',
     result,
     file,
+    timeout: 0,
     context: null as any,
     suite,
     meta: {},