diff --git a/.gitignore b/.gitignore
index 02fe571b8450..2d3ca233f013 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ docs/public/sponsors
 .eslintcache
 docs/.vitepress/cache/
 !test/cli/fixtures/dotted-files/**/.cache
-.vitest-reports
\ No newline at end of file
+test/browser/test/__screenshots__/**/*
+.vitest-reports
diff --git a/docs/config/index.md b/docs/config/index.md
index 8bf98b9796b7..a092e3a28853 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -923,7 +923,7 @@ Minimum number of workers to run tests in. `poolOptions.{threads,vmThreads}.minT
 ### testTimeout
 
 - **Type:** `number`
-- **Default:** `5000`
+- **Default:** `5_000` in Node.js, `15_000` if `browser.enabled` is `true`
 - **CLI:** `--test-timeout=5000`, `--testTimeout=5000`
 
 Default timeout of a test in milliseconds
@@ -931,7 +931,7 @@ Default timeout of a test in milliseconds
 ### hookTimeout
 
 - **Type:** `number`
-- **Default:** `10000`
+- **Default:** `10_000` in Node.js, `30_000` if `browser.enabled` is `true`
 - **CLI:** `--hook-timeout=10000`, `--hookTimeout=10000`
 
 Default timeout of a hook in milliseconds
diff --git a/docs/guide/browser.md b/docs/guide/browser.md
index 998f9a865c1d..098759b91672 100644
--- a/docs/guide/browser.md
+++ b/docs/guide/browser.md
@@ -212,6 +212,7 @@ export const server: {
  * @experimental
  */
 export const userEvent: {
+  setup: () => UserEvent
   /**
    * Click on an element. Uses provider's API under the hood and supports all its options.
    * @see {@link https://playwright.dev/docs/api/class-locator#locator-click} Playwright API
@@ -219,6 +220,99 @@ export const userEvent: {
    * @see {@link https://testing-library.com/docs/user-event/convenience/#click} testing-library API
    */
   click: (element: Element, options?: UserEventClickOptions) => Promise<void>
+  /**
+   * Triggers a double click event on an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-dblclick} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/doubleClick/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#dblClick} testing-library API
+   */
+  dblClick: (element: Element, options?: UserEventDoubleClickOptions) => Promise<void>
+  /**
+   * Choose one or more values from a select element. Uses provider's API under the hood.
+   * If select doesn't have `multiple` attribute, only the first value will be selected.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-select-option} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/doubleClick/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#-selectoptions-deselectoptions} testing-library API
+   */
+  selectOptions: (
+    element: Element,
+    values: HTMLElement | HTMLElement[] | string | string[],
+    options?: UserEventSelectOptions,
+  ) => Promise<void>
+  /**
+   * Type text on the keyboard. If any input is focused, it will receive the text,
+   * otherwise it will be typed on the document. Uses provider's API under the hood.
+   * **Supports** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`) even with `playwright` and `webdriverio` providers.
+   * @example
+   * await userEvent.keyboard('foo') // translates to: f, o, o
+   * await userEvent.keyboard('{{a[[') // translates to: {, a, [
+   * await userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/browser/action#key-input-source} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/keyboard} testing-library API
+   */
+  keyboard: (text: string) => Promise<void>
+  /**
+   * Types text into an element. Uses provider's API under the hood.
+   * **Supports** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`) even with `playwright` and `webdriverio` providers.
+   * @example
+   * await userEvent.type(input, 'foo') // translates to: f, o, o
+   * await userEvent.type(input, '{{a[[') // translates to: {, a, [
+   * await userEvent.type(input, '{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/browser/action#key-input-source} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#type} testing-library API
+   */
+  type: (element: Element, text: string, options?: UserEventTypeOptions) => Promise<void>
+  /**
+   * Removes all text from an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-clear} Playwright API
+   * @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) => Promise<void>
+  /**
+   * Sends a `Tab` key event. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/keys} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#tab} testing-library API
+   */
+  tab: (options?: UserEventTabOptions) => Promise<void>
+  /**
+   * Hovers over an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-hover} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/moveTo/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#hover} testing-library API
+   */
+  hover: (element: Element, options?: UserEventHoverOptions) => Promise<void>
+  /**
+   * Moves cursor position to the body element. Uses provider's API under the hood.
+   * By default, the cursor position is in the center (in webdriverio) or in some visible place (in playwright)
+   * of the body element, so if the current element is already there, this will have no effect.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-hover} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/moveTo/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#hover} testing-library API
+   */
+  unhover: (element: Element, options?: UserEventHoverOptions) => Promise<void>
+  /**
+   * Fills an input element with text. This will remove any existing text in the input before typing the new value.
+   * Uses provider's API under the hood.
+   * This API is faster than using `userEvent.type` or `userEvent.keyboard`, but it **doesn't support** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`).
+   * @example
+   * await userEvent.fill(input, 'foo') // translates to: f, o, o
+   * await userEvent.fill(input, '{{a[[') // translates to: {, {, a, [, [
+   * await userEvent.fill(input, '{Shift}') // translates to: {, S, h, i, f, t, }
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-fill} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/setValue} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#type} testing-library API
+   */
+  fill: (element: Element, text: string, options?: UserEventFillOptions) => Promise<void>
+  /**
+   * Drags a source element on top of the target element. This API is not supported by "preview" provider.
+   * @see {@link https://playwright.dev/docs/api/class-frame#frame-drag-and-drop} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/dragAndDrop/} WebdriverIO API
+   */
+  dragAndDrop: (source: Element, target: Element, options?: UserEventDragAndDropOptions) => Promise<void>
 }
 
 /**
@@ -244,6 +338,362 @@ export const page: {
 }
 ```
 
+## Interactivity API
+
+Vitest implements a subset of [`@testing-library/user-event`](https://testing-library.com/docs/user-event) APIs using [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) or [webdriver](https://www.w3.org/TR/webdriver/) APIs instead of faking events which makes the browser behaviour more reliable and consistent.
+
+Almost every `userEvent` method inherits its provider options. To see all available options in your IDE, add `webdriver` or `playwright` types to your `tsconfig.json` file:
+
+::: code-group
+```json [playwright]
+{
+  "compilerOptions": {
+    "types": [
+      "@vitest/browser/providers/playwright"
+    ]
+  }
+}
+```
+```json [webdriverio]
+{
+  "compilerOptions": {
+    "types": [
+      "@vitest/browser/providers/webdriverio"
+    ]
+  }
+}
+```
+:::
+
+### userEvent.click
+
+- **Type:** `(element: Element, options?: UserEventClickOptions) => Promise<void>`
+
+Clicks on an element. Inherits provider's options. Please refer to your provider's documentation for detailed explanaition about how this method works.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('clicks on an element', () => {
+  const logo = screen.getByRole('img', { name: /logo/ })
+
+  await userEvent.click(logo)
+})
+```
+
+References:
+
+- [Playwright `locator.click` API](https://playwright.dev/docs/api/class-locator#locator-click)
+- [WebdriverIO `element.click` API](https://webdriver.io/docs/api/element/click/)
+- [testing-library `click` API](https://testing-library.com/docs/user-event/convenience/#click)
+
+### userEvent.dblClick
+
+- **Type:** `(element: Element, options?: UserEventDoubleClickOptions) => Promise<void>`
+
+Triggers a double click event on an element
+
+Please refer to your provider's documentation for detailed explanaition about how this method works.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('triggers a double click on an element', () => {
+  const logo = screen.getByRole('img', { name: /logo/ })
+
+  await userEvent.dblClick(logo)
+})
+```
+
+References:
+
+- [Playwright `locator.dblclick` API](https://playwright.dev/docs/api/class-locator#locator-dblclick)
+- [WebdriverIO `element.doubleClick` API](https://webdriver.io/docs/api/element/doubleClick/)
+- [testing-library `dblClick` API](https://testing-library.com/docs/user-event/convenience/#dblClick)
+
+### userEvent.fill
+
+- **Type:** `(element: Element, text: string) => Promise<void>`
+
+Fills an input/textarea/conteneditable element with text. This will remove any existing text in the input before typing the new value.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('update input', () => {
+  const input = screen.getByRole('input')
+
+  await userEvent.fill(input, 'foo') // input.value == foo
+  await userEvent.fill(input, '{{a[[') // input.value == {{a[[
+  await userEvent.fill(input, '{Shift}') // input.value == {Shift}
+})
+```
+
+::: tip
+This API is faster than using [`userEvent.type`](#userevent-type) or [`userEvent.keyboard`](#userevent-keyboard), but it **doesn't support** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}{selectall}`).
+
+We recommend using this API over [`userEvent.type`](#userevent-type) in situations when you don't need to enter special characters.
+:::
+
+References:
+
+- [Playwright `locator.fill` API](https://playwright.dev/docs/api/class-locator#locator-fill)
+- [WebdriverIO `element.setValue` API](https://webdriver.io/docs/api/element/setValue)
+- [testing-library `type` API](https://testing-library.com/docs/user-event/utility/#type)
+
+### userEvent.keyboard
+
+- **Type:** `(text: string) => Promise<void>`
+
+The `userEvent.keyboard` allows you to trigger keyboard strokes. If any input has a focus, it will type characters into that input. Otherwise, it will trigger keyboard events on the currently focused element (`document.body` if there are no focused elements).
+
+This API supports [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard).
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('trigger keystrokes', () => {
+  await userEvent.keyboard('foo') // translates to: f, o, o
+  await userEvent.keyboard('{{a[[') // translates to: {, a, [
+  await userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+  await userEvent.keyboard('{a>5}') // press a without releasing it and trigger 5 keydown
+  await userEvent.keyboard('{a>5/}') // press a for 5 keydown and then release it
+})
+```
+
+References:
+
+- [Playwright `locator.press` API](https://playwright.dev/docs/api/class-locator#locator-press)
+- [WebdriverIO `action('key')` API](https://webdriver.io/docs/api/browser/action#key-input-source)
+- [testing-library `type` API](https://testing-library.com/docs/user-event/utility/#type)
+
+### userEvent.tab
+
+- **Type:** `(options?: UserEventTabOptions) => Promise<void>`
+
+Sends a `Tab` key event. This is a shorthand for `userEvent.keyboard('{tab}')`.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom' // adds support for "toHaveFocus"
+
+test('tab works', () => {
+  const [input1, input2] = screen.getAllByRole('input')
+
+  expect(input1).toHaveFocus()
+
+  await userEvent.tab()
+
+  expect(input2).toHaveFocus()
+
+  await userEvent.tab({ shift: true })
+
+  expect(input1).toHaveFocus()
+})
+```
+
+References:
+
+- [Playwright `locator.press` API](https://playwright.dev/docs/api/class-locator#locator-press)
+- [WebdriverIO `action('key')` API](https://webdriver.io/docs/api/browser/action#key-input-source)
+- [testing-library `tab` API](https://testing-library.com/docs/user-event/convenience/#tab)
+
+### userEvent.type
+
+- **Type:** `(element: Element, text: string, options?: UserEventTypeOptions) => Promise<void>`
+
+::: warning
+If you don't rely on [special characters](https://testing-library.com/docs/user-event/keyboard) (e.g., `{shift}` or `{selectall}`), it is recommended to use [`userEvent.fill`](#userevent-fill) instead.
+:::
+
+The `type` method implements `@testing-library/user-event`'s [`type`](https://testing-library.com/docs/user-event/utility/#type) utility built on top of [`keyboard`](https://testing-library.com/docs/user-event/keyboard) API.
+
+This function allows you to type characters into an input/textarea/conteneditable element. It supports [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard).
+
+If you just need to press characters without an input, use [`userEvent.keyboard`](#userevent-keyboard) API.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('update input', () => {
+  const input = screen.getByRole('input')
+
+  await userEvent.type(input, 'foo') // input.value == foo
+  await userEvent.type(input, '{{a[[') // input.value == foo{a[
+  await userEvent.type(input, '{Shift}') // input.value == foo{a[
+})
+```
+
+References:
+
+- [Playwright `locator.press` API](https://playwright.dev/docs/api/class-locator#locator-press)
+- [WebdriverIO `action('key')` API](https://webdriver.io/docs/api/browser/action#key-input-source)
+- [testing-library `type` API](https://testing-library.com/docs/user-event/utility/#type)
+
+### userEvent.clear
+
+- **Type:** `(element: Element) => Promise<void>`
+
+This method clear the input element content.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom' // adds support for "toHaveValue"
+
+test('clears input', () => {
+  const input = screen.getByRole('input')
+
+  await userEvent.fill(input, 'foo')
+  expect(input).toHaveValue('foo')
+
+  await userEvent.clear(input)
+  expect(input).toHaveValue('')
+})
+```
+
+References:
+
+- [Playwright `locator.clear` API](https://playwright.dev/docs/api/class-locator#locator-clear)
+- [WebdriverIO `element.clearValue` API](https://webdriver.io/docs/api/element/clearValue)
+- [testing-library `clear` API](https://testing-library.com/docs/user-event/utility/#clear)
+
+### userEvent.selectOptions
+
+- **Type:** `(element: Element, values: HTMLElement | HTMLElement[] | string | string[], options?: UserEventSelectOptions) => Promise<void>`
+
+The `userEvent.selectOptions` allows selecting a value in a `<select>` element.
+
+::: warning
+If select element doesn't have [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple) attribute, Vitest will select only the first element in the array.
+
+Unlike `@testing-library`, Vitest doesn't support [listbox](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role) at the moment, but we plan to add support for it in the future.
+:::
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom' // adds support for "toHaveValue"
+
+test('clears input', () => {
+  const select = screen.getByRole('select')
+
+  await userEvent.selectOptions(select, 'Option 1')
+  expect(select).toHaveValue('option-1')
+
+  await userEvent.selectOptions(select, 'option-1')
+  expect(select).toHaveValue('option-1')
+
+  await userEvent.selectOptions(select, [
+    screen.getByRole('option', { name: 'Option 1' }),
+    screen.getByRole('option', { name: 'Option 2' }),
+  ])
+  expect(select).toHaveValue(['option-1', 'option-2'])
+})
+```
+
+::: warning
+`webdriverio` provider doesn't support selecting multiple elements because it doesn't provide API to do so.
+:::
+
+References:
+
+- [Playwright `locator.selectOption` API](https://playwright.dev/docs/api/class-locator#locator-select-option)
+- [WebdriverIO `element.selectByIndex` API](https://webdriver.io/docs/api/element/selectByIndex)
+- [testing-library `selectOptions` API](https://testing-library.com/docs/user-event/utility/#-selectoptions-deselectoptions)
+
+### userEvent.hover
+
+- **Type:** `(element: Element, options?: UserEventHoverOptions) => Promise<void>`
+
+This method moves the cursor position to selected element. Please refer to your provider's documentation for detailed explanaition about how this method works.
+
+::: warning
+If you are using `webdriverio` provider, the cursor will move to the center of the element by default.
+
+If you are using `playwright` provider, the cursor moves to "some" visible point of the element.
+:::
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('hovers logo element', () => {
+  const logo = screen.getByRole('img', { name: /logo/ })
+
+  await userEvent.hover(logo)
+})
+```
+
+References:
+
+- [Playwright `locator.hover` API](https://playwright.dev/docs/api/class-locator#locator-hover)
+- [WebdriverIO `element.moveTo` API](https://webdriver.io/docs/api/element/moveTo/)
+- [testing-library `hover` API](https://testing-library.com/docs/user-event/convenience/#hover)
+
+### userEvent.unhover
+
+- **Type:** `(element: Element, options?: UserEventHoverOptions) => Promise<void>`
+
+This works the same as [`userEvent.hover`](#userevent-hover), but moves the cursor to the `document.body` element instead.
+
+::: warning
+By default, the cursor position is in the center (in `webdriverio` provider) or in "some" visible place (in `playwright` provider) of the body element, so if the currently hovered element is already in the same position, this method will have no effect.
+:::
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+
+test('unhover logo element', () => {
+  const logo = screen.getByRole('img', { name: /logo/ })
+
+  await userEvent.unhover(logo)
+})
+```
+
+References:
+
+- [Playwright `locator.hover` API](https://playwright.dev/docs/api/class-locator#locator-hover)
+- [WebdriverIO `element.moveTo` API](https://webdriver.io/docs/api/element/moveTo/)
+- [testing-library `hover` API](https://testing-library.com/docs/user-event/convenience/#hover)
+
+### userEvent.dragAndDrop
+
+- **Type:** `(source: Element, target: Element, options?: UserEventDragAndDropOptions) => Promise<void>`
+
+Drags the source element on top of the target element. Don't forget that the `source` element has to have the `draggable` attribute set to `true`.
+
+```ts
+import { userEvent } from '@vitest/browser/context'
+import { screen } from '@testing-library/dom'
+import '@testing-library/jest-dom' // adds support for "toHaveTextContent"
+
+test('drag and drop works', async () => {
+  const source = screen.getByRole('img', { name: /logo/ })
+  const target = screen.getByTestId('logo-target')
+
+  await userEvent.dragAndDrop(source, target)
+
+  expect(target).toHaveTextContent('Logo is processed')
+})
+```
+
+::: warning
+This API is not supported by the `preview` provider.
+:::
+
+References:
+
+- [Playwright `frame.dragAndDrop` API](https://playwright.dev/docs/api/class-frame#frame-drag-and-drop)
+- [WebdriverIO `element.dragAndDrop` API](https://webdriver.io/docs/api/element/dragAndDrop/)
+
 ## Commands
 
 Command is a function that invokes another function on the server and passes down the result back to the browser. Vitest exposes several built-in commands you can use in your browser tests.
@@ -277,31 +727,6 @@ it('handles files', async () => {
 })
 ```
 
-### Keyboard Interactions
-
-Vitest also implements Web Test Runner's [`sendKeys` API](https://modern-web.dev/docs/test-runner/commands/#send-keys). It accepts an object with a single property:
-
-- `type` - types a sequence of characters, this API _is not_ affected by modifier keys, so having `Shift` won't make letters uppercase
-- `press` - presses a single key, this API _is_ affected by modifier keys, so having `Shift` will make subsequent characters uppercase
-- `up` - holds down a key (supported only with `playwright` provider)
-- `down` - releases a key (supported only with `playwright` provider)
-
-```ts
-interface TypePayload { type: string }
-interface PressPayload { press: string }
-interface DownPayload { down: string }
-interface UpPayload { up: string }
-
-type SendKeysPayload = TypePayload | PressPayload | DownPayload | UpPayload
-
-declare function sendKeys(payload: SendKeysPayload): Promise<void>
-```
-
-This is just a simple wrapper around providers APIs. Please refer to their respective documentations for details:
-
-- [Playwright Keyboard API](https://playwright.dev/docs/api/class-keyboard)
-- [Webdriver Keyboard API](https://webdriver.io/docs/api/browser/keys/)
-
 ## Custom Commands
 
 You can also add your own commands via [`browser.commands`](/config/#browser-commands) config option. If you develop a library, you can provide them via a `config` hook inside a plugin:
@@ -370,15 +795,15 @@ Custom functions will override built-in ones if they have the same name.
 Vitest exposes several `playwright` specific properties on the command context.
 
 - `page` references the full page that contains the test iframe. This is the orchestrator HTML and you most likely shouldn't touch it to not break things.
-- `tester` is the iframe locator. The API is pretty limited here, but you can chain it further to access your HTML elements.
-- `body` is the iframe's `body` locator that exposes more Playwright APIs.
+- `frame` is the tester [iframe instance](https://playwright.dev/docs/api/class-frame). It has a simillar API to the page, but it doesn't support certain methods.
+- `context` refers to the unique [BrowserContext](https://playwright.dev/docs/api/class-browsercontext).
 
 ```ts
 import { defineCommand } from '@vitest/browser'
 
 export const myCommand = defineCommand(async (ctx, arg1, arg2) => {
   if (ctx.provider.name === 'playwright') {
-    const element = await ctx.tester.findByRole('alert')
+    const element = await ctx.frame.findByRole('alert')
     const screenshot = await element.screenshot()
     // do something with the screenshot
     return difference
@@ -387,7 +812,7 @@ export const myCommand = defineCommand(async (ctx, arg1, arg2) => {
 ```
 
 ::: tip
-If you are using TypeScript, don't forget to add `@vitest/browser/providers/playwright` to your `tsconfig` "compilerOptions.types" field to get autocompletion:
+If you are using TypeScript, don't forget to add `@vitest/browser/providers/playwright` to your `tsconfig` "compilerOptions.types" field to get autocompletion in the config and on `userEvent` and `page` options:
 
 ```json
 {
diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts
index 7145cc264b86..2abe969d8a59 100644
--- a/packages/browser/context.d.ts
+++ b/packages/browser/context.d.ts
@@ -19,25 +19,6 @@ export interface FsOptions {
   flag?: string | number
 }
 
-export interface TypePayload {
-  type: string
-}
-export interface PressPayload {
-  press: string
-}
-export interface DownPayload {
-  down: string
-}
-export interface UpPayload {
-  up: string
-}
-
-export type SendKeysPayload =
-  | TypePayload
-  | PressPayload
-  | DownPayload
-  | UpPayload
-
 export interface ScreenshotOptions {
   element?: Element
   /**
@@ -57,10 +38,10 @@ export interface BrowserCommands {
     options?: BufferEncoding | (FsOptions & { mode?: number | string })
   ) => Promise<void>
   removeFile: (path: string) => Promise<void>
-  sendKeys: (payload: SendKeysPayload) => Promise<void>
 }
 
 export interface UserEvent {
+  setup: () => UserEvent
   /**
    * Click on an element. Uses provider's API under the hood and supports all its options.
    * @see {@link https://playwright.dev/docs/api/class-locator#locator-click} Playwright API
@@ -68,10 +49,127 @@ export interface UserEvent {
    * @see {@link https://testing-library.com/docs/user-event/convenience/#click} testing-library API
    */
   click: (element: Element, options?: UserEventClickOptions) => Promise<void>
+  /**
+   * Triggers a double click event on an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-dblclick} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/doubleClick/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#dblClick} testing-library API
+   */
+  dblClick: (element: Element, options?: UserEventDoubleClickOptions) => Promise<void>
+  /**
+   * Choose one or more values from a select element. Uses provider's API under the hood.
+   * If select doesn't have `multiple` attribute, only the first value will be selected.
+   * @example
+   * await userEvent.selectOptions(select, 'Option 1')
+   * expect(select).toHaveValue('option-1')
+   *
+   * await userEvent.selectOptions(select, 'option-1')
+   * expect(select).toHaveValue('option-1')
+   *
+   * await userEvent.selectOptions(select, [
+   *  screen.getByRole('option', { name: 'Option 1' }),
+   *  screen.getByRole('option', { name: 'Option 2' }),
+   * ])
+   * expect(select).toHaveValue(['option-1', 'option-2'])
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-select-option} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/doubleClick/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#-selectoptions-deselectoptions} testing-library API
+   */
+  selectOptions: (
+    element: Element,
+    values: HTMLElement | HTMLElement[] | string | string[],
+    options?: UserEventSelectOptions,
+  ) => Promise<void>
+  /**
+   * Type text on the keyboard. If any input is focused, it will receive the text,
+   * otherwise it will be typed on the document. Uses provider's API under the hood.
+   * **Supports** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`) even with `playwright` and `webdriverio` providers.
+   * @example
+   * await userEvent.keyboard('foo') // translates to: f, o, o
+   * await userEvent.keyboard('{{a[[') // translates to: {, a, [
+   * await userEvent.keyboard('{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/browser/keys} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/keyboard} testing-library API
+   */
+  keyboard: (text: string) => Promise<void>
+  /**
+   * Types text into an element. Uses provider's API under the hood.
+   * **Supports** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`) even with `playwright` and `webdriverio` providers.
+   * @example
+   * await userEvent.type(input, 'foo') // translates to: f, o, o
+   * await userEvent.type(input, '{{a[[') // translates to: {, a, [
+   * await userEvent.type(input, '{Shift}{f}{o}{o}') // translates to: Shift, f, o, o
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/browser/action#key-input-source} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#type} testing-library API
+   */
+  type: (element: Element, text: string, options?: UserEventTypeOptions) => Promise<void>
+  /**
+   * Removes all text from an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-clear} Playwright API
+   * @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) => Promise<void>
+  /**
+   * Sends a `Tab` key event. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-press} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/keys} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#tab} testing-library API
+   */
+  tab: (options?: UserEventTabOptions) => Promise<void>
+  /**
+   * Hovers over an element. Uses provider's API under the hood.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-hover} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/moveTo/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#hover} testing-library API
+   */
+  hover: (element: Element, options?: UserEventHoverOptions) => Promise<void>
+  /**
+   * Moves cursor position to the body element. Uses provider's API under the hood.
+   * By default, the cursor position is in the center (in webdriverio) or in some visible place (in playwright)
+   * of the body element, so if the current element is already there, this will have no effect.
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-hover} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/moveTo/} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/convenience/#hover} testing-library API
+   */
+  unhover: (element: Element, options?: UserEventHoverOptions) => Promise<void>
+  /**
+   * Fills an input element with text. This will remove any existing text in the input before typing the new text.
+   * Uses provider's API under the hood.
+   * This API is faster than using `userEvent.type` or `userEvent.keyboard`, but it **doesn't support** [user-event `keyboard` syntax](https://testing-library.com/docs/user-event/keyboard) (e.g., `{Shift}`).
+   * @example
+   * await userEvent.fill(input, 'foo') // translates to: f, o, o
+   * await userEvent.fill(input, '{{a[[') // translates to: {, {, a, [, [
+   * await userEvent.fill(input, '{Shift}') // translates to: {, S, h, i, f, t, }
+   * @see {@link https://playwright.dev/docs/api/class-locator#locator-fill} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/setValue} WebdriverIO API
+   * @see {@link https://testing-library.com/docs/user-event/utility/#type} testing-library API
+   */
+  fill: (element: Element, text: string, options?: UserEventFillOptions) => Promise<void>
+  /**
+   * Drags a source element on top of the target element. This API is not supported by "preview" provider.
+   * @see {@link https://playwright.dev/docs/api/class-frame#frame-drag-and-drop} Playwright API
+   * @see {@link https://webdriver.io/docs/api/element/dragAndDrop/} WebdriverIO API
+   */
+  dragAndDrop: (source: Element, target: Element, options?: UserEventDragAndDropOptions) => Promise<void>
+}
+
+export interface UserEventFillOptions {}
+export interface UserEventHoverOptions {}
+export interface UserEventSelectOptions {}
+export interface UserEventClickOptions {}
+export interface UserEventDoubleClickOptions {}
+export interface UserEventDragAndDropOptions {}
+
+export interface UserEventTabOptions {
+  shift?: boolean
 }
 
-export interface UserEventClickOptions {
-  [key: string]: any
+export interface UserEventTypeOptions {
+  skipClick?: boolean
+  skipAutoClose?: boolean
 }
 
 type Platform =
diff --git a/packages/browser/providers/playwright.d.ts b/packages/browser/providers/playwright.d.ts
index ed58fc698bce..4657179bcf62 100644
--- a/packages/browser/providers/playwright.d.ts
+++ b/packages/browser/providers/playwright.d.ts
@@ -1,8 +1,8 @@
 import type {
+  BrowserContext,
   BrowserContextOptions,
-  FrameLocator,
+  Frame,
   LaunchOptions,
-  Locator,
   Page,
 } from 'playwright'
 
@@ -17,7 +17,26 @@ declare module 'vitest/node' {
 
   export interface BrowserCommandContext {
     page: Page
-    tester: FrameLocator
-    body: Locator
+    frame: Frame
+    context: BrowserContext
   }
 }
+
+type PWHoverOptions = Parameters<Page['hover']>[1]
+type PWClickOptions = Parameters<Page['click']>[1]
+type PWDoubleClickOptions = Parameters<Page['dblclick']>[1]
+type PWFillOptions = Parameters<Page['fill']>[2]
+type PWScreenshotOptions = Parameters<Page['screenshot']>[0]
+type PWSelectOptions = Parameters<Page['selectOption']>[2]
+type PWDragAndDropOptions = Parameters<Page['dragAndDrop']>[2]
+
+declare module '@vitest/browser/context' {
+  export interface UserEventHoverOptions extends PWHoverOptions {}
+  export interface UserEventClickOptions extends PWClickOptions {}
+  export interface UserEventDoubleClickOptions extends PWDoubleClickOptions {}
+  export interface UserEventFillOptions extends PWFillOptions {}
+  export interface UserEventSelectOptions extends PWSelectOptions {}
+  export interface UserEventDragOptions extends UserEventDragAndDropOptions {}
+
+  export interface ScreenshotOptions extends PWScreenshotOptions {}
+}
diff --git a/packages/browser/src/client/context.ts b/packages/browser/src/client/context.ts
index 776a704517e0..88bc2d8aa4df 100644
--- a/packages/browser/src/client/context.ts
+++ b/packages/browser/src/client/context.ts
@@ -1,9 +1,5 @@
 import type { Task, WorkerGlobalState } from 'vitest'
-import type {
-  BrowserPage,
-  UserEvent,
-  UserEventClickOptions,
-} from '../../context'
+import type { BrowserPage, UserEvent, UserEventClickOptions, UserEventTabOptions, UserEventTypeOptions } from '../../context'
 import type { BrowserRPC } from './client'
 import type { BrowserRunnerState } from './utils'
 
@@ -62,11 +58,107 @@ function triggerCommand<T>(command: string, ...args: any[]) {
   return rpc().triggerCommand<T>(contextId, command, filepath(), args)
 }
 
+const provider = runner().provider
+
 export const userEvent: UserEvent = {
+  // TODO: actually setup userEvent with config options
+  setup() {
+    return userEvent
+  },
   click(element: Element, options: UserEventClickOptions = {}) {
     const xpath = convertElementToXPath(element)
     return triggerCommand('__vitest_click', xpath, options)
   },
+  dblClick(element: Element, options: UserEventClickOptions = {}) {
+    const xpath = convertElementToXPath(element)
+    return triggerCommand('__vitest_dblClick', xpath, options)
+  },
+  selectOptions(element, value) {
+    const values = provider === 'webdriverio'
+      ? getWebdriverioSelectOptions(element, value)
+      : getSimpleSelectOptions(element, value)
+    return triggerCommand('__vitest_selectOptions', convertElementToXPath(element), values)
+  },
+  type(element: Element, text: string, options: UserEventTypeOptions = {}) {
+    const xpath = convertElementToXPath(element)
+    return triggerCommand('__vitest_type', xpath, text, options)
+  },
+  clear(element: Element) {
+    const xpath = convertElementToXPath(element)
+    return triggerCommand('__vitest_clear', xpath)
+  },
+  tab(options: UserEventTabOptions = {}) {
+    return triggerCommand('__vitest_tab', options)
+  },
+  keyboard(text: string) {
+    return triggerCommand('__vitest_keyboard', text)
+  },
+  hover(element: Element) {
+    const xpath = convertElementToXPath(element)
+    return triggerCommand('__vitest_hover', xpath)
+  },
+  unhover(element: Element) {
+    const xpath = convertElementToXPath(element.ownerDocument.body)
+    return triggerCommand('__vitest_hover', xpath)
+  },
+
+  // non userEvent events, but still useful
+  fill(element: Element, text: string, options) {
+    const xpath = convertElementToXPath(element)
+    return triggerCommand('__vitest_fill', xpath, text, options)
+  },
+  dragAndDrop(source: Element, target: Element, options = {}) {
+    const sourceXpath = convertElementToXPath(source)
+    const targetXpath = convertElementToXPath(target)
+    return triggerCommand('__vitest_dragAndDrop', sourceXpath, targetXpath, options)
+  },
+}
+
+function getWebdriverioSelectOptions(element: Element, value: string | string[] | HTMLElement[] | HTMLElement) {
+  const options = [...element.querySelectorAll('option')] as HTMLOptionElement[]
+
+  const arrayValues = Array.isArray(value) ? value : [value]
+
+  if (!arrayValues.length) {
+    return []
+  }
+
+  if (arrayValues.length > 1) {
+    throw new Error('Provider "webdriverio" doesn\'t support selecting multiple values at once')
+  }
+
+  const optionValue = arrayValues[0]
+
+  if (typeof optionValue !== 'string') {
+    const index = options.indexOf(optionValue as HTMLOptionElement)
+    if (index === -1) {
+      throw new Error(`The element ${convertElementToXPath(optionValue)} was not found in the "select" options.`)
+    }
+
+    return [{ index }]
+  }
+
+  const valueIndex = options.findIndex(option => option.value === optionValue)
+  if (valueIndex !== -1) {
+    return [{ index: valueIndex }]
+  }
+
+  const labelIndex = options.findIndex(option => option.textContent?.trim() === optionValue || option.ariaLabel === optionValue)
+
+  if (labelIndex === -1) {
+    throw new Error(`The option "${optionValue}" was not found in the "select" options.`)
+  }
+
+  return [{ index: labelIndex }]
+}
+
+function getSimpleSelectOptions(element: Element, value: string | string[] | HTMLElement[] | HTMLElement) {
+  return (Array.isArray(value) ? value : [value]).map((v) => {
+    if (typeof v !== 'string') {
+      return { element: convertElementToXPath(v) }
+    }
+    return v
+  })
 }
 
 const screenshotIds: Record<string, Record<string, string>> = {}
diff --git a/packages/browser/src/client/orchestrator.ts b/packages/browser/src/client/orchestrator.ts
index 9b1f0f9d8e3a..c6c33c4be9ca 100644
--- a/packages/browser/src/client/orchestrator.ts
+++ b/packages/browser/src/client/orchestrator.ts
@@ -52,6 +52,7 @@ function createIframe(container: HTMLDivElement, file: string) {
   iframe.style.position = 'relative'
   iframe.setAttribute('allowfullscreen', 'true')
   iframe.setAttribute('allow', 'clipboard-write;')
+  iframe.setAttribute('name', 'vitest-iframe')
 
   iframes.set(file, iframe)
   container.appendChild(iframe)
diff --git a/packages/browser/src/client/public/esm-client-injector.js b/packages/browser/src/client/public/esm-client-injector.js
index 943c12b77f1b..f45cd06eb61a 100644
--- a/packages/browser/src/client/public/esm-client-injector.js
+++ b/packages/browser/src/client/public/esm-client-injector.js
@@ -23,6 +23,7 @@ window.__vitest_browser_runner__ = {
   files: { __VITEST_FILES__ },
   type: { __VITEST_TYPE__ },
   contextId: { __VITEST_CONTEXT_ID__ },
+  provider: { __VITEST_PROVIDER__ },
 };
 
 const config = __vitest_browser_runner__.config;
diff --git a/packages/browser/src/client/tester.html b/packages/browser/src/client/tester.html
index 3136578ad3bf..8dfad61fb9b0 100644
--- a/packages/browser/src/client/tester.html
+++ b/packages/browser/src/client/tester.html
@@ -20,6 +20,7 @@
     {__VITEST_SCRIPTS__}
   </head>
   <body
+    data-vitest-body
     style="
       width: 100%;
       height: 100%;
diff --git a/packages/browser/src/client/utils.ts b/packages/browser/src/client/utils.ts
index 54f99d73be1d..611fba2ce36c 100644
--- a/packages/browser/src/client/utils.ts
+++ b/packages/browser/src/client/utils.ts
@@ -14,6 +14,7 @@ export interface BrowserRunnerState {
   runningFiles: string[]
   moduleCache: WorkerGlobalState['moduleCache']
   config: ResolvedConfig
+  provider: string
   viteConfig: {
     root: string
   }
diff --git a/packages/browser/src/node/commands/clear.ts b/packages/browser/src/node/commands/clear.ts
new file mode 100644
index 000000000000..c217ad96b3c9
--- /dev/null
+++ b/packages/browser/src/node/commands/clear.ts
@@ -0,0 +1,26 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const clear: UserEventCommand<UserEvent['clear']> = async (
+  context,
+  xpath,
+) => {
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    const { frame } = context
+    const element = frame.locator(`xpath=${xpath}`)
+    await element.clear({
+      timeout: 1000,
+    })
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
+    const markedXpath = `//${xpath}`
+    const element = await browser.$(markedXpath)
+    await element.clearValue()
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" does not support clearing elements`)
+  }
+}
diff --git a/packages/browser/src/node/commands/click.ts b/packages/browser/src/node/commands/click.ts
index 5d93e34ca715..b263ebc0e34f 100644
--- a/packages/browser/src/node/commands/click.ts
+++ b/packages/browser/src/node/commands/click.ts
@@ -10,16 +10,38 @@ export const click: UserEventCommand<UserEvent['click']> = async (
 ) => {
   const provider = context.provider
   if (provider instanceof PlaywrightBrowserProvider) {
-    const tester = context.tester
-    await tester.locator(`xpath=${xpath}`).click(options)
-    return
+    const tester = context.frame
+    await tester.locator(`xpath=${xpath}`).click({
+      timeout: 1000,
+      ...options,
+    })
   }
-  if (provider instanceof WebdriverBrowserProvider) {
-    const page = provider.browser!
+  else if (provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
     const markedXpath = `//${xpath}`
-    const element = await page.$(markedXpath)
-    await element.click(options)
-    return
+    await browser.$(markedXpath).click(options as any)
+  }
+  else {
+    throw new TypeError(`Provider "${provider.name}" doesn't support click command`)
+  }
+}
+
+export const dblClick: UserEventCommand<UserEvent['dblClick']> = async (
+  context,
+  xpath,
+  options = {},
+) => {
+  const provider = context.provider
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const tester = context.frame
+    await tester.locator(`xpath=${xpath}`).dblclick(options)
+  }
+  else if (provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
+    const markedXpath = `//${xpath}`
+    await browser.$(markedXpath).doubleClick()
+  }
+  else {
+    throw new TypeError(`Provider "${provider.name}" doesn't support dblClick command`)
   }
-  throw new Error(`Provider "${provider.name}" doesn't support click command`)
 }
diff --git a/packages/browser/src/node/commands/dragAndDrop.ts b/packages/browser/src/node/commands/dragAndDrop.ts
new file mode 100644
index 000000000000..55cd9a7d8215
--- /dev/null
+++ b/packages/browser/src/node/commands/dragAndDrop.ts
@@ -0,0 +1,45 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const dragAndDrop: UserEventCommand<UserEvent['dragAndDrop']> = async (
+  context,
+  source,
+  target,
+  options,
+) => {
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    await context.frame.dragAndDrop(
+      `xpath=${source}`,
+      `xpath=${target}`,
+      {
+        timeout: 1000,
+        ...options,
+      },
+    )
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const sourceXpath = `//${source}`
+    const targetXpath = `//${target}`
+    const $source = context.browser.$(sourceXpath)
+    const $target = context.browser.$(targetXpath)
+    const duration = (options as any)?.duration ?? 10
+
+    // https://github.com/webdriverio/webdriverio/issues/8022#issuecomment-1700919670
+    await context.browser
+      .action('pointer')
+      .move({ duration: 0, origin: $source, x: 0, y: 0 })
+      .down({ button: 0 })
+      .move({ duration: 0, origin: 'pointer', x: 0, y: 0 })
+      .pause(duration)
+      .move({ duration: 0, origin: $target, x: 0, y: 0 })
+      .move({ duration: 0, origin: 'pointer', x: 1, y: 0 })
+      .move({ duration: 0, origin: 'pointer', x: -1, y: 0 })
+      .up({ button: 0 })
+      .perform()
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" does not support dragging elements`)
+  }
+}
diff --git a/packages/browser/src/node/commands/fill.ts b/packages/browser/src/node/commands/fill.ts
new file mode 100644
index 000000000000..bdb3b8922519
--- /dev/null
+++ b/packages/browser/src/node/commands/fill.ts
@@ -0,0 +1,25 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const fill: UserEventCommand<UserEvent['fill']> = async (
+  context,
+  xpath,
+  text,
+  options = {},
+) => {
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    const { frame } = context
+    const element = frame.locator(`xpath=${xpath}`)
+    await element.fill(text, { timeout: 1000, ...options })
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
+    const markedXpath = `//${xpath}`
+    await browser.$(markedXpath).setValue(text)
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" does not support clearing elements`)
+  }
+}
diff --git a/packages/browser/src/node/commands/hover.ts b/packages/browser/src/node/commands/hover.ts
new file mode 100644
index 000000000000..aa23b156cb39
--- /dev/null
+++ b/packages/browser/src/node/commands/hover.ts
@@ -0,0 +1,25 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const hover: UserEventCommand<UserEvent['hover']> = async (
+  context,
+  xpath,
+  options = {},
+) => {
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    await context.frame.locator(`xpath=${xpath}`).hover({
+      timeout: 1000,
+      ...options,
+    })
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
+    const markedXpath = `//${xpath}`
+    await browser.$(markedXpath).moveTo(options)
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" does not support hover`)
+  }
+}
diff --git a/packages/browser/src/node/commands/index.ts b/packages/browser/src/node/commands/index.ts
index a38fb2f2ecdc..ced9b4af34c2 100644
--- a/packages/browser/src/node/commands/index.ts
+++ b/packages/browser/src/node/commands/index.ts
@@ -1,13 +1,32 @@
-import { click } from './click'
-import { readFile, removeFile, writeFile } from './fs'
-import { sendKeys } from './keyboard'
+import { click, dblClick } from './click'
+import { type } from './type'
+import { clear } from './clear'
+import { fill } from './fill'
+import { selectOptions } from './select'
+import { tab } from './tab'
+import { keyboard } from './keyboard'
+import { dragAndDrop } from './dragAndDrop'
+import { hover } from './hover'
+import {
+  readFile,
+  removeFile,
+  writeFile,
+} from './fs'
 import { screenshot } from './screenshot'
 
 export default {
   readFile,
   removeFile,
   writeFile,
-  sendKeys,
   __vitest_click: click,
+  __vitest_dblClick: dblClick,
   __vitest_screenshot: screenshot,
+  __vitest_type: type,
+  __vitest_clear: clear,
+  __vitest_fill: fill,
+  __vitest_tab: tab,
+  __vitest_keyboard: keyboard,
+  __vitest_selectOptions: selectOptions,
+  __vitest_dragAndDrop: dragAndDrop,
+  __vitest_hover: hover,
 }
diff --git a/packages/browser/src/node/commands/keyboard.ts b/packages/browser/src/node/commands/keyboard.ts
index cfab77868d6b..936aab1bbc25 100644
--- a/packages/browser/src/node/commands/keyboard.ts
+++ b/packages/browser/src/node/commands/keyboard.ts
@@ -1,111 +1,152 @@
-// based on https://github.com/modernweb-dev/web/blob/f7fcf29cb79e82ad5622665d76da3f6b23d0ef43/packages/test-runner-commands/src/sendKeysPlugin.ts
-
-import type { BrowserCommand } from 'vitest/node'
-import type {
-  BrowserCommands,
-  DownPayload,
-  PressPayload,
-  SendKeysPayload,
-  TypePayload,
-  UpPayload,
-} from '../../../context'
+import { parseKeyDef } from '@testing-library/user-event/dist/esm/keyboard/parseKeyDef.js'
+import { defaultKeyMap } from '@testing-library/user-event/dist/esm/keyboard/keyMap.js'
+import type { BrowserProvider } from 'vitest/node'
 import { PlaywrightBrowserProvider } from '../providers/playwright'
 import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEvent } from '../../../context'
+import type { UserEventCommand } from './utils'
 
-function isObject(payload: unknown): payload is Record<string, unknown> {
-  return payload != null && typeof payload === 'object'
-}
-
-function isSendKeysPayload(payload: unknown): boolean {
-  const validOptions = ['type', 'press', 'down', 'up']
-
-  if (!isObject(payload)) {
-    throw new Error('You must provide a `SendKeysPayload` object')
+export const keyboard: UserEventCommand<UserEvent['keyboard']> = async (
+  context,
+  text,
+) => {
+  function focusIframe() {
+    if (
+      !document.activeElement
+      || document.activeElement.ownerDocument !== document
+      || document.activeElement === document.body
+    ) {
+      window.focus()
+    }
   }
 
-  const numberOfValidOptions = Object.keys(payload).filter(key =>
-    validOptions.includes(key),
-  ).length
-  const unknownOptions = Object.keys(payload).filter(
-    key => !validOptions.includes(key),
-  )
-
-  if (numberOfValidOptions > 1) {
-    throw new Error(
-      `You must provide ONLY one of the following properties to pass to the browser runner: ${validOptions.join(
-        ', ',
-      )}.`,
-    )
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    await context.frame.evaluate(focusIframe)
   }
-  if (numberOfValidOptions === 0) {
-    throw new Error(
-      `You must provide one of the following properties to pass to the browser runner: ${validOptions.join(
-        ', ',
-      )}.`,
-    )
-  }
-  if (unknownOptions.length > 0) {
-    throw new Error(
-      `Unknown options \`${unknownOptions.join(', ')}\` present.`,
-    )
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    await context.browser.execute(focusIframe)
   }
 
-  return true
+  await keyboardImplementation(
+    context.provider,
+    context.contextId,
+    text,
+    async () => {
+      function selectAll() {
+        const element = document.activeElement as HTMLInputElement
+        if (element && element.select) {
+          element.select()
+        }
+      }
+      if (context.provider instanceof PlaywrightBrowserProvider) {
+        await context.frame.evaluate(selectAll)
+      }
+      else if (context.provider instanceof WebdriverBrowserProvider) {
+        await context.browser.execute(selectAll)
+      }
+      else {
+        throw new TypeError(`Provider "${context.provider.name}" does not support selecting all text`)
+      }
+    },
+    false,
+  )
 }
 
-function isTypePayload(payload: SendKeysPayload): payload is TypePayload {
-  return 'type' in payload
-}
+export async function keyboardImplementation(
+  provider: BrowserProvider,
+  contextId: string,
+  text: string,
+  selectAll: () => Promise<void>,
+  skipRelease: boolean,
+) {
+  const pressed = new Set<string>()
 
-function isPressPayload(payload: SendKeysPayload): payload is PressPayload {
-  return 'press' in payload
-}
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const page = provider.getPage(contextId)
+    const actions = parseKeyDef(defaultKeyMap, text)
 
-function isDownPayload(payload: SendKeysPayload): payload is DownPayload {
-  return 'down' in payload
-}
+    for (const { releasePrevious, releaseSelf, repeat, keyDef } of actions) {
+      const key = keyDef.key!
 
-function isUpPayload(payload: SendKeysPayload): payload is UpPayload {
-  return 'up' in payload
-}
+      // TODO: instead of calling down/up for each key, join non special
+      // together, and call `type` once for all non special keys,
+      // and then `press` for special keys
+      if (pressed.has(key)) {
+        await page.keyboard.up(key)
+        pressed.delete(key)
+      }
 
-export const sendKeys: BrowserCommand<
-  Parameters<BrowserCommands['sendKeys']>
-> = async ({ provider, contextId }, payload) => {
-  if (!isSendKeysPayload(payload) || !payload) {
-    throw new Error('You must provide a `SendKeysPayload` object')
-  }
+      if (!releasePrevious) {
+        if (key === 'selectall') {
+          await selectAll()
+          continue
+        }
 
-  if (provider instanceof PlaywrightBrowserProvider) {
-    const page = provider.getPage(contextId)
-    if (isTypePayload(payload)) {
-      await page.keyboard.type(payload.type)
-    }
-    else if (isPressPayload(payload)) {
-      await page.keyboard.press(payload.press)
-    }
-    else if (isDownPayload(payload)) {
-      await page.keyboard.down(payload.down)
+        for (let i = 1; i <= repeat; i++) {
+          await page.keyboard.down(key)
+        }
+
+        if (releaseSelf) {
+          await page.keyboard.up(key)
+        }
+        else {
+          pressed.add(key)
+        }
+      }
     }
-    else if (isUpPayload(payload)) {
-      await page.keyboard.up(payload.up)
+
+    if (!skipRelease && pressed.size) {
+      for (const key of pressed) {
+        await page.keyboard.up(key)
+      }
     }
   }
   else if (provider instanceof WebdriverBrowserProvider) {
+    const { Key } = await import('webdriverio')
     const browser = provider.browser!
-    if (isTypePayload(payload)) {
-      await browser.keys(payload.type.split(''))
-    }
-    else if (isPressPayload(payload)) {
-      await browser.keys([payload.press])
-    }
-    else {
-      throw new Error('Only "press" and "type" are supported by webdriverio.')
+    const actions = parseKeyDef(defaultKeyMap, text)
+
+    let keyboard = browser.action('key')
+
+    for (const { releasePrevious, releaseSelf, repeat, keyDef } of actions) {
+      let key = keyDef.key!
+      const code = 'location' in keyDef ? keyDef.key! : keyDef.code!
+      const special = Key[code as 'Shift']
+
+      if (special) {
+        key = special
+      }
+
+      if (pressed.has(key)) {
+        keyboard.up(key)
+        pressed.delete(key)
+      }
+
+      if (!releasePrevious) {
+        if (key === 'selectall') {
+          await keyboard.perform()
+          keyboard = browser.action('key')
+          await selectAll()
+          continue
+        }
+
+        for (let i = 1; i <= repeat; i++) {
+          keyboard.down(key)
+        }
+
+        if (releaseSelf) {
+          keyboard.up(key)
+        }
+        else {
+          pressed.add(key)
+        }
+      }
     }
+
+    await keyboard.perform(skipRelease)
   }
-  else {
-    throw new TypeError(
-      `"sendKeys" is not supported for ${provider.name} browser provider.`,
-    )
+
+  return {
+    pressed,
   }
 }
diff --git a/packages/browser/src/node/commands/screenshot.ts b/packages/browser/src/node/commands/screenshot.ts
index 33971b92a0ad..b9371b47c618 100644
--- a/packages/browser/src/node/commands/screenshot.ts
+++ b/packages/browser/src/node/commands/screenshot.ts
@@ -28,12 +28,12 @@ export const screenshot: BrowserCommand<[string, ScreenshotOptions]> = async (
   if (context.provider instanceof PlaywrightBrowserProvider) {
     if (options.element) {
       const { element: elementXpath, ...config } = options
-      const iframe = context.tester
+      const iframe = context.frame
       const element = iframe.locator(`xpath=${elementXpath}`)
       await element.screenshot({ ...config, path: savePath })
     }
     else {
-      await context.body.screenshot({ ...options, path: savePath })
+      await context.frame.locator('body').screenshot({ ...options, path: savePath })
     }
     return path
   }
diff --git a/packages/browser/src/node/commands/select.ts b/packages/browser/src/node/commands/select.ts
new file mode 100644
index 000000000000..3d34210699be
--- /dev/null
+++ b/packages/browser/src/node/commands/select.ts
@@ -0,0 +1,55 @@
+import type { ElementHandle } from 'playwright'
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const selectOptions: UserEventCommand<UserEvent['selectOptions']> = async (
+  context,
+  xpath,
+  userValues,
+  options = {},
+) => {
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    const value = userValues as any as (string | { element: string })[]
+    const { frame } = context
+    const selectElement = frame.locator(`xpath=${xpath}`)
+
+    const values = await Promise.all(value.map(async (v) => {
+      if (typeof v === 'string') {
+        return v
+      }
+      const elementHandler = await frame.locator(`xpath=${v.element}`).elementHandle()
+      if (!elementHandler) {
+        throw new Error(`Element not found: ${v.element}`)
+      }
+      return elementHandler
+    })) as (readonly string[]) | (readonly ElementHandle[])
+
+    await selectElement.selectOption(values, {
+      timeout: 1000,
+      ...options,
+    })
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const values = userValues as any as [({ index: number })]
+
+    if (!values.length) {
+      return
+    }
+
+    const markedXpath = `//${xpath}`
+    const browser = context.browser
+
+    if (values.length === 1 && 'index' in values[0]) {
+      const selectElement = browser.$(markedXpath)
+      await selectElement.selectByIndex(values[0].index)
+    }
+    else {
+      throw new Error('Provider "webdriverio" doesn\'t support selecting multiple values at once')
+    }
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" doesn't support selectOptions command`)
+  }
+}
diff --git a/packages/browser/src/node/commands/tab.ts b/packages/browser/src/node/commands/tab.ts
new file mode 100644
index 000000000000..bb23c9c8e7db
--- /dev/null
+++ b/packages/browser/src/node/commands/tab.ts
@@ -0,0 +1,23 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+
+export const tab: UserEventCommand<UserEvent['tab']> = async (
+  context,
+  options = {},
+) => {
+  const provider = context.provider
+  if (provider instanceof PlaywrightBrowserProvider) {
+    const page = context.page
+    await page.keyboard.press(options.shift === true ? 'Shift+Tab' : 'Tab')
+    return
+  }
+  if (provider instanceof WebdriverBrowserProvider) {
+    const { Key } = await import('webdriverio')
+    const browser = context.browser
+    await browser.keys(options.shift === true ? [Key.Shift, Key.Tab] : [Key.Tab])
+    return
+  }
+  throw new Error(`Provider "${provider.name}" doesn't support tab command`)
+}
diff --git a/packages/browser/src/node/commands/type.ts b/packages/browser/src/node/commands/type.ts
new file mode 100644
index 000000000000..2242b685ab6a
--- /dev/null
+++ b/packages/browser/src/node/commands/type.ts
@@ -0,0 +1,56 @@
+import type { UserEvent } from '../../../context'
+import { PlaywrightBrowserProvider } from '../providers/playwright'
+import { WebdriverBrowserProvider } from '../providers/webdriver'
+import type { UserEventCommand } from './utils'
+import { keyboardImplementation } from './keyboard'
+
+export const type: UserEventCommand<UserEvent['type']> = async (
+  context,
+  xpath,
+  text,
+  options = {},
+) => {
+  const { skipClick = false, skipAutoClose = false } = options
+
+  if (context.provider instanceof PlaywrightBrowserProvider) {
+    const { frame } = context
+    const element = frame.locator(`xpath=${xpath}`)
+
+    if (!skipClick) {
+      await element.focus()
+    }
+
+    await keyboardImplementation(
+      context.provider,
+      context.contextId,
+      text,
+      () => element.selectText(),
+      skipAutoClose,
+    )
+  }
+  else if (context.provider instanceof WebdriverBrowserProvider) {
+    const browser = context.browser
+    const markedXpath = `//${xpath}`
+    const element = browser.$(markedXpath)
+
+    if (!skipClick && !await element.isFocused()) {
+      await element.click()
+    }
+
+    await keyboardImplementation(
+      context.provider,
+      context.contextId,
+      text,
+      () => browser.execute(() => {
+        const element = document.activeElement as HTMLInputElement
+        if (element) {
+          element.select()
+        }
+      }),
+      skipAutoClose,
+    )
+  }
+  else {
+    throw new TypeError(`Provider "${context.provider.name}" does not support typing`)
+  }
+}
diff --git a/packages/browser/src/node/index.ts b/packages/browser/src/node/index.ts
index 9ab9d88bd471..db1c58dce042 100644
--- a/packages/browser/src/node/index.ts
+++ b/packages/browser/src/node/index.ts
@@ -94,6 +94,7 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
             const files = project.browserState.get(contextId!)?.files ?? []
 
             const injector = replacer(await injectorJs, {
+              __VITEST_PROVIDER__: JSON.stringify(project.browserProvider!.name),
               __VITEST_CONFIG__: JSON.stringify(config),
               __VITEST_VITE_CONFIG__: JSON.stringify({
                 root: project.browser!.config.root,
@@ -169,6 +170,7 @@ export default (project: WorkspaceProject, base = '/'): Plugin[] => {
           const files = project.browserState.get(contextId)?.files ?? []
 
           const injector = replacer(await injectorJs, {
+            __VITEST_PROVIDER__: JSON.stringify(project.browserProvider!.name),
             __VITEST_CONFIG__: JSON.stringify(config),
             __VITEST_FILES__: JSON.stringify(files),
             __VITEST_VITE_CONFIG__: JSON.stringify({
diff --git a/packages/browser/src/node/plugins/pluginContext.ts b/packages/browser/src/node/plugins/pluginContext.ts
index 108dc581de1c..f9dadb32a943 100644
--- a/packages/browser/src/node/plugins/pluginContext.ts
+++ b/packages/browser/src/node/plugins/pluginContext.ts
@@ -81,17 +81,29 @@ export const server = {
   }
 }
 export const commands = server.commands
-export const userEvent = ${
-    provider.name === 'preview' ? '__vitest_user_event__' : '__userEvent_CDP__'
-  }
+export const userEvent = ${getUserEvent(provider)}
 export { page }
 `
 }
 
-async function getUserEventImport(
-  provider: BrowserProvider,
-  resolve: (id: string, importer: string) => Promise<null | { id: string }>,
-) {
+function getUserEvent(provider: BrowserProvider) {
+  if (provider.name !== 'preview') {
+    return '__userEvent_CDP__'
+  }
+  // TODO: have this in a separate file
+  return `{
+  ...__vitest_user_event__,
+  fill: async (element, text) => {
+    await __vitest_user_event__.clear(element)
+    await __vitest_user_event__.type(element, text)
+  },
+  dragAndDrop: async () => {
+    throw new Error('Provider "preview" does not support dragging elements')
+  }
+}`
+}
+
+async function getUserEventImport(provider: BrowserProvider, resolve: (id: string, importer: string) => Promise<null | { id: string }>) {
   if (provider.name !== 'preview') {
     return ''
   }
diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts
index 3ba9b44ae400..4765a84ec7a1 100644
--- a/packages/browser/src/node/providers/playwright.ts
+++ b/packages/browser/src/node/providers/playwright.ts
@@ -102,12 +102,11 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
 
   public getCommandsContext(contextId: string) {
     const page = this.getPage(contextId)
-    const tester = page.frameLocator('iframe[data-vitest]')
     return {
       page,
-      tester,
-      get body() {
-        return page.frameLocator('iframe[data-vitest]').locator('body')
+      context: this.contexts.get(contextId)!,
+      get frame() {
+        return page.frame('vitest-iframe')!
       },
     }
   }
diff --git a/packages/utils/src/source-map.ts b/packages/utils/src/source-map.ts
index a8175f49664a..cbbd7216e945 100644
--- a/packages/utils/src/source-map.ts
+++ b/packages/utils/src/source-map.ts
@@ -32,9 +32,7 @@ const stackIgnorePatterns = [
   '/node_modules/tinypool/',
   '/node_modules/tinyspy/',
   // browser related deps
-  '/deps/chai.js',
-  '/deps/vitest___chai.js',
-  '/deps/p-limit.js',
+  '/deps/',
   /node:\w+/,
   /__vitest_test__/,
   /__vitest_browser__/,
diff --git a/packages/vitest/src/defaults.ts b/packages/vitest/src/defaults.ts
index 74b68132fc01..ca5e0da982e7 100644
--- a/packages/vitest/src/defaults.ts
+++ b/packages/vitest/src/defaults.ts
@@ -106,8 +106,6 @@ const config = {
   mockReset: false,
   include: defaultInclude,
   exclude: defaultExclude,
-  testTimeout: 5000,
-  hookTimeout: 10000,
   teardownTimeout: 10000,
   forceRerunTriggers: ['**/package.json/**', '**/{vitest,vite}.config.*/**'],
   update: false,
diff --git a/packages/vitest/src/integrations/chai/poll.ts b/packages/vitest/src/integrations/chai/poll.ts
index 419b3f8d4daa..b290fa048ef4 100644
--- a/packages/vitest/src/integrations/chai/poll.ts
+++ b/packages/vitest/src/integrations/chai/poll.ts
@@ -40,14 +40,14 @@ export function createExpectPoll(expect: ExpectStatic): ExpectStatic['poll'] {
     }) as Assertion
     const proxy: any = new Proxy(assertion, {
       get(target, key, receiver) {
-        const result = Reflect.get(target, key, receiver)
+        const assertionFunction = Reflect.get(target, key, receiver)
 
-        if (typeof result !== 'function') {
-          return result instanceof chai.Assertion ? proxy : result
+        if (typeof assertionFunction !== 'function') {
+          return assertionFunction instanceof chai.Assertion ? proxy : assertionFunction
         }
 
         if (key === 'assert') {
-          return result
+          return assertionFunction
         }
 
         if (typeof key === 'string' && unsupported.includes(key)) {
@@ -75,8 +75,9 @@ export function createExpectPoll(expect: ExpectStatic): ExpectStatic['poll'] {
             }, timeout)
             const check = async () => {
               try {
-                chai.util.flag(this, 'object', await fn())
-                resolve(await result.call(this, ...args))
+                const obj = await fn()
+                chai.util.flag(assertion, 'object', obj)
+                resolve(await assertionFunction.call(assertion, ...args))
                 clearTimeout(intervalId)
                 clearTimeout(timeoutId)
               }
diff --git a/packages/vitest/src/node/config.ts b/packages/vitest/src/node/config.ts
index aa6f5f3f968c..4d369c996ac2 100644
--- a/packages/vitest/src/node/config.ts
+++ b/packages/vitest/src/node/config.ts
@@ -701,6 +701,9 @@ export function resolveConfig(
 
   resolved.testTransformMode ??= {}
 
+  resolved.testTimeout ??= resolved.browser.enabled ? 15000 : 5000
+  resolved.hookTimeout ??= resolved.browser.enabled ? 30000 : 10000
+
   return resolved
 }
 
diff --git a/test/browser/specs/runner.test.ts b/test/browser/specs/runner.test.ts
index a072eeabca84..f139c09b2589 100644
--- a/test/browser/specs/runner.test.ts
+++ b/test/browser/specs/runner.test.ts
@@ -23,8 +23,8 @@ describe('running browser tests', async () => {
       console.error(stderr)
     })
 
-    expect(browserResultJson.testResults).toHaveLength(16)
-    expect(passedTests).toHaveLength(14)
+    expect(browserResultJson.testResults).toHaveLength(17)
+    expect(passedTests).toHaveLength(15)
     expect(failedTests).toHaveLength(2)
 
     expect(stderr).not.toContain('has been externalized for browser compatibility')
diff --git a/test/browser/test/__screenshots__/dom.test.ts/dom-related-activity-renders-div-1.png b/test/browser/test/__screenshots__/dom.test.ts/dom-related-activity-renders-div-1.png
deleted file mode 100644
index f880ae781001..000000000000
Binary files a/test/browser/test/__screenshots__/dom.test.ts/dom-related-activity-renders-div-1.png and /dev/null differ
diff --git a/test/browser/test/commands.test.ts b/test/browser/test/commands.test.ts
index 7e7c6d4040b2..a838848f7873 100644
--- a/test/browser/test/commands.test.ts
+++ b/test/browser/test/commands.test.ts
@@ -1,7 +1,7 @@
-import { commands, server } from '@vitest/browser/context'
+import { server } from '@vitest/browser/context'
 import { expect, it } from 'vitest'
 
-const { readFile, writeFile, removeFile, sendKeys, myCustomCommand } = server.commands
+const { readFile, writeFile, removeFile, myCustomCommand } = server.commands
 
 it('can manipulate files', async () => {
   const file = './test.txt'
@@ -42,95 +42,6 @@ it('can manipulate files', async () => {
   }
 })
 
-// Test Cases from https://modern-web.dev/docs/test-runner/commands/#writing-and-reading-files
-it('natively types into an input', async () => {
-  const keys = 'abc123'
-  const input = document.createElement('input')
-  document.body.append(input)
-  input.focus()
-
-  await commands.sendKeys({
-    type: keys,
-  })
-
-  expect(input.value).to.equal(keys)
-  input.remove()
-})
-
-it('natively presses `Tab`', async () => {
-  const input1 = document.createElement('input')
-  const input2 = document.createElement('input')
-  document.body.append(input1, input2)
-  input1.focus()
-  expect(document.activeElement).to.equal(input1)
-
-  await commands.sendKeys({
-    press: 'Tab',
-  })
-
-  expect(document.activeElement).to.equal(input2)
-  input1.remove()
-  input2.remove()
-})
-
-it.skipIf(server.provider === 'webdriverio')('natively presses `Shift+Tab`', async () => {
-  const input1 = document.createElement('input')
-  const input2 = document.createElement('input')
-  document.body.append(input1, input2)
-  input2.focus()
-  expect(document.activeElement).to.equal(input2)
-
-  await sendKeys({
-    down: 'Shift',
-  })
-  await sendKeys({
-    press: 'Tab',
-  })
-  await sendKeys({
-    up: 'Shift',
-  })
-
-  expect(document.activeElement).to.equal(input1)
-  input1.remove()
-  input2.remove()
-})
-
-it.skipIf(server.provider === 'webdriverio')('natively holds and then releases a key', async () => {
-  const input = document.createElement('input')
-  document.body.append(input)
-  input.focus()
-
-  await sendKeys({
-    down: 'Shift',
-  })
-  // Note that pressed modifier keys are only respected when using `press` or
-  // `down`, and only when using the `Key...` variants.
-  await sendKeys({
-    press: 'KeyA',
-  })
-  await sendKeys({
-    press: 'KeyB',
-  })
-  await sendKeys({
-    press: 'KeyC',
-  })
-  await sendKeys({
-    up: 'Shift',
-  })
-  await sendKeys({
-    press: 'KeyA',
-  })
-  await sendKeys({
-    press: 'KeyB',
-  })
-  await sendKeys({
-    press: 'KeyC',
-  })
-
-  expect(input.value).to.equal('ABCabc')
-  input.remove()
-})
-
 it('can run custom commands', async () => {
   const result = await myCustomCommand('arg1', 'arg2')
   expect(result).toEqual({
diff --git a/test/browser/test/dom.test.ts b/test/browser/test/dom.test.ts
index 0eb2f150540c..499d276375e8 100644
--- a/test/browser/test/dom.test.ts
+++ b/test/browser/test/dom.test.ts
@@ -15,6 +15,8 @@ describe('dom related activity', () => {
     const screenshotPath = await page.screenshot({
       element: wrapper,
     })
-    expect(screenshotPath).toMatch(/__screenshots__\/dom.test.ts\/dom-related-activity-renders-div-1.png/)
+    expect(screenshotPath).toMatch(
+      /__screenshots__\/dom.test.ts\/dom-related-activity-renders-div-1.png/,
+    )
   })
 })
diff --git a/test/browser/test/userEvent.test.ts b/test/browser/test/userEvent.test.ts
new file mode 100644
index 000000000000..81b18735d2da
--- /dev/null
+++ b/test/browser/test/userEvent.test.ts
@@ -0,0 +1,556 @@
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import { server, userEvent } from '@vitest/browser/context'
+import '../src/button.css'
+
+beforeEach(() => {
+  // clear body
+  document.body.replaceChildren()
+})
+
+describe('userEvent.click', () => {
+  test('correctly clicks a button', async () => {
+    const button = document.createElement('button')
+    button.textContent = 'Click me'
+    document.body.appendChild(button)
+    const onClick = vi.fn()
+    const dblClick = vi.fn()
+    button.addEventListener('click', onClick)
+
+    await userEvent.click(button)
+
+    expect(onClick).toHaveBeenCalled()
+    expect(dblClick).not.toHaveBeenCalled()
+  })
+
+  test('correctly doesn\'t click on a disabled button', async () => {
+    const button = document.createElement('button')
+    button.textContent = 'Click me'
+    button.disabled = true
+    document.body.appendChild(button)
+    const onClick = vi.fn()
+    button.addEventListener('click', onClick)
+
+    await userEvent.click(button, {
+      // playwright requires force: true to click on a disabled button
+      force: true,
+    })
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+})
+
+describe('userEvent.dblClick', () => {
+  test('correctly clicks a button', async () => {
+    const button = document.createElement('button')
+    button.textContent = 'Click me'
+    document.body.appendChild(button)
+    const onClick = vi.fn()
+    const dblClick = vi.fn()
+    button.addEventListener('click', onClick)
+    button.addEventListener('dblclick', dblClick)
+
+    await userEvent.dblClick(button)
+
+    expect(onClick).toHaveBeenCalledTimes(2)
+    expect(dblClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('correctly doesn\'t click on a disabled button', async () => {
+    const button = document.createElement('button')
+    button.textContent = 'Click me'
+    button.disabled = true
+    document.body.appendChild(button)
+    const onClick = vi.fn()
+    const dblClick = vi.fn()
+    button.addEventListener('click', onClick)
+    button.addEventListener('dblclick', dblClick)
+
+    await userEvent.dblClick(button, {
+      // playwright requires force: true to click on a disabled button
+      force: true,
+    })
+
+    expect(onClick).not.toHaveBeenCalled()
+    expect(dblClick).not.toHaveBeenCalled()
+  })
+})
+
+describe('userEvent.hover, userEvent.unhover', () => {
+  test('hover works correctly', async () => {
+    const target = document.createElement('div')
+    target.style.width = '100px'
+    target.style.height = '100px'
+
+    let mouseEntered = false
+    let pointerEntered = false
+    target.addEventListener('mouseover', () => {
+      mouseEntered = true
+    })
+    target.addEventListener('pointerenter', () => {
+      pointerEntered = true
+    })
+    target.addEventListener('pointerleave', () => {
+      pointerEntered = false
+    })
+    target.addEventListener('mouseout', () => {
+      mouseEntered = false
+    })
+
+    document.body.appendChild(target)
+
+    await userEvent.hover(target)
+
+    expect(pointerEntered).toBe(true)
+    expect(mouseEntered).toBe(true)
+
+    await userEvent.unhover(target)
+
+    expect(pointerEntered).toBe(false)
+    expect(mouseEntered).toBe(false)
+  })
+})
+
+const inputLike = [
+  () => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.placeholder = 'Type here'
+    document.body.appendChild(input)
+    return input
+  },
+  () => {
+    const input = document.createElement('textarea')
+    input.placeholder = 'Type here'
+    document.body.appendChild(input)
+    return input
+  },
+  () => {
+    const contentEditable = document.createElement('div')
+    contentEditable.contentEditable = 'true'
+    document.body.appendChild(contentEditable)
+    return contentEditable
+  },
+]
+
+describe.each(inputLike)('userEvent.type', (getElement) => {
+  test('types into an input', async () => {
+    const { input, keydown, keyup, value } = createTextInput()
+
+    await userEvent.type(input, 'Hello World!')
+    expect(value()).toBe('Hello World!')
+    expect(keydown).toEqual([
+      'H',
+      'e',
+      'l',
+      'l',
+      'o',
+      ' ',
+      'W',
+      'o',
+      'r',
+      'l',
+      'd',
+      '!',
+    ])
+    expect(keyup).toEqual([
+      'H',
+      'e',
+      'l',
+      'l',
+      'o',
+      ' ',
+      'W',
+      'o',
+      'r',
+      'l',
+      'd',
+      '!',
+    ])
+    keydown.length = 0
+    keyup.length = 0
+
+    await userEvent.type(input, '{a>3}4')
+    expect(value()).toBe('Hello World!aaa4')
+
+    await userEvent.type(input, '{backspace}')
+    expect(value()).toBe('Hello World!aaa')
+
+    // doesn't affect the input value
+    await userEvent.type(input, '{/a}')
+    expect(value()).toBe('Hello World!aaa')
+
+    expect(keydown).toEqual([
+      'a',
+      'a',
+      'a',
+      '4',
+      'Backspace',
+    ])
+
+    await userEvent.type(input, '{Shift}b{/Shift}')
+
+    // this follow userEvent logic
+    expect(value()).toBe('Hello World!aaab')
+
+    await userEvent.clear(input)
+
+    expect(value()).toBe('')
+  })
+
+  test('repeating without manual up works correctly', async () => {
+    const { input, keydown, keyup, value } = createTextInput()
+
+    await userEvent.type(input, '{a>3}4')
+    expect(value()).toBe('aaa4')
+
+    expect(keydown).toEqual([
+      'a',
+      'a',
+      'a',
+      '4',
+    ])
+    // keyup is released at the end by userEvent
+    expect(keyup).toEqual([
+      '4',
+      'a',
+    ])
+  })
+
+  test('repeating with manual up works correctly', async () => {
+    const { input, keydown, keyup, value } = createTextInput()
+
+    await userEvent.type(input, '{a>3/}4')
+    expect(value()).toBe('aaa4')
+
+    expect(keydown).toEqual([
+      'a',
+      'a',
+      'a',
+      '4',
+    ])
+    // keyup is released with "/" syntax
+    expect(keyup).toEqual([
+      'a',
+      '4',
+    ])
+  })
+
+  test('repeating with disabled up works correctly', async () => {
+    const { input, keydown, keyup, value } = createTextInput()
+
+    await userEvent.type(input, '{a>3}4', {
+      skipAutoClose: true,
+    })
+    expect(value()).toBe('aaa4')
+
+    expect(keydown).toEqual([
+      'a',
+      'a',
+      'a',
+      '4',
+    ])
+    // keyup is not released at the end by userEvent
+    expect(keyup).toEqual([
+      '4',
+    ])
+  })
+
+  // strangly enough, original userEvent doesn't support this,
+  // but we can implement it
+  test.skipIf(server.provider === 'preview')('selectall works correctly', async () => {
+    const input = document.createElement('input')
+    input.type = 'text'
+    input.placeholder = 'Type here'
+    document.body.appendChild(input)
+    await userEvent.type(input, 'Hello World!')
+    await userEvent.type(input, '{selectall}')
+    await userEvent.type(input, '{backspace}')
+    expect(input.value).toBe('')
+  })
+
+  function createTextInput() {
+    const input = getElement()
+    const keydown: string[] = []
+    const keyup: string[] = []
+    input.addEventListener('keydown', (event: KeyboardEvent) => {
+      keydown.push(event.key)
+    })
+    input.addEventListener('keyup', (event: KeyboardEvent) => {
+      keyup.push(event.key)
+    })
+    document.body.appendChild(input)
+    return {
+      input,
+      keydown,
+      keyup,
+      value() {
+        if ('value' in input) {
+          return input.value
+        }
+        return input.textContent
+      },
+    }
+  }
+})
+
+describe('userEvent.tab', () => {
+  test('tab correctly switches focus', async () => {
+    const input1 = document.createElement('input')
+    input1.type = 'text'
+    const input2 = document.createElement('input')
+    input2.type = 'text'
+    document.body.appendChild(input1)
+    document.body.appendChild(input2)
+
+    input1.focus()
+    await userEvent.tab()
+
+    expect(document.activeElement).toBe(input2)
+
+    await userEvent.tab({ shift: true })
+
+    expect(document.activeElement).toBe(input1)
+  })
+})
+
+describe.each(inputLike)('userEvent.fill', async (getInput) => {
+  test('correctly fills the input value', async () => {
+    const input = getInput()
+    function value() {
+      if ('value' in input) {
+        return input.value
+      }
+      return input.textContent
+    }
+
+    await userEvent.fill(input, 'Hello World!')
+    expect(value()).toBe('Hello World!')
+
+    await userEvent.fill(input, 'Another Value')
+    expect(value()).toBe('Another Value')
+  })
+})
+
+describe('userEvent.keyboard', async () => {
+  test('standalone keyboard works correctly with a body in focus', async () => {
+    const pressed: string[] = []
+    document.addEventListener('keydown', (event) => {
+      pressed.push(event.key)
+    })
+    expect(document.activeElement).toBe(document.body)
+    await userEvent.keyboard('Hello')
+    expect(pressed).toEqual([
+      'H',
+      'e',
+      'l',
+      'l',
+      'o',
+    ])
+  })
+
+  test('standalone keyboard works correctly with an active non-input', async () => {
+    const documentKeydown: string[] = []
+    const divKeydown: string[] = []
+    const div = document.createElement('div')
+    div.style.width = '100px'
+    div.style.height = '100px'
+    div.tabIndex = 0
+    div.addEventListener('keydown', (event) => {
+      divKeydown.push(event.key)
+      event.stopPropagation()
+      event.preventDefault()
+    })
+    document.body.appendChild(div)
+    document.addEventListener('keydown', (event) => {
+      documentKeydown.push(event.key)
+    })
+    expect(document.activeElement).toBe(document.body)
+    div.focus()
+    expect(document.activeElement).toBe(div)
+    await userEvent.keyboard('Hello{backspace}')
+    expect(documentKeydown).toEqual([])
+    expect(divKeydown).toEqual([
+      'H',
+      'e',
+      'l',
+      'l',
+      'o',
+      'Backspace',
+    ])
+  })
+
+  test('standalone keyboard works correctly with active input', async () => {
+    const documentKeydown: string[] = []
+    const inputKeydown: string[] = []
+    const input = document.createElement('input')
+    input.addEventListener('keydown', (event) => {
+      inputKeydown.push(event.key)
+      event.stopPropagation()
+    })
+    document.body.appendChild(input)
+    document.addEventListener('keydown', (event) => {
+      documentKeydown.push(event.key)
+    })
+    expect(document.activeElement).toBe(document.body)
+    input.focus()
+    expect(document.activeElement).toBe(input)
+
+    await userEvent.keyboard('Hello{backspace}')
+
+    expect(input.value).toBe('Hell')
+    expect(documentKeydown).toEqual([])
+    expect(inputKeydown).toEqual([
+      'H',
+      'e',
+      'l',
+      'l',
+      'o',
+      'Backspace',
+    ])
+  })
+})
+
+describe.skipIf(server.provider === 'preview')('userEvent.dragAndDrop', async () => {
+  test('drag and drop works', async () => {
+    const source = document.createElement('div')
+    source.textContent = 'Drag me'
+    source.style.width = '100px'
+    source.style.height = '100px'
+    source.style.background = 'red'
+    source.draggable = true
+
+    const dragstart = vi.fn()
+
+    source.addEventListener('dragstart', dragstart)
+
+    const target = document.createElement('div')
+    target.style.width = '100px'
+    target.style.height = '100px'
+    target.style.background = 'blue'
+
+    const dragover = vi.fn(() => {
+      target.textContent = 'Dropped'
+    })
+
+    target.addEventListener('dragover', dragover)
+
+    document.body.appendChild(source)
+    document.body.appendChild(target)
+
+    expect(target.textContent).toBe('')
+
+    await userEvent.dragAndDrop(source, target)
+
+    await expect.poll(() => dragstart).toHaveBeenCalled()
+    await expect.poll(() => dragover).toHaveBeenCalled()
+
+    expect(target.textContent).toBe('Dropped')
+  })
+})
+
+describe.each([
+  [
+    'select',
+    function createSelect() {
+      const select = document.createElement('select')
+      const option1 = document.createElement('option')
+      option1.value = '1'
+      option1.textContent = 'Option 1'
+      const option2 = document.createElement('option')
+      option2.value = '2'
+      option2.textContent = 'Option 2'
+      select.appendChild(option1)
+      select.appendChild(option2)
+      document.body.appendChild(select)
+
+      return { select, options: [option1, option2] }
+    },
+  ],
+  // TODO: support listbox
+  // [
+  //   'listbox',
+  //   function createSelect() {
+  //     const select = document.createElement('div')
+  //     select.setAttribute('role', 'listbox')
+  //     const option1 = document.createElement('div')
+  //     option1.setAttribute('role', 'option')
+  //     // option1.value = '1'
+  //     option1.textContent = 'Option 1'
+  //     const option2 = document.createElement('div')
+  //     option2.setAttribute('role', 'option')
+  //     // option2.value = '2'
+  //     option2.textContent = 'Option 2'
+  //     select.appendChild(option1)
+  //     select.appendChild(option2)
+  //     document.body.appendChild(select)
+
+  //     return { select, options: [option1, option2] }
+  //   },
+  // ],
+])('selectOptions in "%s" works correctly', (_, createSelect) => {
+  test('can select a single primitive value', async () => {
+    const { select } = createSelect()
+
+    await userEvent.selectOptions(select, '2')
+
+    expect(select.value).toBe('2')
+  })
+
+  test('can select a single primitive value by label', async () => {
+    const { select } = createSelect()
+
+    await userEvent.selectOptions(select, 'Option 2')
+
+    expect(select.value).toBe('2')
+  })
+
+  test('can select a single element value', async () => {
+    const { select, options } = createSelect()
+
+    await userEvent.selectOptions(select, options[1])
+
+    expect(select.value).toBe('2')
+  })
+
+  // webdriverio doesn't support selecting multiple values
+  describe.skipIf(server.provider === 'webdriverio')('multiple values', () => {
+    test('can select multiple values', async () => {
+      const { select, options } = createSelect()
+      select.multiple = true
+
+      await userEvent.selectOptions(select, ['1', '2'])
+
+      const selected = document.querySelectorAll('option:checked')
+
+      expect(selected).toHaveLength(2)
+      expect(selected[0]).toBe(options[0])
+      expect(selected[1]).toBe(options[1])
+    })
+
+    test('can select multiple values by label', async () => {
+      const { select, options } = createSelect()
+      select.multiple = true
+
+      await userEvent.selectOptions(select, ['Option 1', 'Option 2'])
+
+      const selected = document.querySelectorAll('option:checked')
+
+      expect(selected).toHaveLength(2)
+      expect(selected[0]).toBe(options[0])
+      expect(selected[1]).toBe(options[1])
+    })
+
+    test('can select multiple element values', async () => {
+      const { select, options } = createSelect()
+      select.multiple = true
+
+      await userEvent.selectOptions(select, options)
+
+      const selected = document.querySelectorAll('option:checked')
+
+      expect(selected).toHaveLength(2)
+      expect(selected[0]).toBe(options[0])
+      expect(selected[1]).toBe(options[1])
+    })
+  })
+})