diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index fe838439fcc4..0f14cb7be3a4 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -185,6 +185,11 @@ export default ({ mode }: { mode: string }) => {
             link: '/guide/browser/interactivity-api',
             docFooterText: 'Interactivity API | Browser Mode',
           },
+          {
+            text: 'Locators',
+            link: '/guide/browser/locators',
+            docFooterText: 'Locators | Browser Mode',
+          },
           {
             text: 'Assertion API',
             link: '/guide/browser/assertion-api',
diff --git a/docs/config/index.md b/docs/config/index.md
index 3034f22a847d..5d7bf73595be 100644
--- a/docs/config/index.md
+++ b/docs/config/index.md
@@ -1667,6 +1667,17 @@ Should Vitest UI be injected into the page. By default, injects UI iframe during
 
 Default iframe's viewport.
 
+#### browser.locators {#browser-locators}
+
+Options for built-in [browser locators](/guide/browser/locators).
+
+##### browser.locators.testIdAttribute
+
+- **Type:** `string`
+- **Default:** `data-testid`
+
+Attribute used to find elements with `getByTestId` locator.
+
 #### browser.screenshotDirectory {#browser-screenshotdirectory}
 
 - **Type:** `string`
diff --git a/docs/guide/browser/context.md b/docs/guide/browser/context.md
index eed2828a333d..5780534c0288 100644
--- a/docs/guide/browser/context.md
+++ b/docs/guide/browser/context.md
@@ -78,9 +78,32 @@ export const page: {
     base64: string
   }>
   screenshot(options?: ScreenshotOptions): Promise<string>
+  /**
+   * Extend default `page` object with custom methods.
+   */
+  extend(methods: Partial<BrowserPage>): BrowserPage
+  /**
+   * Wrap an HTML element in a `Locator`. When querying for elements, the search will always return this element.
+   */
+  elementLocator(element: Element): Locator
+
+  /**
+   * Locator APIs. See its documentation for more details.
+   */
+  getByRole(role: ARIARole | string, options?: LocatorByRoleOptions): Locator
+  getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator
+  getByTestId(text: string | RegExp): Locator
+  getByAltText(text: string | RegExp, options?: LocatorOptions): Locator
+  getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator
+  getByText(text: string | RegExp, options?: LocatorOptions): Locator
+  getByTitle(text: string | RegExp, options?: LocatorOptions): Locator
 }
 ```
 
+::: tip
+The `getBy*` API is explained at [Locators API](/guide/browser/locators).
+:::
+
 ## `cdp`
 
 The `cdp` export returns the current Chrome DevTools Protocol session. It is mostly useful to library authors to build tools on top of it.
diff --git a/docs/guide/browser/interactivity-api.md b/docs/guide/browser/interactivity-api.md
index 53c06704dbf1..66bd614babba 100644
--- a/docs/guide/browser/interactivity-api.md
+++ b/docs/guide/browser/interactivity-api.md
@@ -64,7 +64,7 @@ This behaviour is more useful because we do not emulate the keyboard, we actuall
 
 ## userEvent.click
 
-- **Type:** `(element: Element, options?: UserEventClickOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, options?: UserEventClickOptions) => Promise<void>`
 
 Click on an element. Inherits provider's options. Please refer to your provider's documentation for detailed explanation about how this method works.
 
@@ -87,7 +87,7 @@ References:
 
 ## userEvent.dblClick
 
-- **Type:** `(element: Element, options?: UserEventDoubleClickOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, options?: UserEventDoubleClickOptions) => Promise<void>`
 
 Triggers a double click event on an element.
 
@@ -112,7 +112,7 @@ References:
 
 ## userEvent.tripleClick
 
-- **Type:** `(element: Element, options?: UserEventTripleClickOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, options?: UserEventTripleClickOptions) => Promise<void>`
 
 Triggers a triple click event on an element. Since there is no `tripleclick` in browser api, this method will fire three click events in a row, and so you must check [click event detail](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event#usage_notes) to filter the event: `evt.detail === 3`.
 
@@ -144,7 +144,7 @@ References:
 
 ## userEvent.fill
 
-- **Type:** `(element: Element, text: string) => Promise<void>`
+- **Type:** `(element: Element | Locator, text: string) => Promise<void>`
 
 Set a value to the `input/textarea/conteneditable` field. This will remove any existing text in the input before setting the new value.
 
@@ -234,7 +234,7 @@ References:
 
 ## userEvent.type
 
-- **Type:** `(element: Element, text: string, options?: UserEventTypeOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, 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.
@@ -267,7 +267,7 @@ References:
 
 ## userEvent.clear
 
-- **Type:** `(element: Element) => Promise<void>`
+- **Type:** `(element: Element | Locator) => Promise<void>`
 
 This method clears the input element content.
 
@@ -294,7 +294,7 @@ References:
 
 ## userEvent.selectOptions
 
-- **Type:** `(element: Element, values: HTMLElement | HTMLElement[] | string | string[], options?: UserEventSelectOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, values: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[], options?: UserEventSelectOptions) => Promise<void>`
 
 The `userEvent.selectOptions` allows selecting a value in a `<select>` element.
 
@@ -337,7 +337,7 @@ References:
 
 ## userEvent.hover
 
-- **Type:** `(element: Element, options?: UserEventHoverOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, options?: UserEventHoverOptions) => Promise<void>`
 
 This method moves the cursor position to the selected element. Please refer to your provider's documentation for detailed explanation about how this method works.
 
@@ -366,7 +366,7 @@ References:
 
 ## userEvent.unhover
 
-- **Type:** `(element: Element, options?: UserEventHoverOptions) => Promise<void>`
+- **Type:** `(element: Element | Locator, options?: UserEventHoverOptions) => Promise<void>`
 
 This works the same as [`userEvent.hover`](#userevent-hover), but moves the cursor to the `document.body` element instead.
 
@@ -393,7 +393,7 @@ References:
 
 ## userEvent.dragAndDrop
 
-- **Type:** `(source: Element, target: Element, options?: UserEventDragAndDropOptions) => Promise<void>`
+- **Type:** `(source: Element | Locator, target: Element | Locator, 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`.
 
diff --git a/docs/guide/browser/locators.md b/docs/guide/browser/locators.md
new file mode 100644
index 000000000000..14c31121043a
--- /dev/null
+++ b/docs/guide/browser/locators.md
@@ -0,0 +1,632 @@
+---
+title: Locators | Browser Mode
+outline: [2, 3]
+---
+
+# Locators <Version>2.1.0</Version>
+
+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.
+
+The locator API uses a fork of [Playwright's locators](https://playwright.dev/docs/api/class-locator) called [Ivya](https://npmjs.com/ivya). However, Vitest provides this API to every [provider](/guide/browser/#provider-configuration).
+
+## getByRole
+
+- **Type:** `(role: ARIARole | string, options?: LocatorByRoleOptions) => Locator`
+
+Creates a way to locate an element by its [ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles), [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) and [accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name).
+
+::: tip
+If you only query for a single element with `getByText('The name')` it's oftentimes better to use `getByRole(expectedRole, { name: 'The name' })`. The accessible name query does not replace other queries such as `*ByAltText` or `*ByTitle`. While the accessible name can be equal to these attributes, it does not replace the functionality of these attributes.
+:::
+
+Consider the following DOM structure.
+
+```html
+<h3>Sign up</h3>
+<label>
+  Login
+  <input type="text" />
+</label>
+<label>
+  Password
+  <input type="password" />
+</label>
+<br/>
+<button>Submit</button>
+```
+
+You can locate each element by its implicit role:
+
+```ts
+await expect.element(
+  page.getByRole('heading', { name: 'Sign up' })
+).toBeVisible()
+
+await page.getByRole('textbox', { name: 'Login' }).fill('admin')
+await page.getByRole('textbox', { name: 'Password' }).fill('admin')
+
+await page.getByRole('button', { name: /submit/i }).click()
+```
+
+::: warning
+Roles are matched by string equality, without inheriting from the ARIA role hierarchy. As a result, querying a superclass role like `checkbox` will not include elements with a subclass role like `switch`.
+
+By default, many semantic elements in HTML have a role; for example, `<input type="radio">` has the "radio" role. Non-semantic elements in HTML do not have a role; `<div>` and `<span>` without added semantics return `null`. The `role` attribute can provide semantics.
+
+Providing roles via `role` or `aria-*` attributes to built-in elements that already have an implicit role is **highly discouraged** by ARIA guidelines.
+:::
+
+##### Options
+
+- `exact: boolean`
+
+  Whether the `name` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `name` is a regular expression. Note that exact match still trims whitespace.
+
+  ```tsx
+  <button>Hello World</button>
+
+  page.getByRole('button', { name: 'hello world' }) // ✅
+  page.getByRole('button', { name: 'hello world', exact: true }) // ❌
+  page.getByRole('button', { name: 'Hello World', exact: true }) // ✅
+  ```
+
+- `checked: boolean`
+
+  Should checked elements (set by `aria-checked` or `<input type="checkbox"/>`) be included or not. By default, the filter is not applied.
+
+  See [`aria-checked`](https://www.w3.org/TR/wai-aria-1.2/#aria-checked) for more information
+
+  ```tsx
+  <>
+    <button role="checkbox" aria-checked="true" />
+    <input type="checkbox" checked />
+  </>
+
+  page.getByRole('checkbox', { checked: true }) // ✅
+  page.getByRole('checkbox', { checked: false }) // ❌
+  ```
+
+- `disabled: boolean`
+
+  Should disabled elements be included or not. By default, the filter is not applied. Note that unlike other attributes, `disable` state is inherited.
+
+  See [`aria-disabled`](https://www.w3.org/TR/wai-aria-1.2/#aria-disabled) for more information
+
+  ```tsx
+  <input type="text" disabled />
+
+  page.getByRole('textbox', { disabled: true }) // ✅
+  page.getByRole('textbox', { disabled: false }) // ❌
+  ```
+
+- `expanded: boolean`
+
+  Should expanded elements be included or not. By default, the filter is not applied.
+
+  See [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.2/#aria-expanded) for more information
+
+  ```tsx
+  <a aria-expanded="true" href="example.com">Link</a>
+
+  page.getByRole('link', { expanded: true }) // ✅
+  page.getByRole('link', { expanded: false }) // ❌
+  ```
+
+- `includeHidden: boolean`
+
+  Should elements that are [normally excluded](https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion) from the accessibility tree be queried. By default, only non-hidden elements are matched by role selector.
+
+  Note that roles `none` and `presentation` are always included.
+
+  ```tsx
+  <button style="display: none" />
+
+  page.getByRole('button') // ❌
+  page.getByRole('button', { includeHidden: false }) // ❌
+  page.getByRole('button', { includeHidden: true }) // ✅
+  ```
+
+- `level: number`
+
+  A number attribute that is usually present for `heading`, `listitem`, `row`, `treeitem` roles with default values for `<h1>-<h6>` elements. By default, the filter is not applied.
+
+  See [`aria-level`](https://www.w3.org/TR/wai-aria-1.2/#aria-level) for more information
+
+  ```tsx
+  <>
+    <h1>Heading Level One</h1>
+    <div role="heading" aria-level="1">Second Heading Level One</div>
+  </>
+
+  page.getByRole('heading', { level: 1 }) // ✅
+  page.getByRole('heading', { level: 2 }) // ❌
+  ```
+
+- `name: string | RegExp`
+
+  [An accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name). By default, matching is case-insensitive and searches for a substring. Use `exact` option to control this behavior.
+
+  ```tsx
+  <button>Click Me!</button>
+
+  page.getByRole('button', { name: 'Click Me!' }) // ✅
+  page.getByRole('button', { name: 'click me!' }) // ✅
+  page.getByRole('button', { name: 'Click Me?' }) // ❌
+  ```
+
+- `pressed: boolean`
+
+  Should pressed elements be included or not. By default, the filter is not applied.
+
+  See [`aria-pressed`](https://www.w3.org/TR/wai-aria-1.2/#aria-pressed) for more information
+
+  ```tsx
+  <button aria-pressed="true">👍</button>
+
+  page.getByRole('button', { pressed: true }) // ✅
+  page.getByRole('button', { pressed: false }) // ❌
+  ```
+
+- `selected: boolean`
+
+  Should selected elements be included or not. By default, the filter is not applied.
+
+  See [`aria-selected`](https://www.w3.org/TR/wai-aria-1.2/#aria-selected) for more information
+
+  ```tsx
+  <button role="tab" aria-selected="true">Vue</button>
+
+  page.getByRole('button', { selected: true }) // ✅
+  page.getByRole('button', { selected: false }) // ❌
+  ```
+
+##### See also
+
+- [List of ARIA roles at MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)
+- [List of ARIA roles at w3.org](https://www.w3.org/TR/wai-aria-1.2/#role_definitions)
+- [testing-library's `ByRole`](https://testing-library.com/docs/queries/byrole/)
+
+## getByAltText
+
+- **Type:** `(text: string | RegExp, options?: LocatorOptions) => Locator`
+
+Creates a locator capable of finding an element with an `alt` attribute that matches the text. Unlike testing-library's implementation, Vitest will match any element that has a matching `alt` attribute.
+
+```tsx
+<img alt="Incredibles 2 Poster" src="/incredibles-2.png" />
+
+page.getByAltText(/incredibles.*? poster/i) // ✅
+page.getByAltText('non existing alt text') // ❌
+```
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByAltText`](https://testing-library.com/docs/queries/byalttext/)
+
+## getByLabelText
+
+- **Type:** `(text: string | RegExp, options?: LocatorOptions) => Locator`
+
+Creates a locator capable of finding an element that has an assosiated label.
+
+The `page.getByLabelText('Username')` locator will find every input in the example bellow:
+
+```html
+// for/htmlFor relationship between label and form element id
+<label for="username-input">Username</label>
+<input id="username-input" />
+
+// The aria-labelledby attribute with form elements
+<label id="username-label">Username</label>
+<input aria-labelledby="username-label" />
+
+// Wrapper labels
+<label>Username <input /></label>
+
+// Wrapper labels where the label text is in another child element
+<label>
+  <span>Username</span>
+  <input />
+</label>
+
+// aria-label attributes
+// Take care because this is not a label that users can see on the page,
+// so the purpose of your input must be obvious to visual users.
+<input aria-label="Username" />
+```
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByLabelText`](https://testing-library.com/docs/queries/bylabeltext/)
+
+## getByPlaceholder
+
+- **Type:** `(text: string | RegExp, options?: LocatorOptions) => Locator`
+
+Creates a locator capable of finding an element that has the specified `placeholder` attribute. Vitest will match any element that has a matching `placeholder` attribute, not just `input`.
+
+```tsx
+<input placeholder="Username" />
+
+page.getByPlaceholder('Username') // ✅
+page.getByPlaceholder('not found') // ❌
+```
+
+::: warning
+It is generally better to rely on a label using [`getByLabelText`](#getbylabeltext) than a placeholder.
+:::
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByPlaceholderText`](https://testing-library.com/docs/queries/byplaceholdertext/)
+
+## getByText
+
+- **Type:** `(text: string | RegExp, options?: LocatorOptions) => Locator`
+
+Creates a locator capable of finding an element that contains the specified text. The text will be matched against TextNode's [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) or input's value if the type is `button` or `reset`. Matching by text always normalizes whitespace, even with exact match. For example, it turns multiple spaces into one, turns line breaks into spaces and ignores leading and trailing whitespace.
+
+```tsx
+<a href="/about">About ℹ️</a>
+
+page.getByText(/about/i) // ✅
+page.getByText('about', { exact: true }) // ❌
+```
+
+::: tip
+This locator is useful for locating non-interactive elements. If you need to locate an interactive element, like a button or an input, prefer [`getByRole`](#getbyrole).
+:::
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByText`](https://testing-library.com/docs/queries/bytext/)
+
+## getByTitle
+
+- **Type:** `(text: string | RegExp, options?: LocatorOptions) => Locator`
+
+Creates a locator capable of finding an element that has the specified `title` attribute. Unlike testing-library's `getByTitle`, Vitest cannot find `title` elements within an SVG.
+
+```tsx
+<span title="Delete" id="2"></span>
+
+page.getByTitle('Delete') // ✅
+page.getByTitle('Create') // ❌
+```
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByTitle`](https://testing-library.com/docs/queries/bytitle/)
+
+## getByTestId
+
+- **Type:** `(text: string | RegExp) => Locator`
+
+Creates a locator capable of finding an element that matches the specified test id attribute. You can configure the attribute name with [`browser.locators.testIdAttribute`](/config/#browser-locators-testidattribute).
+
+```tsx
+<div data-testid="custom-element" />
+
+page.getByTestId('custom-element') // ✅
+page.getByTestId('non-existing-element') // ❌
+```
+
+::: warning
+It is recommended to use this only after the other locators don't work for your use case. Using `data-testid` attributes does not resemble how your software is used and should be avoided if possible.
+:::
+
+#### Options
+
+- `exact: boolean`
+
+  Whether the `text` is matched exactly: case-sensetive and whole-string. Disabled by default. This option is ignored if `text` is a regular expression. Note that exact match still trims whitespace.
+
+#### See also
+
+- [testing-library's `ByTestId`](https://testing-library.com/docs/queries/bytestid/)
+
+## Methods
+
+### click
+
+- **Type:** `(options?: UserEventClickOptions) => Promise<void>`
+
+Click on an element. You can use the options to set the cursor position.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('img', { name: 'Rose' }).click()
+```
+
+- [See more at `userEvent.click`](/guide/browser/interactivity-api#userevent-click)
+
+### dblClick
+
+- **Type:** `(options?: UserEventClickOptions) => Promise<void>`
+
+Triggers a double click event on an element. You can use the options to set the cursor position.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('img', { name: 'Rose' }).dblClick()
+```
+
+- [See more at `userEvent.dblClick`](/guide/browser/interactivity-api#userevent-dblclick)
+
+### tripleClick
+
+- **Type:** `(options?: UserEventClickOptions) => Promise<void>`
+
+Triggers a triple click event on an element. Since there is no `tripleclick` in browser api, this method will fire three click events in a row.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('img', { name: 'Rose' }).tripleClick()
+```
+
+- [See more at `userEvent.tripleClick`](/guide/browser/interactivity-api#userevent-tripleclick)
+
+### clear
+
+- **Type:** `() => Promise<void>`
+
+Clears the input element content.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('textbox', { name: 'Full Name' }).clear()
+```
+
+- [See more at `userEvent.clear`](/guide/browser/interactivity-api#userevent-clear)
+
+### hover
+
+- **Type:** `(options?: UserEventHoverOptions) => Promise<void>`
+
+Moves the cursor position to the selected element.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('img', { name: 'Rose' }).hover()
+```
+
+- [See more at `userEvent.hover`](/guide/browser/interactivity-api#userevent-hover)
+
+### unhover
+
+- **Type:** `(options?: UserEventHoverOptions) => Promise<void>`
+
+This works the same as [`locator.hover`](#hover), but moves the cursor to the `document.body` element instead.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('img', { name: 'Rose' }).unhover()
+```
+
+- [See more at `userEvent.unhover`](/guide/browser/interactivity-api#userevent-unhover)
+
+### fill
+
+- **Type:** `(text: string, options?: UserEventFillOptions) => Promise<void>`
+
+Sets the value of the current `input`, `textarea` or `conteneditable` element.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+await page.getByRole('input', { name: 'Full Name' }).fill('Mr. Bean')
+```
+
+- [See more at `userEvent.fill`](/guide/browser/interactivity-api#userevent-fill)
+
+### dropTo
+
+- **Type:** `(target: Locator, options?: UserEventDragAndDropOptions) => Promise<void>`
+
+Drags the current element to the target location.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+const paris = page.getByText('Paris')
+const france = page.getByText('France')
+
+await paris.dropTo(france)
+```
+
+- [See more at `userEvent.dragAndDrop`](/guide/browser/interactivity-api#userevent-draganddrop)
+
+### selectOptions
+
+- **Type:** `(values: HTMLElement | HTMLElement[] | string | string[], options?: UserEventSelectOptions) => Promise<void>`
+
+Choose one or more values from a `<select>` element.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+const languages = page.getByRole('select', { name: 'Languages' })
+
+await languages.selectOptions('EN')
+await languages.selectOptions(['ES', 'FR'])
+await languages.selectOptions([
+  languages.getByRole('option', { name: 'Spanish' }),
+  languages.getByRole('option', { name: 'French' }),
+])
+```
+
+- [See more at `userEvent.selectOptions`](/guide/browser/interactivity-api#userevent-selectoptions)
+
+### screenshot
+
+- **Type:** `(options?: LocatorScreenshotOptions) => Promise<string | { path: string; base64: string }>`
+
+Creates a screenshot of the element matching the locator's selector.
+
+You can specify the save location for the screenshot using the `path` option, which is relative to the current test file. If the `path` option is not set, Vitest will default to using [`browser.screenshotDirectory`](/config/#browser-screenshotdirectory) (`__screenshot__` by default), along with the names of the file and the test to determine the screenshot's filepath.
+
+If you also need the content of the screenshot, you can specify `base64: true` to return it alongside the filepath where the screenshot is saved.
+
+```ts
+import { page } from '@vitest/browser/context'
+
+const button = page.getByRole('button', { name: 'Click Me!' })
+
+const path = await button.screenshot()
+
+const { path, base64 } = await button.screenshot({
+  path: './button-click-me.png',
+  base64: true, // also return base64 string
+})
+// path - fullpath to the screenshot
+// bas64 - base64 encoded string of the screenshot
+```
+
+### query
+
+- **Type:** `() => Element | null`
+
+This method returns a single element matching the locator's selector or `null` if no element is found.
+
+If multilple elements match the selector, this method will throw an error.  Use [`.elements()`](#elements) when you need all matching DOM Elements or [`.all()`](#all) if you need an array of locators matching the selector.
+
+Consider the following DOM structure:
+
+```html
+<div>Hello <span>World</span></div>
+<div>Hello</div>
+```
+
+These locators will not throw an error:
+
+```ts
+page.getByText('Hello World').query() // ✅ HTMLDivElement
+page.getByText('Hello Germany').query() // ✅ null
+page.getByText('World').query() // ✅ HTMLSpanElement
+page.getByText('Hello', { exact: true }).query() // ✅ HTMLSpanElement
+```
+
+These locators will throw an error:
+
+```ts
+// returns multiple elements
+page.getByText('Hello').query() // ❌
+page.getByText(/^Hello/).query() // ❌
+```
+
+### element
+
+- **Type:** `() => Element`
+
+This method returns a single element matching the locator's selector.
+
+If _no element_ matches the selector, an error is thrown. Consider using [`.query()`](#query) when you just need to check if the element exists.
+
+If _multiple elements_ match the selector, an error is thrown. Use [`.elements()`](#elements) when you need all matching DOM Elements or [`.all()`](#all) if you need an array of locators matching the selector.
+
+::: tip
+This method can be useful if you need to pass it down to an external library. It is called automatically when locator is used with `expect.element` every time the assertion is [retried](/guide/browser/assertion-api):
+
+```ts
+await expect.element(page.getByRole('button')).toBeDisabled()
+```
+:::
+
+Consider the following DOM structure:
+
+```html
+<div>Hello <span>World</span></div>
+<div>Hello Germany</div>
+<div>Hello</div>
+```
+
+These locators will not throw an error:
+
+```ts
+page.getByText('Hello World').element() // ✅
+page.getByText('Hello Germany').element() // ✅
+page.getByText('World').element() // ✅
+page.getByText('Hello', { exact: true }).element() // ✅
+```
+
+These locators will throw an error:
+
+```ts
+// returns multiple elements
+page.getByText('Hello').element() // ❌
+page.getByText(/^Hello/).element() // ❌
+
+// returns no elements
+page.getByText('Hello USA').element() // ❌
+```
+
+### elements
+
+- **Type:** `() => Element[]`
+
+This method returns an array of elements matching the locator's selector.
+
+This function never throws an error. If there are no elements matching the selector, this method will return an empty array.
+
+Consider the following DOM structure:
+
+```html
+<div>Hello <span>World</span></div>
+<div>Hello</div>
+```
+
+These locators will always succeed:
+
+```ts
+page.getByText('Hello World').elements() // ✅ [HTMLElement]
+page.getByText('World').elements() // ✅ [HTMLElement]
+page.getByText('Hello', { exact: true }).elements() // ✅ [HTMLElement]
+page.getByText('Hello').element() // ✅ [HTMLElement, HTMLElement]
+page.getByText('Hello USA').elements() // ✅ []
+```
+
+### all
+
+- **Type:** `() => Locator[]`
+
+This method returns an array of new locators that match the selector.
+
+Internally, this method calls `.elements` and wraps every element using [`page.elementLocator`](/guide/browser/context#page).
+
+- [See `locator.elements()`](#elements)
diff --git a/packages/browser/aria-role.d.ts b/packages/browser/aria-role.d.ts
new file mode 100644
index 000000000000..8818dd8b34b5
--- /dev/null
+++ b/packages/browser/aria-role.d.ts
@@ -0,0 +1,96 @@
+type ARIAWidgetRole =
+    | "button"
+    | "checkbox"
+    | "gridcell"
+    | "link"
+    | "menuitem"
+    | "menuitemcheckbox"
+    | "menuitemradio"
+    | "option"
+    | "progressbar"
+    | "radio"
+    | "scrollbar"
+    | "searchbox"
+    | "slider"
+    | "spinbutton"
+    | "switch"
+    | "tab"
+    | "tabpanel"
+    | "textbox"
+    | "treeitem";
+
+type ARIACompositeWidgetRole =
+    | "combobox"
+    | "grid"
+    | "listbox"
+    | "menu"
+    | "menubar"
+    | "radiogroup"
+    | "tablist"
+    | "tree"
+    | "treegrid";
+
+type ARIADocumentStructureRole =
+    | "application"
+    | "article"
+    | "blockquote"
+    | "caption"
+    | "cell"
+    | "columnheader"
+    | "definition"
+    | "deletion"
+    | "directory"
+    | "document"
+    | "emphasis"
+    | "feed"
+    | "figure"
+    | "generic"
+    | "group"
+    | "heading"
+    | "img"
+    | "insertion"
+    | "list"
+    | "listitem"
+    | "math"
+    | "meter"
+    | "none"
+    | "note"
+    | "paragraph"
+    | "presentation"
+    | "row"
+    | "rowgroup"
+    | "rowheader"
+    | "separator"
+    | "strong"
+    | "subscript"
+    | "superscript"
+    | "table"
+    | "term"
+    | "time"
+    | "toolbar"
+    | "tooltip";
+
+type ARIALandmarkRole =
+    | "banner"
+    | "complementary"
+    | "contentinfo"
+    | "form"
+    | "main"
+    | "navigation"
+    | "region"
+    | "search";
+
+type ARIALiveRegionRole = "alert" | "log" | "marquee" | "status" | "timer";
+
+type ARIAWindowRole = "alertdialog" | "dialog";
+
+type ARIAUncategorizedRole = "code";
+
+export type ARIARole =
+    | ARIAWidgetRole
+    | ARIACompositeWidgetRole
+    | ARIADocumentStructureRole
+    | ARIALandmarkRole
+    | ARIALiveRegionRole
+    | ARIAWindowRole
+    | ARIAUncategorizedRole;
diff --git a/packages/browser/context.d.ts b/packages/browser/context.d.ts
index 4fc68d37998a..4e81c70541d2 100644
--- a/packages/browser/context.d.ts
+++ b/packages/browser/context.d.ts
@@ -1,4 +1,5 @@
 import type { SerializedConfig } from 'vitest'
+import { ARIARole } from './aria-role'
 
 export type BufferEncoding =
   | 'ascii'
@@ -24,9 +25,9 @@ export interface CDPSession {
 }
 
 export interface ScreenshotOptions {
-  element?: Element
+  element?: Element | Locator
   /**
-   * Path relative to the `screenshotDirectory` in the test config.
+   * Path relative to the current test file.
    */
   path?: string
   /**
@@ -64,21 +65,21 @@ export interface UserEvent {
    * @see {@link https://webdriver.io/docs/api/element/click/} WebdriverIO API
    * @see {@link https://testing-library.com/docs/user-event/convenience/#click} testing-library API
    */
-  click: (element: Element, options?: UserEventClickOptions) => Promise<void>
+  click: (element: Element | Locator, 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>
+  dblClick: (element: Element | Locator, options?: UserEventDoubleClickOptions) => Promise<void>
   /**
    * Triggers a triple click event on an element. Uses provider's API under the hood.
    * @see {@link https://playwright.dev/docs/api/class-locator#locator-click} Playwright API: using `click` with `clickCount: 3`
    * @see {@link https://webdriver.io/docs/api/browser/actions/} WebdriverIO API: using actions api with `move` plus three `down + up + pause` events in a row
    * @see {@link https://testing-library.com/docs/user-event/convenience/#tripleclick} testing-library API
    */
-  tripleClick: (element: Element, options?: UserEventTripleClickOptions) => Promise<void>
+  tripleClick: (element: Element | Locator, options?: UserEventTripleClickOptions) => 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.
@@ -100,7 +101,7 @@ export interface UserEvent {
    */
   selectOptions: (
     element: Element,
-    values: HTMLElement | HTMLElement[] | string | string[],
+    values: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[],
     options?: UserEventSelectOptions,
   ) => Promise<void>
   /**
@@ -119,6 +120,7 @@ export interface UserEvent {
   /**
    * 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.
+   * This method can be significantly slower than `userEvent.fill`, so it should be used only when necessary.
    * @example
    * await userEvent.type(input, 'foo') // translates to: f, o, o
    * await userEvent.type(input, '{{a[[') // translates to: {, a, [
@@ -127,14 +129,14 @@ export interface UserEvent {
    * @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>
+  type: (element: Element | Locator, 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>
+  clear: (element: Element | Locator) => 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
@@ -148,7 +150,7 @@ export interface UserEvent {
    * @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>
+  hover: (element: Element | Locator, 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)
@@ -157,7 +159,7 @@ export interface UserEvent {
    * @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>
+  unhover: (element: Element | Locator, 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.
@@ -170,13 +172,13 @@ export interface UserEvent {
    * @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>
+  fill: (element: Element | Locator, 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>
+  dragAndDrop: (source: Element | Locator, target: Element | Locator, options?: UserEventDragAndDropOptions) => Promise<void>
 }
 
 export interface UserEventFillOptions {}
@@ -187,6 +189,199 @@ export interface UserEventDoubleClickOptions {}
 export interface UserEventTripleClickOptions {}
 export interface UserEventDragAndDropOptions {}
 
+export interface LocatorOptions {
+  /**
+   * Whether to find an exact match: case-sensitive and whole-string. Default to false. Ignored when locating by a
+   * regular expression. Note that exact match still trims whitespace.
+   */
+  exact?: boolean
+}
+
+export interface LocatorByRoleOptions extends LocatorOptions {
+  /**
+   * Should checked elements (set by `aria-checked` or `<input type="checkbox"/>`) be included or not. By default, the filter is not applied.
+   *
+   * See [`aria-checked`](https://www.w3.org/TR/wai-aria-1.2/#aria-checked) for more information
+   */
+  checked?: boolean
+  /**
+   * Should disabled elements be included or not. By default, the filter is not applied. Note that unlike other attributes, `disable` state is inherited.
+   *
+   * See [`aria-disabled`](https://www.w3.org/TR/wai-aria-1.2/#aria-disabled) for more information
+   */
+  disabled?: boolean
+  /**
+   * Should expanded elements be included or not. By default, the filter is not applied.
+   *
+   * See [`aria-expanded`](https://www.w3.org/TR/wai-aria-1.2/#aria-expanded) for more information
+   */
+  expanded?: boolean
+  /**
+   * Should elements that are [normally excluded](https://www.w3.org/TR/wai-aria-1.2/#tree_exclusion) from the accessibility tree be queried. By default, only non-hidden elements are matched by role selector.
+   *
+   * Note that roles `none` and `presentation` are always included.
+   * @default false
+   */
+  includeHidden?: boolean
+  /**
+   * A number attribute that is usually present for `heading`, `listitem`, `row`, `treeitem` roles with default values for `<h1>-<h6>` elements. By default, the filter is not applied.
+   *
+   * See [`aria-level`](https://www.w3.org/TR/wai-aria-1.2/#aria-level) for more information
+   */
+  level?: number
+  /**
+   * Option to match the [accessible name](https://w3c.github.io/accname/#dfn-accessible-name). By default, matching is
+   * case-insensitive and searches for a substring, use `exact` to control this behavior.
+   */
+  name?: string | RegExp
+  /**
+   * Should pressed elements be included or not. By default, the filter is not applied.
+   *
+   * See [`aria-pressed`](https://www.w3.org/TR/wai-aria-1.2/#aria-pressed) for more information
+   */
+  pressed?: boolean
+  /**
+   * Should selected elements be included or not. By default, the filter is not applied.
+   *
+   * See [`aria-selected`](https://www.w3.org/TR/wai-aria-1.2/#aria-selected) for more information
+   */
+  selected?: boolean
+}
+
+interface LocatorScreenshotOptions extends Omit<ScreenshotOptions, 'element'> {}
+
+interface LocatorSelectors {
+  /**
+   * Creates a way to locate an element by its [ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles), [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) and [accessible name](https://developer.mozilla.org/en-US/docs/Glossary/Accessible_name).
+   * @see {@link https://vitest.dev/guide/browser/locators#getbyrole}
+   */
+  getByRole(role: ARIARole | ({} & string), options?: LocatorByRoleOptions): Locator
+  /**
+   * @see {@link https://vitest.dev/guide/browser/locators#getbylabeltext}
+   */
+  getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator
+  /**
+   * Creates a locator capable of finding an element with an `alt` attribute that matches the text. Unlike testing-library's implementation, Vitest will match any element that has an `alt` attribute.
+   * @see {@link https://vitest.dev/guide/browser/locators#getbyalttext}
+   */
+  getByAltText(text: string | RegExp, options?: LocatorOptions): Locator
+  /**
+   * Creates a locator capable of finding an element that has the specified placeholder text. Vitest will match any element that has a matching `placeholder` attribute, not just `input`.
+   * @see {@link https://vitest.dev/guide/browser/locators#getbyplaceholder}
+   */
+  getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator
+  /**
+   * Creates a locator capable of finding an element that contains the specified text. The text will be matched against TextNode's [`nodeValue`](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeValue) or input's value if the type is `button` or `reset`.
+   * Matching by text always normalizes whitespace, even with exact match.
+   * For example, it turns multiple spaces into one, turns line breaks into spaces and ignores leading and trailing whitespace.
+   * @see {@link https://vitest.dev/guide/browser/locators#getbytext}
+   */
+  getByText(text: string | RegExp, options?: LocatorOptions): Locator
+  /**
+   * Creates a locator capable of finding an element that has the specified `title` attribute. Unlike testing-library's `getByTitle`, Vitest cannot find `title` elements within an SVG.
+   * @see {@link https://vitest.dev/guide/browser/locators#getbytitle}
+   */
+  getByTitle(text: string | RegExp, options?: LocatorOptions): Locator
+  /**
+   * Creates a locator capable of finding an element that matches the specified test id attribute. You can configure the attribute name with [`browser.locators.testIdAttribute`](/config/#browser-locators-testidattribute).
+   * @see {@link https://vitest.dev/guide/browser/locators#getbytestid}
+   */
+  getByTestId(text: string | RegExp): Locator
+}
+
+export interface Locator extends LocatorSelectors {
+  /**
+   * Click on an element. You can use the options to set the cursor position.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-click}
+   */
+  click(options?: UserEventClickOptions): Promise<void>
+  /**
+   * Triggers a double click event on an element. You can use the options to set the cursor position.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-dblclick}
+   */
+  dblClick(options?: UserEventDoubleClickOptions): Promise<void>
+  /**
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-tripleclick}
+   */
+  tripleClick(options?: UserEventTripleClickOptions): Promise<void>
+  /**
+   * Clears the input element content
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-clear}
+   */
+  clear(): Promise<void>
+  /**
+   * Moves the cursor position to the selected element
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-hover}
+   */
+  hover(options?: UserEventHoverOptions): Promise<void>
+  /**
+   * This works the same as `locator.hover`, but moves the cursor to the `document.body` element instead.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-unhover}
+   */
+  unhover(options?: UserEventHoverOptions): Promise<void>
+  /**
+   * Sets the value of the current `input`, `textarea` or `conteneditable` element.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-fill}
+   */
+  fill(text: string, options?: UserEventFillOptions): Promise<void>
+  /**
+   * Drags the current element to the target location.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-dropto}
+   */
+  dropTo(target: Locator, options?: UserEventDragAndDropOptions): Promise<void>
+  /**
+   * Choose one or more values from a `<select>` element.
+   * @see {@link https://vitest.dev/guide/browser/interactivity-api#userevent-selectoptions}
+   */
+  selectOptions(
+    values: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[],
+    options?: UserEventSelectOptions,
+  ): Promise<void>
+
+  /**
+   * Make a screenshot of an element matching the locator.
+   * @see {@link https://vitest.dev/guide/browser/locators#screenshot}
+   */
+  screenshot(options: Omit<LocatorScreenshotOptions, 'base64'> & { base64: true }): Promise<{
+    path: string
+    base64: string
+  }>
+  screenshot(options?: LocatorScreenshotOptions): Promise<string>
+
+  /**
+   * Returns an element matching the selector.
+   *
+   * - If multiple elements match the selector, an error is thrown.
+   * - If no elements match the selector, an error is thrown.
+   *
+   * @see {@link https://vitest.dev/guide/browser/locators#element}
+   */
+  element(): Element
+  /**
+   * Returns an array of elements matching the selector.
+   *
+   * If no elements match the selector, an empty array is returned.
+   *
+   * @see {@link https://vitest.dev/guide/browser/locators#elements}
+   */
+  elements(): Element[]
+  /**
+   * Returns an element matching the selector.
+   *
+   * - If multiple elements match the selector, an error is thrown.
+   * - If no elements match the selector, returns `null`.
+   *
+   * @see {@link https://vitest.dev/guide/browser/locators#query}
+   */
+  query(): Element | null
+  /**
+   * Wraps an array of `.elements()` matching the selector in a new `Locator`.
+   *
+   * @see {@link https://vitest.dev/guide/browser/locators#all}
+   */
+  all(): Locator[]
+}
+
 export interface UserEventTabOptions {
   shift?: boolean
 }
@@ -253,7 +448,7 @@ export const userEvent: UserEvent
  */
 export const commands: BrowserCommands
 
-export interface BrowserPage {
+export interface BrowserPage extends LocatorSelectors {
   /**
    * Change the size of iframe's viewport.
    */
@@ -267,6 +462,15 @@ export interface BrowserPage {
     base64: string
   }>
   screenshot(options?: ScreenshotOptions): Promise<string>
+  /**
+   * Extend default `page` object with custom methods.
+   */
+  extend(methods: Partial<BrowserPage>): BrowserPage
+  /**
+   * Wrap an HTML element in a `Locator`. When querying for elements, the search will always return this element.
+   * @see {@link https://vitest.dev/guide/browser/locators}
+   */
+  elementLocator(element: Element): Locator
 }
 
 export const page: BrowserPage
diff --git a/packages/browser/jest-dom.d.ts b/packages/browser/jest-dom.d.ts
index 9c75da5eef7f..43cf623241bf 100644
--- a/packages/browser/jest-dom.d.ts
+++ b/packages/browser/jest-dom.d.ts
@@ -1,102 +1,6 @@
 // Disable automatic exports.
 
-
-type ARIAWidgetRole =
-    | "button"
-    | "checkbox"
-    | "gridcell"
-    | "link"
-    | "menuitem"
-    | "menuitemcheckbox"
-    | "menuitemradio"
-    | "option"
-    | "progressbar"
-    | "radio"
-    | "scrollbar"
-    | "searchbox"
-    | "slider"
-    | "spinbutton"
-    | "switch"
-    | "tab"
-    | "tabpanel"
-    | "textbox"
-    | "treeitem";
-
-type ARIACompositeWidgetRole =
-    | "combobox"
-    | "grid"
-    | "listbox"
-    | "menu"
-    | "menubar"
-    | "radiogroup"
-    | "tablist"
-    | "tree"
-    | "treegrid";
-
-type ARIADocumentStructureRole =
-    | "application"
-    | "article"
-    | "blockquote"
-    | "caption"
-    | "cell"
-    | "columnheader"
-    | "definition"
-    | "deletion"
-    | "directory"
-    | "document"
-    | "emphasis"
-    | "feed"
-    | "figure"
-    | "generic"
-    | "group"
-    | "heading"
-    | "img"
-    | "insertion"
-    | "list"
-    | "listitem"
-    | "math"
-    | "meter"
-    | "none"
-    | "note"
-    | "paragraph"
-    | "presentation"
-    | "row"
-    | "rowgroup"
-    | "rowheader"
-    | "separator"
-    | "strong"
-    | "subscript"
-    | "superscript"
-    | "table"
-    | "term"
-    | "time"
-    | "toolbar"
-    | "tooltip";
-
-type ARIALandmarkRole =
-    | "banner"
-    | "complementary"
-    | "contentinfo"
-    | "form"
-    | "main"
-    | "navigation"
-    | "region"
-    | "search";
-
-type ARIALiveRegionRole = "alert" | "log" | "marquee" | "status" | "timer";
-
-type ARIAWindowRole = "alertdialog" | "dialog";
-
-type ARIAUncategorizedRole = "code";
-
-type ARIARole =
-    | ARIAWidgetRole
-    | ARIACompositeWidgetRole
-    | ARIADocumentStructureRole
-    | ARIALandmarkRole
-    | ARIALiveRegionRole
-    | ARIAWindowRole
-    | ARIAUncategorizedRole;
+import { ARIARole } from './aria-role.ts'
 
 declare namespace matchers {
   interface TestingLibraryMatchers<E, R> {
diff --git a/packages/browser/matchers.d.ts b/packages/browser/matchers.d.ts
index 521383b869f0..32032072547e 100644
--- a/packages/browser/matchers.d.ts
+++ b/packages/browser/matchers.d.ts
@@ -1,3 +1,4 @@
+import type { Locator } from '@vitest/browser/context'
 import type jsdomMatchers from './jest-dom.js'
 import type { Assertion } from 'vitest'
 
@@ -15,7 +16,7 @@ declare module 'vitest' {
   type PromisifyDomAssertion<T> = Promisify<Assertion<T>>
 
   interface ExpectStatic {
-    element: <T extends Element>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<T>>
+    element: <T extends Element | Locator>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<Element>>
   }
 }
 
diff --git a/packages/browser/package.json b/packages/browser/package.json
index 45e13c3ecf1c..a43aa0686ffe 100644
--- a/packages/browser/package.json
+++ b/packages/browser/package.json
@@ -40,6 +40,10 @@
     "./providers/playwright": {
       "types": "./providers/playwright.d.ts"
     },
+    "./locator": {
+      "types": "./dist/locators/index.d.ts",
+      "default": "./dist/locators/index.js"
+    },
     "./*": "./*"
   },
   "main": "./dist/index.js",
@@ -93,6 +97,7 @@
     "@wdio/protocols": "^8.38.0",
     "birpc": "0.2.17",
     "flatted": "^3.3.1",
+    "ivya": "^1.1.0",
     "pathe": "^1.1.2",
     "periscopic": "^4.0.2",
     "playwright": "^1.45.3",
diff --git a/packages/browser/providers/playwright.d.ts b/packages/browser/providers/playwright.d.ts
index 381ce37beabd..f98cee599724 100644
--- a/packages/browser/providers/playwright.d.ts
+++ b/packages/browser/providers/playwright.d.ts
@@ -39,9 +39,10 @@ declare module '@vitest/browser/context' {
   export interface UserEventHoverOptions extends PWHoverOptions {}
   export interface UserEventClickOptions extends PWClickOptions {}
   export interface UserEventDoubleClickOptions extends PWDoubleClickOptions {}
+  export interface UserEventTripleClickOptions extends PWClickOptions {}
   export interface UserEventFillOptions extends PWFillOptions {}
   export interface UserEventSelectOptions extends PWSelectOptions {}
-  export interface UserEventDragOptions extends UserEventDragAndDropOptions {}
+  export interface UserEventDragAndDropOptions extends PWDragAndDropOptions {}
 
   export interface ScreenshotOptions extends PWScreenshotOptions {}
 
diff --git a/packages/browser/rollup.config.js b/packages/browser/rollup.config.js
index f846fb865e0b..dde7cfce2ed8 100644
--- a/packages/browser/rollup.config.js
+++ b/packages/browser/rollup.config.js
@@ -60,6 +60,20 @@ export default () =>
         ...plugins,
       ],
     },
+    {
+      input: {
+        'locators/playwright': './src/client/tester/locators/playwright.ts',
+        'locators/webdriverio': './src/client/tester/locators/webdriverio.ts',
+        'locators/preview': './src/client/tester/locators/preview.ts',
+        'locators/index': './src/client/tester/locators/index.ts',
+      },
+      output: {
+        dir: 'dist',
+        format: 'esm',
+      },
+      external,
+      plugins,
+    },
     {
       input: './src/client/tester/context.ts',
       output: {
@@ -115,16 +129,29 @@ export default () =>
       ],
     },
     {
-      input: './src/client/tester/jest-dom.ts',
+      input: './src/client/tester/locators/index.ts',
       output: {
-        file: './jest-dom.d.ts',
+        file: 'dist/locators/index.d.ts',
         format: 'esm',
       },
-      external: [],
+      external,
       plugins: [
         dts({
           respectExternal: true,
         }),
       ],
     },
+    // {
+    //   input: './src/client/tester/jest-dom.ts',
+    //   output: {
+    //     file: './jest-dom.d.ts',
+    //     format: 'esm',
+    //   },
+    //   external: [],
+    //   plugins: [
+    //     dts({
+    //       respectExternal: true,
+    //     }),
+    //   ],
+    // },
   ])
diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts
index 101e4748ab57..3ba8c020b7f6 100644
--- a/packages/browser/src/client/tester/context.ts
+++ b/packages/browser/src/client/tester/context.ts
@@ -1,119 +1,33 @@
-import type { Task, WorkerGlobalState } from 'vitest'
+import type { RunnerTask } from 'vitest'
 import type { BrowserRPC } from '@vitest/browser/client'
-import type { BrowserPage, UserEvent, UserEventClickOptions, UserEventDragAndDropOptions, UserEventHoverOptions, UserEventTabOptions, UserEventTypeOptions } from '../../../context'
-import type { BrowserRunnerState } from '../utils'
-
-// this file should not import anything directly, only types
-
-// @ts-expect-error not typed global
-const state = (): WorkerGlobalState => __vitest_worker__
+import type {
+  BrowserPage,
+  Locator,
+  UserEvent,
+  UserEventClickOptions,
+  UserEventDragAndDropOptions,
+  UserEventHoverOptions,
+  UserEventTabOptions,
+  UserEventTypeOptions,
+} from '../../../context'
+import { convertElementToCssSelector, getBrowserState, getWorkerState } from '../utils'
+
+// this file should not import anything directly, only types and utils
+
+const state = () => getWorkerState()
 // @ts-expect-error not typed global
-const runner = (): BrowserRunnerState => __vitest_browser_runner__
+const provider = __vitest_browser_runner__.provider
 function filepath() {
-  return state().filepath || state().current?.file?.filepath || undefined
+  return getWorkerState().filepath || getWorkerState().current?.file?.filepath || undefined
 }
-const rpc = () => state().rpc as any as BrowserRPC
-const contextId = runner().contextId
+const rpc = () => getWorkerState().rpc as any as BrowserRPC
+const contextId = getBrowserState().contextId
 const channel = new BroadcastChannel(`vitest:${contextId}`)
 
 function triggerCommand<T>(command: string, ...args: any[]) {
   return rpc().triggerCommand<T>(contextId, command, filepath(), args)
 }
 
-const provider = runner().provider
-
-function convertElementToCssSelector(element: Element) {
-  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 `${provider === 'webdriverio' && hasShadowRoot ? '>>>' : ''}${path.reverse().join(' > ')}`
-}
-
-function getParent(el: Element) {
-  const parent = el.parentNode
-  if (parent instanceof ShadowRoot) {
-    return parent.host
-  }
-  return parent
-}
-
 function createUserEvent(): UserEvent {
   const keyboard = {
     unreleased: [] as string[],
@@ -123,38 +37,30 @@ function createUserEvent(): UserEvent {
     setup() {
       return createUserEvent()
     },
-    click(element: Element, options: UserEventClickOptions = {}) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_click', css, processClickOptions(options))
+    click(element: Element | Locator, options: UserEventClickOptions = {}) {
+      return convertToLocator(element).click(processClickOptions(options))
     },
-    dblClick(element: Element, options: UserEventClickOptions = {}) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_dblClick', css, processClickOptions(options))
+    dblClick(element: Element | Locator, options: UserEventClickOptions = {}) {
+      return convertToLocator(element).dblClick(processClickOptions(options))
     },
-    tripleClick(element: Element, options: UserEventClickOptions = {}) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_tripleClick', css, processClickOptions(options))
+    tripleClick(element: Element | Locator, options: UserEventClickOptions = {}) {
+      return convertToLocator(element).tripleClick(processClickOptions(options))
     },
     selectOptions(element, value) {
-      const values = provider === 'webdriverio'
-        ? getWebdriverioSelectOptions(element, value)
-        : getSimpleSelectOptions(element, value)
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_selectOptions', css, values)
+      return convertToLocator(element).selectOptions(value)
     },
-    async type(element: Element, text: string, options: UserEventTypeOptions = {}) {
-      const css = convertElementToCssSelector(element)
+    async type(element: Element | Locator, text: string, options: UserEventTypeOptions = {}) {
+      const selector = convertToSelector(element)
       const { unreleased } = await triggerCommand<{ unreleased: string[] }>(
         '__vitest_type',
-        css,
+        selector,
         text,
         { ...options, unreleased: keyboard.unreleased },
       )
       keyboard.unreleased = unreleased
     },
-    clear(element: Element) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_clear', css)
+    clear(element: Element | Locator) {
+      return convertToLocator(element).clear()
     },
     tab(options: UserEventTabOptions = {}) {
       return triggerCommand('__vitest_tab', options)
@@ -167,92 +73,35 @@ function createUserEvent(): UserEvent {
       )
       keyboard.unreleased = unreleased
     },
-    hover(element: Element, options: UserEventHoverOptions = {}) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_hover', css, processHoverOptions(options))
+    hover(element: Element | Locator, options: UserEventHoverOptions = {}) {
+      return convertToLocator(element).hover(processHoverOptions(options))
     },
-    unhover(element: Element, options: UserEventHoverOptions = {}) {
-      const css = convertElementToCssSelector(element.ownerDocument.body)
-      return triggerCommand('__vitest_hover', css, options)
+    unhover(element: Element | Locator, options: UserEventHoverOptions = {}) {
+      return convertToLocator(element).unhover(options)
     },
 
     // non userEvent events, but still useful
-    fill(element: Element, text: string, options) {
-      const css = convertElementToCssSelector(element)
-      return triggerCommand('__vitest_fill', css, text, options)
+    fill(element: Element | Locator, text: string, options) {
+      return convertToLocator(element).fill(text, options)
     },
-    dragAndDrop(source: Element, target: Element, options = {}) {
-      const sourceCss = convertElementToCssSelector(source)
-      const targetCss = convertElementToCssSelector(target)
-      return triggerCommand(
-        '__vitest_dragAndDrop',
-        sourceCss,
-        targetCss,
-        processDragAndDropOptions(options),
-      )
+    dragAndDrop(source: Element | Locator, target: Element | Locator, options = {}) {
+      const sourceLocator = convertToLocator(source)
+      const targetLocator = convertToLocator(target)
+      return sourceLocator.dropTo(targetLocator, processDragAndDropOptions(options))
     },
   }
 }
 
-export const userEvent: UserEvent = createUserEvent()
-
-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 ${convertElementToCssSelector(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: convertElementToCssSelector(v) }
-    }
-    return v
-  })
-}
+export const userEvent = createUserEvent()
 
 export function cdp() {
-  return runner().cdp!
+  return getBrowserState().cdp!
 }
 
 const screenshotIds: Record<string, Record<string, string>> = {}
 export const page: BrowserPage = {
   viewport(width, height) {
-    const id = runner().iframeId
+    const id = getBrowserState().iframeId
     channel.postMessage({ type: 'viewport', width, height, id })
     return new Promise((resolve, reject) => {
       channel.addEventListener('message', function handler(e) {
@@ -268,7 +117,7 @@ export const page: BrowserPage = {
     })
   },
   async screenshot(options = {}) {
-    const currentTest = state().current
+    const currentTest = getWorkerState().current
     if (!currentTest) {
       throw new Error('Cannot take a screenshot outside of a test.')
     }
@@ -294,13 +143,63 @@ export const page: BrowserPage = {
     return triggerCommand('__vitest_screenshot', name, {
       ...options,
       element: options.element
-        ? convertElementToCssSelector(options.element)
+        ? convertToSelector(options.element)
         : undefined,
     })
   },
+  getByRole() {
+    throw new Error('Method "getByRole" is not implemented in the current provider.')
+  },
+  getByLabelText() {
+    throw new Error('Method "getByLabelText" is not implemented in the current provider.')
+  },
+  getByTestId() {
+    throw new Error('Method "getByTestId" is not implemented in the current provider.')
+  },
+  getByAltText() {
+    throw new Error('Method "getByAltText" is not implemented in the current provider.')
+  },
+  getByPlaceholder() {
+    throw new Error('Method "getByPlaceholder" is not implemented in the current provider.')
+  },
+  getByText() {
+    throw new Error('Method "getByText" is not implemented in the current provider.')
+  },
+  getByTitle() {
+    throw new Error('Method "getByTitle" is not implemented in the current provider.')
+  },
+  elementLocator() {
+    throw new Error('Method "elementLocator" is not implemented in the current provider.')
+  },
+  extend(methods) {
+    for (const key in methods) {
+      (page as any)[key] = (methods as any)[key]
+    }
+    return page
+  },
+}
+
+function convertToLocator(element: Element | Locator): Locator {
+  if (element instanceof Element) {
+    return page.elementLocator(element)
+  }
+  return element
+}
+
+function convertToSelector(elementOrLocator: Element | Locator): string {
+  if (!elementOrLocator) {
+    throw new Error('Expected element or locator to be defined.')
+  }
+  if (elementOrLocator instanceof Element) {
+    return convertElementToCssSelector(elementOrLocator)
+  }
+  if ('selector' in elementOrLocator) {
+    return (elementOrLocator as any).selector
+  }
+  throw new Error('Expected element or locator to be an instance of Element or Locator.')
 }
 
-function getTaskFullName(task: Task): string {
+function getTaskFullName(task: RunnerTask): string {
   return task.suite ? `${getTaskFullName(task.suite)} ${task.name}` : task.name
 }
 
diff --git a/packages/browser/src/client/tester/expect-dom.ts b/packages/browser/src/client/tester/expect-dom.ts
deleted file mode 100644
index 8ed810a4a12c..000000000000
--- a/packages/browser/src/client/tester/expect-dom.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as matchers from '@testing-library/jest-dom/matchers'
-import type { ExpectPollOptions } from 'vitest'
-import { expect } from 'vitest'
-
-export async function setupExpectDom() {
-  expect.extend(matchers)
-  expect.element = <T extends Element>(element: T, options?: ExpectPollOptions) => {
-    return expect.poll(() => element, options)
-  }
-}
diff --git a/packages/browser/src/client/tester/expect-element.ts b/packages/browser/src/client/tester/expect-element.ts
new file mode 100644
index 000000000000..56c73ae26c58
--- /dev/null
+++ b/packages/browser/src/client/tester/expect-element.ts
@@ -0,0 +1,20 @@
+import * as matchers from '@testing-library/jest-dom/matchers'
+import type { Locator } from '@vitest/browser/context'
+import type { ExpectPollOptions } from 'vitest'
+import { expect } from 'vitest'
+
+export async function setupExpectDom() {
+  expect.extend(matchers)
+  expect.element = <T extends Element | Locator>(elementOrLocator: T, options?: ExpectPollOptions) => {
+    if (!(elementOrLocator instanceof Element) && !('element' in elementOrLocator)) {
+      throw new Error(`Invalid element or locator: ${elementOrLocator}. Expected an instance of Element or Locator, received ${typeof elementOrLocator}`)
+    }
+
+    return expect.poll<Element>(() => {
+      if (elementOrLocator instanceof Element) {
+        return elementOrLocator
+      }
+      return elementOrLocator.element()
+    }, options)
+  }
+}
diff --git a/packages/browser/src/client/tester/locators/index.ts b/packages/browser/src/client/tester/locators/index.ts
new file mode 100644
index 000000000000..e2bcf187bb04
--- /dev/null
+++ b/packages/browser/src/client/tester/locators/index.ts
@@ -0,0 +1,197 @@
+import type {
+  LocatorByRoleOptions,
+  LocatorOptions,
+  LocatorScreenshotOptions,
+  UserEventClickOptions,
+  UserEventDragAndDropOptions,
+  UserEventFillOptions,
+  UserEventHoverOptions,
+} from '@vitest/browser/context'
+import { page, server } from '@vitest/browser/context'
+import type { BrowserRPC } from '@vitest/browser/client'
+import {
+  Ivya,
+  type ParsedSelector,
+  asLocator,
+  getByAltTextSelector,
+  getByLabelSelector,
+  getByPlaceholderSelector,
+  getByRoleSelector,
+  getByTestIdSelector,
+  getByTextSelector,
+  getByTitleSelector,
+} from 'ivya'
+import type { WorkerGlobalState } from 'vitest'
+import type { BrowserRunnerState } from '../../utils'
+import { getBrowserState, getWorkerState } from '../../utils'
+
+// we prefer using playwright locators because they are more powerful and support Shadow DOM
+export const selectorEngine = Ivya.create({
+  browser: ((name: string) => {
+    switch (name) {
+      case 'edge':
+      case 'chrome':
+        return 'chromium'
+      case 'safari':
+        return 'webkit'
+      default:
+        return name as 'webkit' | 'firefox' | 'chromium'
+    }
+  })(server.config.browser.name),
+  testIdAttribute: server.config.browser.locators.testIdAttribute,
+})
+
+export abstract class Locator {
+  public abstract selector: string
+
+  private _parsedSelector: ParsedSelector | undefined
+  protected _pwSelector?: string | undefined
+  protected _forceElement?: Element | undefined
+
+  public click(options: UserEventClickOptions = {}): Promise<void> {
+    return this.triggerCommand<void>('__vitest_click', this.selector, options)
+  }
+
+  public dblClick(options: UserEventClickOptions = {}): Promise<void> {
+    return this.triggerCommand<void>('__vitest_dblClick', this.selector, options)
+  }
+
+  public tripleClick(options: UserEventClickOptions = {}): Promise<void> {
+    return this.triggerCommand<void>('__vitest_tripleClick', this.selector, options)
+  }
+
+  public clear(): Promise<void> {
+    return this.triggerCommand<void>('__vitest_clear', this.selector)
+  }
+
+  public hover(options: UserEventHoverOptions): Promise<void> {
+    return this.triggerCommand<void>('__vitest_hover', this.selector, options)
+  }
+
+  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 dropTo(target: Locator, options: UserEventDragAndDropOptions = {}): Promise<void> {
+    return this.triggerCommand<void>(
+      '__vitest_dragAndDrop',
+      this.selector,
+      target.selector,
+      options,
+    )
+  }
+
+  public selectOptions(value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[]): 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)
+  }
+
+  public screenshot(options: Omit<LocatorScreenshotOptions, 'base64'> & { base64: true }): Promise<{
+    path: string
+    base64: string
+  }>
+  public screenshot(options?: LocatorScreenshotOptions): Promise<string>
+  public screenshot(options?: LocatorScreenshotOptions): Promise<string | {
+    path: string
+    base64: string
+  }> {
+    return page.screenshot({
+      ...options,
+      element: this,
+    })
+  }
+
+  protected abstract locator(selector: string): Locator
+  protected abstract elementLocator(element: Element): Locator
+
+  public getByRole(role: string, options?: LocatorByRoleOptions): Locator {
+    return this.locator(getByRoleSelector(role, options))
+  }
+
+  public getByAltText(text: string | RegExp, options?: LocatorOptions): Locator {
+    return this.locator(getByAltTextSelector(text, options))
+  }
+
+  public getByLabelText(text: string | RegExp, options?: LocatorOptions): Locator {
+    return this.locator(getByLabelSelector(text, options))
+  }
+
+  public getByPlaceholder(text: string | RegExp, options?: LocatorOptions): Locator {
+    return this.locator(getByPlaceholderSelector(text, options))
+  }
+
+  public getByTestId(testId: string | RegExp): Locator {
+    return this.locator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId))
+  }
+
+  public getByText(text: string | RegExp, options?: LocatorOptions): Locator {
+    return this.locator(getByTextSelector(text, options))
+  }
+
+  public getByTitle(title: string | RegExp, options?: LocatorOptions): Locator {
+    return this.locator(getByTitleSelector(title, options))
+  }
+
+  public query(): Element | null {
+    if (this._forceElement) {
+      return this._forceElement
+    }
+    const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector))
+    return selectorEngine.querySelector(parsedSelector, document.body, true)
+  }
+
+  public element(): Element {
+    const element = this.query()
+    if (!element) {
+      throw new Error(`element not found: ${asLocator('javascript', this._pwSelector || this.selector)}`)
+    }
+    return element
+  }
+
+  public elements(): Element[] {
+    if (this._forceElement) {
+      return [this._forceElement]
+    }
+    const parsedSelector = this._parsedSelector || (this._parsedSelector = selectorEngine.parseSelector(this._pwSelector || this.selector))
+    return selectorEngine.querySelectorAll(parsedSelector, document.body)
+  }
+
+  public all(): Locator[] {
+    return this.elements().map(element => this.elementLocator(element))
+  }
+
+  private get state(): BrowserRunnerState {
+    return getBrowserState()
+  }
+
+  private get worker(): WorkerGlobalState {
+    return getWorkerState()
+  }
+
+  private get rpc(): BrowserRPC {
+    return this.worker.rpc as any as BrowserRPC
+  }
+
+  protected triggerCommand<T>(command: string, ...args: any[]) {
+    const filepath = this.worker.filepath
+      || this.worker.current?.file?.filepath
+      || undefined
+
+    return this.rpc.triggerCommand<T>(
+      this.state.contextId,
+      command,
+      filepath,
+      args,
+    )
+  }
+}
diff --git a/packages/browser/src/client/tester/locators/playwright.ts b/packages/browser/src/client/tester/locators/playwright.ts
new file mode 100644
index 000000000000..750f8552dd2a
--- /dev/null
+++ b/packages/browser/src/client/tester/locators/playwright.ts
@@ -0,0 +1,53 @@
+import { page, server } from '@vitest/browser/context'
+import {
+  getByAltTextSelector,
+  getByLabelSelector,
+  getByPlaceholderSelector,
+  getByRoleSelector,
+  getByTestIdSelector,
+  getByTextSelector,
+  getByTitleSelector,
+} from 'ivya'
+import { Locator, selectorEngine } from './index'
+
+page.extend({
+  getByLabelText(text, options) {
+    return new PlaywrightLocator(getByLabelSelector(text, options))
+  },
+  getByRole(role, options) {
+    return new PlaywrightLocator(getByRoleSelector(role, options))
+  },
+  getByTestId(testId) {
+    return new PlaywrightLocator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId))
+  },
+  getByAltText(text, options) {
+    return new PlaywrightLocator(getByAltTextSelector(text, options))
+  },
+  getByPlaceholder(text, options) {
+    return new PlaywrightLocator(getByPlaceholderSelector(text, options))
+  },
+  getByText(text, options) {
+    return new PlaywrightLocator(getByTextSelector(text, options))
+  },
+  getByTitle(title, options) {
+    return new PlaywrightLocator(getByTitleSelector(title, options))
+  },
+
+  elementLocator(element: Element) {
+    return new PlaywrightLocator(selectorEngine.generateSelectorSimple(element), element)
+  },
+})
+
+class PlaywrightLocator extends Locator {
+  constructor(public selector: string, protected _forceElement?: Element) {
+    super()
+  }
+
+  protected locator(selector: string) {
+    return new PlaywrightLocator(`${this.selector} >> ${selector}`)
+  }
+
+  protected elementLocator(element: Element) {
+    return new PlaywrightLocator(selectorEngine.generateSelectorSimple(element), element)
+  }
+}
diff --git a/packages/browser/src/client/tester/locators/preview.ts b/packages/browser/src/client/tester/locators/preview.ts
new file mode 100644
index 000000000000..fac183581e1a
--- /dev/null
+++ b/packages/browser/src/client/tester/locators/preview.ts
@@ -0,0 +1,109 @@
+import { page, server } from '@vitest/browser/context'
+import { userEvent } from '@testing-library/user-event'
+import {
+  getByAltTextSelector,
+  getByLabelSelector,
+  getByPlaceholderSelector,
+  getByRoleSelector,
+  getByTestIdSelector,
+  getByTextSelector,
+  getByTitleSelector,
+} from 'ivya'
+import { convertElementToCssSelector } from '../../utils'
+import { Locator, selectorEngine } from './index'
+
+page.extend({
+  getByLabelText(text, options) {
+    return new PreviewLocator(getByLabelSelector(text, options))
+  },
+  getByRole(role, options) {
+    return new PreviewLocator(getByRoleSelector(role, options))
+  },
+  getByTestId(testId) {
+    return new PreviewLocator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId))
+  },
+  getByAltText(text, options) {
+    return new PreviewLocator(getByAltTextSelector(text, options))
+  },
+  getByPlaceholder(text, options) {
+    return new PreviewLocator(getByPlaceholderSelector(text, options))
+  },
+  getByText(text, options) {
+    return new PreviewLocator(getByTextSelector(text, options))
+  },
+  getByTitle(title, options) {
+    return new PreviewLocator(getByTitleSelector(title, options))
+  },
+
+  elementLocator(element: Element) {
+    return new PreviewLocator(selectorEngine.generateSelectorSimple(element), element)
+  },
+})
+
+class PreviewLocator extends Locator {
+  constructor(protected _pwSelector: string, protected _forceElement?: Element) {
+    super()
+  }
+
+  override get selector() {
+    const selectors = this.elements().map(element => convertElementToCssSelector(element))
+    if (!selectors.length) {
+      throw new Error(`element not found: ${this._pwSelector}`)
+    }
+    return selectors.join(', ')
+  }
+
+  click(): Promise<void> {
+    return userEvent.click(this.element())
+  }
+
+  dblClick(): Promise<void> {
+    return userEvent.dblClick(this.element())
+  }
+
+  tripleClick(): Promise<void> {
+    return userEvent.tripleClick(this.element())
+  }
+
+  hover(): Promise<void> {
+    return userEvent.hover(this.element())
+  }
+
+  unhover(): Promise<void> {
+    return userEvent.unhover(this.element())
+  }
+
+  fill(text: string): Promise<void> {
+    return userEvent.type(this.element(), text)
+  }
+
+  selectOptions(options_: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise<void> {
+    const options = (Array.isArray(options_) ? options_ : [options_]).map((option) => {
+      if (typeof option !== 'string' && 'element' in option) {
+        return option.element() as HTMLElement
+      }
+      return option
+    })
+    return userEvent.selectOptions(this.element(), options as string[] | HTMLElement[])
+  }
+
+  async dropTo(): Promise<void> {
+    throw new Error('The "preview" provider doesn\'t support `dropTo` method.')
+  }
+
+  clear(): Promise<void> {
+    return userEvent.clear(this.element())
+  }
+
+  async screenshot(): Promise<never> {
+    throw new Error('The "preview" provider doesn\'t support `screenshot` method.')
+  }
+
+  protected locator(selector: string) {
+    return new PreviewLocator(`${this._pwSelector} >> ${selector}`)
+  }
+
+  protected elementLocator(element: Element) {
+    return new PreviewLocator(selectorEngine.generateSelectorSimple(element), element)
+  }
+}
diff --git a/packages/browser/src/client/tester/locators/webdriverio.ts b/packages/browser/src/client/tester/locators/webdriverio.ts
new file mode 100644
index 000000000000..6e37200f0a56
--- /dev/null
+++ b/packages/browser/src/client/tester/locators/webdriverio.ts
@@ -0,0 +1,108 @@
+import { page, server } from '@vitest/browser/context'
+import {
+  getByAltTextSelector,
+  getByLabelSelector,
+  getByPlaceholderSelector,
+  getByRoleSelector,
+  getByTestIdSelector,
+  getByTextSelector,
+  getByTitleSelector,
+} from 'ivya'
+import { convertElementToCssSelector } from '../../utils'
+import { Locator, selectorEngine } from './index'
+
+page.extend({
+  getByLabelText(text, options) {
+    return new WebdriverIOLocator(getByLabelSelector(text, options))
+  },
+  getByRole(role, options) {
+    return new WebdriverIOLocator(getByRoleSelector(role, options))
+  },
+  getByTestId(testId) {
+    return new WebdriverIOLocator(getByTestIdSelector(server.config.browser.locators.testIdAttribute, testId))
+  },
+  getByAltText(text, options) {
+    return new WebdriverIOLocator(getByAltTextSelector(text, options))
+  },
+  getByPlaceholder(text, options) {
+    return new WebdriverIOLocator(getByPlaceholderSelector(text, options))
+  },
+  getByText(text, options) {
+    return new WebdriverIOLocator(getByTextSelector(text, options))
+  },
+  getByTitle(title, options) {
+    return new WebdriverIOLocator(getByTitleSelector(title, options))
+  },
+
+  elementLocator(element: Element) {
+    return new WebdriverIOLocator(selectorEngine.generateSelectorSimple(element), element)
+  },
+})
+
+class WebdriverIOLocator extends Locator {
+  constructor(protected _pwSelector: string, protected _forceElement?: Element) {
+    super()
+  }
+
+  override get selector() {
+    const selectors = this.elements().map(element => convertElementToCssSelector(element))
+    if (!selectors.length) {
+      throw new Error(`element not found: ${this._pwSelector}`)
+    }
+    return selectors.join(', ')
+  }
+
+  public selectOptions(value: HTMLElement | HTMLElement[] | Locator | Locator[] | string | string[]): Promise<void> {
+    const values = getWebdriverioSelectOptions(this.element(), value)
+    return this.triggerCommand('__vitest_selectOptions', this.selector, values)
+  }
+
+  protected locator(selector: string) {
+    return new WebdriverIOLocator(`${this._pwSelector} >> ${selector}`)
+  }
+
+  protected elementLocator(element: Element) {
+    return new WebdriverIOLocator(selectorEngine.generateSelectorSimple(element), element)
+  }
+}
+
+function getWebdriverioSelectOptions(element: Element, value: string | string[] | HTMLElement[] | HTMLElement | Locator | Locator[]) {
+  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 element = ('element' in optionValue ? optionValue.element() : optionValue) as HTMLOptionElement
+    const index = options.indexOf(element)
+    if (index === -1) {
+      throw new Error(`The element ${selectorEngine.previewNode(element)} 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 }]
+}
diff --git a/packages/browser/src/client/tester/mocker.ts b/packages/browser/src/client/tester/mocker.ts
index b5f95f4c3657..63d9e706e993 100644
--- a/packages/browser/src/client/tester/mocker.ts
+++ b/packages/browser/src/client/tester/mocker.ts
@@ -389,7 +389,7 @@ class RefTracker {
 
 type Key = string | symbol
 
-export function getAllMockableProperties(obj: any, isModule: boolean) {
+function getAllMockableProperties(obj: any, isModule: boolean) {
   const allProps = new Map<
     string | symbol,
     { key: string | symbol; descriptor: PropertyDescriptor }
diff --git a/packages/browser/src/client/tester/tester.html b/packages/browser/src/client/tester/tester.html
index b061630059c4..f437c975d506 100644
--- a/packages/browser/src/client/tester/tester.html
+++ b/packages/browser/src/client/tester/tester.html
@@ -18,7 +18,7 @@
     </style>
     {__VITEST_INJECTOR__}
     <script>{__VITEST_STATE__}</script>
-    {__VITEST_ERROR_CATCHER__}
+    {__VITEST_INTERNAL_SCRIPTS__}
     {__VITEST_SCRIPTS__}
   </head>
   <body data-vitest-body>
diff --git a/packages/browser/src/client/tester/tester.ts b/packages/browser/src/client/tester/tester.ts
index 5d8bb1ded675..cb100a2bb71f 100644
--- a/packages/browser/src/client/tester/tester.ts
+++ b/packages/browser/src/client/tester/tester.ts
@@ -6,7 +6,7 @@ import { setupConsoleLogSpy } from './logger'
 import { createSafeRpc } from './rpc'
 import { browserHashMap, initiateRunner } from './runner'
 import { VitestBrowserClientMocker } from './mocker'
-import { setupExpectDom } from './expect-dom'
+import { setupExpectDom } from './expect-element'
 
 const url = new URL(location.href)
 const reloadStart = url.searchParams.get('__reloadStart')
diff --git a/packages/browser/src/client/utils.ts b/packages/browser/src/client/utils.ts
index 01480e6620c4..2a328813fabe 100644
--- a/packages/browser/src/client/utils.ts
+++ b/packages/browser/src/client/utils.ts
@@ -55,3 +55,96 @@ export function getWorkerState(): WorkerGlobalState {
   }
   return state
 }
+
+/* @__NO_SIDE_EFFECTS__ */
+export function convertElementToCssSelector(element: Element) {
+  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
+}
diff --git a/packages/browser/src/node/commands/clear.ts b/packages/browser/src/node/commands/clear.ts
index a06f3b4a3f4a..30318b0c460a 100644
--- a/packages/browser/src/node/commands/clear.ts
+++ b/packages/browser/src/node/commands/clear.ts
@@ -9,7 +9,7 @@ export const clear: UserEventCommand<UserEvent['clear']> = async (
 ) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context
-    const element = iframe.locator(`css=${selector}`)
+    const element = iframe.locator(selector)
     await element.clear({
       timeout: 1000,
     })
diff --git a/packages/browser/src/node/commands/click.ts b/packages/browser/src/node/commands/click.ts
index b939513bdc2e..627b155140e8 100644
--- a/packages/browser/src/node/commands/click.ts
+++ b/packages/browser/src/node/commands/click.ts
@@ -11,7 +11,7 @@ export const click: UserEventCommand<UserEvent['click']> = async (
   const provider = context.provider
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe
-    await tester.locator(`css=${selector}`).click({
+    await tester.locator(selector).click({
       timeout: 1000,
       ...options,
     })
@@ -33,7 +33,7 @@ export const dblClick: UserEventCommand<UserEvent['dblClick']> = async (
   const provider = context.provider
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe
-    await tester.locator(`css=${selector}`).dblclick(options)
+    await tester.locator(selector).dblclick(options)
   }
   else if (provider instanceof WebdriverBrowserProvider) {
     const browser = context.browser
@@ -52,7 +52,7 @@ export const tripleClick: UserEventCommand<UserEvent['tripleClick']> = async (
   const provider = context.provider
   if (provider instanceof PlaywrightBrowserProvider) {
     const tester = context.iframe
-    await tester.locator(`css=${selector}`).click({
+    await tester.locator(selector).click({
       timeout: 1000,
       ...options,
       clickCount: 3,
diff --git a/packages/browser/src/node/commands/dragAndDrop.ts b/packages/browser/src/node/commands/dragAndDrop.ts
index 4db6be5bf8d6..b1e21245db21 100644
--- a/packages/browser/src/node/commands/dragAndDrop.ts
+++ b/packages/browser/src/node/commands/dragAndDrop.ts
@@ -12,8 +12,8 @@ export const dragAndDrop: UserEventCommand<UserEvent['dragAndDrop']> = async (
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const frame = await context.frame()
     await frame.dragAndDrop(
-      `css=${source}`,
-      `css=${target}`,
+      source,
+      target,
       {
         timeout: 1000,
         ...options_,
diff --git a/packages/browser/src/node/commands/fill.ts b/packages/browser/src/node/commands/fill.ts
index 11468afdb963..62aae793fff0 100644
--- a/packages/browser/src/node/commands/fill.ts
+++ b/packages/browser/src/node/commands/fill.ts
@@ -11,7 +11,7 @@ export const fill: UserEventCommand<UserEvent['fill']> = async (
 ) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context
-    const element = iframe.locator(`css=${selector}`)
+    const element = iframe.locator(selector)
     await element.fill(text, { timeout: 1000, ...options })
   }
   else if (context.provider instanceof WebdriverBrowserProvider) {
diff --git a/packages/browser/src/node/commands/hover.ts b/packages/browser/src/node/commands/hover.ts
index fa82faa435e1..99c9d0048077 100644
--- a/packages/browser/src/node/commands/hover.ts
+++ b/packages/browser/src/node/commands/hover.ts
@@ -9,7 +9,7 @@ export const hover: UserEventCommand<UserEvent['hover']> = async (
   options = {},
 ) => {
   if (context.provider instanceof PlaywrightBrowserProvider) {
-    await context.iframe.locator(`css=${selector}`).hover({
+    await context.iframe.locator(selector).hover({
       timeout: 1000,
       ...options,
     })
diff --git a/packages/browser/src/node/commands/screenshot.ts b/packages/browser/src/node/commands/screenshot.ts
index 6426a5650689..1790bd6a448a 100644
--- a/packages/browser/src/node/commands/screenshot.ts
+++ b/packages/browser/src/node/commands/screenshot.ts
@@ -6,7 +6,6 @@ import type { ScreenshotOptions } from '../../../context'
 import { PlaywrightBrowserProvider } from '../providers/playwright'
 import { WebdriverBrowserProvider } from '../providers/webdriver'
 
-// TODO: expose provider specific options in types
 export const screenshot: BrowserCommand<[string, ScreenshotOptions]> = async (
   context,
   name: string,
@@ -16,18 +15,20 @@ export const screenshot: BrowserCommand<[string, ScreenshotOptions]> = async (
     throw new Error(`Cannot take a screenshot without a test path`)
   }
 
-  const path = resolveScreenshotPath(
-    context.testPath,
-    name,
-    context.project.config,
-  )
+  const path = options.path
+    ? resolve(context.testPath, options.path)
+    : resolveScreenshotPath(
+      context.testPath,
+      name,
+      context.project.config,
+    )
   const savePath = normalize(path)
   await mkdir(dirname(path), { recursive: true })
 
   if (context.provider instanceof PlaywrightBrowserProvider) {
     if (options.element) {
-      const { element: css, ...config } = options
-      const element = context.iframe.locator(`css=${css}`)
+      const { element: selector, ...config } = options
+      const element = context.iframe.locator(`${selector}`)
       const buffer = await element.screenshot({
         timeout: 1000,
         ...config,
diff --git a/packages/browser/src/node/commands/select.ts b/packages/browser/src/node/commands/select.ts
index 93607197961f..13c1151e1996 100644
--- a/packages/browser/src/node/commands/select.ts
+++ b/packages/browser/src/node/commands/select.ts
@@ -13,13 +13,13 @@ export const selectOptions: UserEventCommand<UserEvent['selectOptions']> = async
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const value = userValues as any as (string | { element: string })[]
     const { iframe } = context
-    const selectElement = iframe.locator(`css=${selector}`)
+    const selectElement = iframe.locator(selector)
 
     const values = await Promise.all(value.map(async (v) => {
       if (typeof v === 'string') {
         return v
       }
-      const elementHandler = await iframe.locator(`css=${v.element}`).elementHandle()
+      const elementHandler = await iframe.locator(v.element).elementHandle()
       if (!elementHandler) {
         throw new Error(`Element not found: ${v.element}`)
       }
diff --git a/packages/browser/src/node/commands/type.ts b/packages/browser/src/node/commands/type.ts
index c211d1e6a697..814647310e26 100644
--- a/packages/browser/src/node/commands/type.ts
+++ b/packages/browser/src/node/commands/type.ts
@@ -15,7 +15,7 @@ export const type: UserEventCommand<UserEvent['type']> = async (
 
   if (context.provider instanceof PlaywrightBrowserProvider) {
     const { iframe } = context
-    const element = iframe.locator(`css=${selector}`)
+    const element = iframe.locator(selector)
 
     if (!skipClick) {
       await element.focus()
diff --git a/packages/browser/src/node/commands/utils.ts b/packages/browser/src/node/commands/utils.ts
index c95a31b8e300..454171f68b1d 100644
--- a/packages/browser/src/node/commands/utils.ts
+++ b/packages/browser/src/node/commands/utils.ts
@@ -1,10 +1,11 @@
+import type { Locator } from '@vitest/browser/context'
 import type { BrowserCommand } from 'vitest/node'
 
 export type UserEventCommand<T extends (...args: any) => any> = BrowserCommand<
   ConvertUserEventParameters<Parameters<T>>
 >
 
-type ConvertElementToLocator<T> = T extends Element ? string : T
+type ConvertElementToLocator<T> = T extends Element | Locator ? string : T
 type ConvertUserEventParameters<T extends unknown[]> = {
   [K in keyof T]: ConvertElementToLocator<T[K]>;
 }
diff --git a/packages/browser/src/node/server.ts b/packages/browser/src/node/server.ts
index ef959fc78de3..2d115cd587df 100644
--- a/packages/browser/src/node/server.ts
+++ b/packages/browser/src/node/server.ts
@@ -28,7 +28,8 @@ export class BrowserServer implements IBrowserServer {
   public testerHtml: Promise<string> | string
   public orchestratorHtml: Promise<string> | string
   public injectorJs: Promise<string> | string
-  public errorCatcherPath: Promise<string> | string
+  public errorCatcherUrl: string
+  public locatorsUrl: string | undefined
   public stateJs: Promise<string> | string
 
   public state: BrowserServerState
@@ -87,7 +88,13 @@ export class BrowserServer implements IBrowserServer {
       resolve(distRoot, 'client/esm-client-injector.js'),
       'utf8',
     ).then(js => (this.injectorJs = js))
-    this.errorCatcherPath = join('/@fs/', resolve(distRoot, 'client/error-catcher.js'))
+    this.errorCatcherUrl = join('/@fs/', resolve(distRoot, 'client/error-catcher.js'))
+
+    const builtinProviders = ['playwright', 'webdriverio', 'preview']
+    const providerName = project.config.browser.provider || 'preview'
+    if (builtinProviders.includes(providerName)) {
+      this.locatorsUrl = join('/@fs/', distRoot, 'locators', `${providerName}.js`)
+    }
     this.stateJs = readFile(
       resolve(distRoot, 'state.js'),
       'utf-8',
diff --git a/packages/browser/src/node/serverOrchestrator.ts b/packages/browser/src/node/serverOrchestrator.ts
index cad63b0c591d..60d39b1e04d6 100644
--- a/packages/browser/src/node/serverOrchestrator.ts
+++ b/packages/browser/src/node/serverOrchestrator.ts
@@ -72,7 +72,7 @@ export async function resolveOrchestrator(
     __VITEST_TITLE__: 'Vitest Browser Runner',
     __VITEST_SCRIPTS__: server.orchestratorScripts,
     __VITEST_INJECTOR__: `<script type="module">${injector}</script>`,
-    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherPath}"></script>`,
+    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherUrl}"></script>`,
     __VITEST_CONTEXT_ID__: JSON.stringify(contextId),
   })
 }
diff --git a/packages/browser/src/node/serverTester.ts b/packages/browser/src/node/serverTester.ts
index 517c69892812..6768db439e4e 100644
--- a/packages/browser/src/node/serverTester.ts
+++ b/packages/browser/src/node/serverTester.ts
@@ -72,7 +72,10 @@ export async function resolveTester(
     __VITEST_TITLE__: 'Vitest Browser Tester',
     __VITEST_SCRIPTS__: server.testerScripts,
     __VITEST_INJECTOR__: `<script type="module">${injector}</script>`,
-    __VITEST_ERROR_CATCHER__: `<script type="module" src="${server.errorCatcherPath}"></script>`,
+    __VITEST_INTERNAL_SCRIPTS__: [
+      `<script type="module" src="${server.errorCatcherUrl}"></script>`,
+      server.locatorsUrl ? `<script type="module" src="${server.locatorsUrl}"></script>` : '',
+    ].join('\n'),
     __VITEST_APPEND__:
       `<script type="module">
 __vitest_browser_runner__.runningFiles = ${tests}
diff --git a/packages/browser/src/node/utils.ts b/packages/browser/src/node/utils.ts
index ce99c80e448f..4af728a1f9fb 100644
--- a/packages/browser/src/node/utils.ts
+++ b/packages/browser/src/node/utils.ts
@@ -41,3 +41,7 @@ export async function getBrowserProvider(
 
   return customProviderModule.default
 }
+
+export function slash(path: string) {
+  return path.replace(/\\/g, '/').replace(/\/+/g, '/')
+}
diff --git a/packages/vitest/src/node/cli/cli-config.ts b/packages/vitest/src/node/cli/cli-config.ts
index ade1b3a385b7..960a3dcb3829 100644
--- a/packages/vitest/src/node/cli/cli-config.ts
+++ b/packages/vitest/src/node/cli/cli-config.ts
@@ -414,6 +414,7 @@ export const cliOptionsConfig: VitestCLIOptions = {
       viewport: null,
       screenshotDirectory: null,
       screenshotFailures: null,
+      locators: null,
     },
   },
   pool: {
diff --git a/packages/vitest/src/node/config/resolveConfig.ts b/packages/vitest/src/node/config/resolveConfig.ts
index b9b4d1aef96b..939ab65ba7fd 100644
--- a/packages/vitest/src/node/config/resolveConfig.ts
+++ b/packages/vitest/src/node/config/resolveConfig.ts
@@ -748,6 +748,9 @@ export function resolveConfig(
   resolved.browser.viewport.width ??= 414
   resolved.browser.viewport.height ??= 896
 
+  resolved.browser.locators ??= {} as any
+  resolved.browser.locators.testIdAttribute ??= 'data-testid'
+
   if (resolved.browser.enabled && stdProvider === 'stackblitz') {
     resolved.browser.provider = 'preview'
   }
diff --git a/packages/vitest/src/node/config/serializeConfig.ts b/packages/vitest/src/node/config/serializeConfig.ts
index 15d1a06103ea..03e78489c54a 100644
--- a/packages/vitest/src/node/config/serializeConfig.ts
+++ b/packages/vitest/src/node/config/serializeConfig.ts
@@ -152,6 +152,9 @@ export function serializeConfig(
         ui: browser.ui,
         viewport: browser.viewport,
         screenshotFailures: browser.screenshotFailures,
+        locators: {
+          testIdAttribute: browser.locators.testIdAttribute,
+        },
       }
     })(config.browser),
     standalone: config.standalone,
diff --git a/packages/vitest/src/node/types/browser.ts b/packages/vitest/src/node/types/browser.ts
index 2c88a74d56a6..db2bf1e2a6b3 100644
--- a/packages/vitest/src/node/types/browser.ts
+++ b/packages/vitest/src/node/types/browser.ts
@@ -129,6 +129,17 @@ export interface BrowserConfigOptions {
     height: number
   }
 
+  /**
+   * Locator options
+   */
+  locators?: {
+    /**
+     * Attribute used to locate elements by test id
+     * @default 'data-testid'
+     */
+    testIdAttribute?: string
+  }
+
   /**
    * Directory where screenshots will be saved when page.screenshot() is called
    * If not set, all screenshots are saved to __screenshots__ directory in the same folder as the test file.
@@ -241,4 +252,7 @@ export interface ResolvedBrowserOptions extends BrowserConfigOptions {
     height: number
   }
   screenshotFailures: boolean
+  locators: {
+    testIdAttribute: string
+  }
 }
diff --git a/packages/vitest/src/runtime/config.ts b/packages/vitest/src/runtime/config.ts
index 912b4bb271d8..0ecbf4cd1628 100644
--- a/packages/vitest/src/runtime/config.ts
+++ b/packages/vitest/src/runtime/config.ts
@@ -121,6 +121,9 @@ export interface SerializedConfig {
       width: number
       height: number
     }
+    locators: {
+      testIdAttribute: string
+    }
     screenshotFailures: boolean
   }
   standalone: boolean
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e2453e4e1b6..1c17ef21e1dc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,10 +170,10 @@ importers:
         version: 0.20.1(@vite-pwa/assets-generator@0.2.4)(vite@5.3.3(@types/node@20.14.14)(terser@5.22.0))(workbox-build@7.1.0(@types/babel__core@7.20.5))(workbox-window@7.1.0)
       vitepress:
         specifier: ^1.3.1
-        version: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
+        version: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
       vitepress-plugin-tabs:
         specifier: ^0.5.0
-        version: 0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4))
+        version: 0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4))
       workbox-window:
         specifier: ^7.1.0
         version: 7.1.0
@@ -284,7 +284,7 @@ importers:
         version: 6.4.2(@types/jest@29.0.0)(vitest@packages+vitest)
       '@testing-library/react':
         specifier: ^13.2.0
-        version: 13.4.0(react-dom@18.0.0(react@18.2.0))(react@18.2.0)
+        version: 13.4.0(react-dom@18.3.1(react@18.2.0))(react@18.2.0)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -381,7 +381,7 @@ importers:
         version: 6.4.2(@types/jest@29.0.0)(vitest@packages+vitest)
       '@testing-library/react':
         specifier: ^13.2.0
-        version: 13.4.0(react-dom@18.0.0(react@18.2.0))(react@18.2.0)
+        version: 13.4.0(react-dom@18.3.1(react@18.2.0))(react@18.2.0)
       '@testing-library/user-event':
         specifier: ^14.5.2
         version: 14.5.2(@testing-library/dom@10.4.0)
@@ -464,6 +464,9 @@ importers:
       flatted:
         specifier: ^3.3.1
         version: 3.3.1
+      ivya:
+        specifier: ^1.1.0
+        version: 1.1.0
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -1060,6 +1063,12 @@ importers:
 
   test/browser:
     devDependencies:
+      '@testing-library/react':
+        specifier: ^13.2.0
+        version: 13.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@types/react':
+        specifier: ^18.2.79
+        version: 18.2.79
       '@vitejs/plugin-basic-ssl':
         specifier: ^1.0.2
         version: 1.0.2(vite@5.3.3(@types/node@20.14.14)(terser@5.22.0))
@@ -1078,6 +1087,12 @@ importers:
       playwright:
         specifier: ^1.41.0
         version: 1.41.0
+      react:
+        specifier: ^18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.3.1
+        version: 18.3.1(react@18.3.1)
       url:
         specifier: ^0.11.3
         version: 0.11.3
@@ -1209,7 +1224,7 @@ importers:
         version: 3.4.26(typescript@5.5.4)
       zustand:
         specifier: ^4.1.1
-        version: 4.1.1(react@18.2.0)
+        version: 4.1.1(react@18.3.1)
 
   test/coverage-test:
     devDependencies:
@@ -1578,10 +1593,6 @@ packages:
     resolution: {integrity: sha512-qJzAIcv03PyaWqxRgO4mSU3lihncDT296vnyuE2O8uA4w3UHWI4S3hgeZd1L8W1Bft40w9JxJ2b412iDUFFRhw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/compat-data@7.24.9':
-    resolution: {integrity: sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/compat-data@7.25.2':
     resolution: {integrity: sha512-bYcppcpKBvX4znYaPEeFau03bp89ShqNMLs+rmdptMw+heSZh9+z84d2YG+K7cYLbWwzdjtDoW/uqZmPjulClQ==}
     engines: {node: '>=6.9.0'}
@@ -1602,10 +1613,6 @@ packages:
     resolution: {integrity: sha512-nykK+LEK86ahTkX/3TgauT0ikKoNCfKHEaZYTUVupJdTLzGNvrblu4u6fa7DhZONAltdf8e662t/abY8idrd/g==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/core@7.24.9':
-    resolution: {integrity: sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/core@7.25.2':
     resolution: {integrity: sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==}
     engines: {node: '>=6.9.0'}
@@ -1646,10 +1653,6 @@ packages:
     resolution: {integrity: sha512-ctSdRHBi20qWOfy27RUb4Fhp07KSJ3sXcuSvTrXrc4aG8NSYDo1ici3Vhg9bg69y5bj0Mr1lh0aeEgTvc12rMg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helper-compilation-targets@7.24.8':
-    resolution: {integrity: sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helper-compilation-targets@7.25.2':
     resolution: {integrity: sha512-U2U5LsSaZ7TAt3cfaymQ8WHh0pxvdHoEk6HVpaexxixjyEquMh0L0YNJNM6CTGKMXV1iksi0iZkGw4AcFkPaaw==}
     engines: {node: '>=6.9.0'}
@@ -1716,12 +1719,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0
 
-  '@babel/helper-module-transforms@7.24.9':
-    resolution: {integrity: sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-
   '@babel/helper-module-transforms@7.25.2':
     resolution: {integrity: sha512-BjyRAbix6j/wv83ftcVJmBt72QtHI56C7JXZoG2xATiLpmoC7dpd8WnkikExHDVPpi/3qCmO6WY1EaXOluiecQ==}
     engines: {node: '>=6.9.0'}
@@ -1812,10 +1809,6 @@ packages:
     resolution: {integrity: sha512-NlmJJtvcw72yRJRcnCmGvSi+3jDEg8qFu3z0AFoymmzLx5ERVWyzd9kVXr7Th9/8yIJi2Zc6av4Tqz3wFs8QWg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/helpers@7.24.8':
-    resolution: {integrity: sha512-gV2265Nkcz7weJJfvDoAEVzC1e2OTDpkGbEsebse8koXUJUXPsCMi7sRo/+SPMuMZ9MtUPnGwITTnQnU5YjyaQ==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/helpers@7.25.0':
     resolution: {integrity: sha512-MjgLZ42aCm0oGjJj8CtSM3DB8NOOf8h2l7DCTePJs29u+v7yO/RBX9nShlKMgFnRks/Q4tBAe7Hxnov9VkGwLw==}
     engines: {node: '>=6.9.0'}
@@ -6441,6 +6434,9 @@ packages:
     resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
     engines: {node: '>=8'}
 
+  ivya@1.1.0:
+    resolution: {integrity: sha512-M9JrukbVtwVOK+rbCka+H1TFO4ZMcdT40idmGOXGjFR+B+D16N6E2POIA1vmPLzyYBKA4nFUr8sq4ojGi5DWxQ==}
+
   jackspeak@3.4.0:
     resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
     engines: {node: '>=14'}
@@ -6478,10 +6474,6 @@ packages:
     resolution: {integrity: sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==}
     hasBin: true
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
-    hasBin: true
-
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
     hasBin: true
@@ -7610,10 +7602,10 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-dom@18.0.0:
-    resolution: {integrity: sha512-XqX7uzmFo0pUceWFCt7Gff6IyIMzFUn7QMZrbrQfGxtaxXZIcGQzoNpRLE3fQLnS4XzLLPMZX2T9TRcSrasicw==}
+  react-dom@18.3.1:
+    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
-      react: ^18.0.0
+      react: ^18.3.1
 
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@@ -7642,6 +7634,10 @@ packages:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
 
+  react@18.3.1:
+    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+    engines: {node: '>=0.10.0'}
+
   read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -7866,8 +7862,8 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.21.0:
-    resolution: {integrity: sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==}
+  scheduler@0.23.2:
+    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
   scslre@0.3.0:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
@@ -9476,8 +9472,6 @@ snapshots:
 
   '@babel/compat-data@7.24.7': {}
 
-  '@babel/compat-data@7.24.9': {}
-
   '@babel/compat-data@7.25.2': {}
 
   '@babel/core@7.23.3':
@@ -9560,26 +9554,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/core@7.24.9':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@babel/code-frame': 7.24.7
-      '@babel/generator': 7.24.10
-      '@babel/helper-compilation-targets': 7.24.8
-      '@babel/helper-module-transforms': 7.24.9(@babel/core@7.24.9)
-      '@babel/helpers': 7.24.8
-      '@babel/parser': 7.24.8
-      '@babel/template': 7.24.7
-      '@babel/traverse': 7.24.8
-      '@babel/types': 7.24.9
-      convert-source-map: 2.0.0
-      debug: 4.3.6
-      gensync: 1.0.0-beta.2
-      json5: 2.2.3
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/core@7.25.2':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -9638,7 +9612,7 @@ snapshots:
 
   '@babel/helper-builder-binary-assignment-operator-visitor@7.22.15':
     dependencies:
-      '@babel/types': 7.24.9
+      '@babel/types': 7.25.2
 
   '@babel/helper-compilation-targets@7.23.6':
     dependencies:
@@ -9656,14 +9630,6 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-compilation-targets@7.24.8':
-    dependencies:
-      '@babel/compat-data': 7.24.9
-      '@babel/helper-validator-option': 7.24.8
-      browserslist: 4.23.2
-      lru-cache: 5.1.1
-      semver: 6.3.1
-
   '@babel/helper-compilation-targets@7.25.2':
     dependencies:
       '@babel/compat-data': 7.25.2
@@ -9687,21 +9653,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.24.9)':
-    dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-function-name': 7.24.7
-      '@babel/helper-member-expression-to-functions': 7.24.7
-      '@babel/helper-optimise-call-expression': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.9)
-      '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      semver: 6.3.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-create-class-features-plugin@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -9717,17 +9668,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.9)':
+  '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
       regexpu-core: 5.3.2
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.4.3(@babel/core@7.24.9)':
+  '@babel/helper-define-polyfill-provider@0.4.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       debug: 4.3.6
       lodash.debounce: 4.0.8
@@ -9735,10 +9686,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.24.9)':
+  '@babel/helper-define-polyfill-provider@0.6.1(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       debug: 4.3.6
       lodash.debounce: 4.0.8
@@ -9825,17 +9776,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.24.7(@babel/core@7.24.9)':
-    dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -9847,17 +9787,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-module-transforms@7.24.9(@babel/core@7.24.9)':
-    dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-module-imports': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-      '@babel/helper-split-export-declaration': 7.24.7
-      '@babel/helper-validator-identifier': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-module-transforms@7.25.2(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -9876,9 +9805,9 @@ snapshots:
 
   '@babel/helper-plugin-utils@7.24.7': {}
 
-  '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.9)':
+  '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-wrap-function': 7.22.20
@@ -9892,15 +9821,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.24.7(@babel/core@7.24.9)':
-    dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-environment-visitor': 7.24.7
-      '@babel/helper-member-expression-to-functions': 7.24.7
-      '@babel/helper-optimise-call-expression': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/helper-replace-supers@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -9949,8 +9869,8 @@ snapshots:
   '@babel/helper-wrap-function@7.22.20':
     dependencies:
       '@babel/helper-function-name': 7.24.7
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.9
+      '@babel/template': 7.25.0
+      '@babel/types': 7.25.2
 
   '@babel/helpers@7.24.5':
     dependencies:
@@ -9965,11 +9885,6 @@ snapshots:
       '@babel/template': 7.24.7
       '@babel/types': 7.24.7
 
-  '@babel/helpers@7.24.8':
-    dependencies:
-      '@babel/template': 7.24.7
-      '@babel/types': 7.24.9
-
   '@babel/helpers@7.25.0':
     dependencies:
       '@babel/template': 7.25.0
@@ -10002,67 +9917,67 @@ snapshots:
     dependencies:
       '@babel/types': 7.25.2
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-transform-optional-chaining': 7.23.0(@babel/core@7.24.9)
+      '@babel/plugin-transform-optional-chaining': 7.23.0(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.9)':
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
 
-  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-import-assertions@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-import-attributes@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
   '@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.5)':
@@ -10080,44 +9995,44 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
   '@babel/plugin-syntax-typescript@7.24.7(@babel/core@7.23.3)':
@@ -10130,154 +10045,154 @@ snapshots:
       '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.9)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-arrow-functions@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-async-generator-functions@7.23.2(@babel/core@7.24.9)':
+  '@babel/plugin-transform-async-generator-functions@7.23.2(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.9)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.9)
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.25.2)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-async-to-generator@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.9)
+      '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-block-scoped-functions@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-block-scoping@7.23.0(@babel/core@7.24.9)':
+  '@babel/plugin-transform-block-scoping@7.23.0(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-class-properties@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-class-static-block@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.9)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-transform-classes@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-environment-visitor': 7.24.7
       '@babel/helper-function-name': 7.24.7
       '@babel/helper-optimise-call-expression': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.9)
+      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-split-export-declaration': 7.24.7
       globals: 11.12.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-computed-properties@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/template': 7.24.7
+      '@babel/template': 7.25.0
 
-  '@babel/plugin-transform-destructuring@7.23.0(@babel/core@7.24.9)':
+  '@babel/plugin-transform-destructuring@7.23.0(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-dotall-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-duplicate-keys@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-dynamic-import@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-dynamic-import@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-exponentiation-operator@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-export-namespace-from@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-export-namespace-from@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-for-of@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-transform-for-of@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-function-name@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-function-name@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-function-name': 7.24.7
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-json-strings@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-json-strings@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-literals@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-literals@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-logical-assignment-operators@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-logical-assignment-operators@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.9)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-member-expression-literals@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-modules-amd@7.23.0(@babel/core@7.24.9)':
+  '@babel/plugin-transform-modules-amd@7.23.0(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-module-transforms': 7.24.9(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
     transitivePeerDependencies:
       - supports-color
@@ -10291,15 +10206,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-commonjs@7.24.7(@babel/core@7.24.9)':
-    dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-module-transforms': 7.24.7(@babel/core@7.24.9)
-      '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-simple-access': 7.24.7
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/plugin-transform-modules-commonjs@7.24.7(@babel/core@7.25.2)':
     dependencies:
       '@babel/core': 7.25.2
@@ -10309,105 +10215,105 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.23.0(@babel/core@7.24.9)':
+  '@babel/plugin-transform-modules-systemjs@7.23.0(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-hoist-variables': 7.24.7
-      '@babel/helper-module-transforms': 7.24.9(@babel/core@7.24.9)
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
       '@babel/helper-validator-identifier': 7.24.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-modules-umd@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-module-transforms': 7.24.9(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-module-transforms': 7.25.2(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-new-target@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-new-target@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-numeric-separator@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-numeric-separator@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.9)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-object-rest-spread@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-transform-object-rest-spread@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/compat-data': 7.24.9
-      '@babel/core': 7.24.9
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/compat-data': 7.25.2
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-transform-parameters': 7.22.15(@babel/core@7.24.9)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-transform-parameters': 7.22.15(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-object-super@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-object-super@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.24.9)
+      '@babel/helper-replace-supers': 7.24.7(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-optional-catch-binding@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
 
-  '@babel/plugin-transform-optional-chaining@7.23.0(@babel/core@7.24.9)':
+  '@babel/plugin-transform-optional-chaining@7.23.0(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.9)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.22.15(@babel/core@7.24.9)':
+  '@babel/plugin-transform-parameters@7.22.15(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-private-methods@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.22.11(@babel/core@7.24.9)':
+  '@babel/plugin-transform-private-property-in-object@7.22.11(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-annotate-as-pure': 7.24.7
-      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.24.9)
+      '@babel/helper-create-class-features-plugin': 7.24.7(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.9)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-property-literals@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
   '@babel/plugin-transform-react-jsx-development@7.22.5(@babel/core@7.24.5)':
@@ -10434,43 +10340,43 @@ snapshots:
       '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.5)
       '@babel/types': 7.24.5
 
-  '@babel/plugin-transform-regenerator@7.22.10(@babel/core@7.24.9)':
+  '@babel/plugin-transform-regenerator@7.22.10(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       regenerator-transform: 0.15.2
 
-  '@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-reserved-words@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-shorthand-properties@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-spread@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-spread@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       '@babel/helper-skip-transparent-expression-wrappers': 7.24.7
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-sticky-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-template-literals@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-typeof-symbol@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
   '@babel/plugin-transform-typescript@7.24.7(@babel/core@7.23.3)':
@@ -10493,120 +10399,120 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-escapes@7.22.10(@babel/core@7.24.9)':
+  '@babel/plugin-transform-unicode-escapes@7.22.10(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-unicode-property-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-unicode-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.24.9)':
+  '@babel/plugin-transform-unicode-sets-regex@7.22.5(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.25.2)
       '@babel/helper-plugin-utils': 7.24.7
 
-  '@babel/preset-env@7.23.2(@babel/core@7.24.9)':
+  '@babel/preset-env@7.23.2(@babel/core@7.25.2)':
     dependencies:
-      '@babel/compat-data': 7.24.9
-      '@babel/core': 7.24.9
-      '@babel/helper-compilation-targets': 7.24.8
+      '@babel/compat-data': 7.25.2
+      '@babel/core': 7.25.2
+      '@babel/helper-compilation-targets': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
       '@babel/helper-validator-option': 7.24.8
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.9)
-      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.9)
-      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.9)
-      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.9)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.9)
-      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.9)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.9)
-      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.9)
-      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.9)
-      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.9)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.9)
-      '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-async-generator-functions': 7.23.2(@babel/core@7.24.9)
-      '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-block-scoping': 7.23.0(@babel/core@7.24.9)
-      '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-class-static-block': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-classes': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-destructuring': 7.23.0(@babel/core@7.24.9)
-      '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-dynamic-import': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-export-namespace-from': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-for-of': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-json-strings': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-logical-assignment-operators': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-modules-amd': 7.23.0(@babel/core@7.24.9)
-      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.24.9)
-      '@babel/plugin-transform-modules-systemjs': 7.23.0(@babel/core@7.24.9)
-      '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-numeric-separator': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-object-rest-spread': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-optional-catch-binding': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-optional-chaining': 7.23.0(@babel/core@7.24.9)
-      '@babel/plugin-transform-parameters': 7.22.15(@babel/core@7.24.9)
-      '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-private-property-in-object': 7.22.11(@babel/core@7.24.9)
-      '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-regenerator': 7.22.10(@babel/core@7.24.9)
-      '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-unicode-escapes': 7.22.10(@babel/core@7.24.9)
-      '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.24.9)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.9)
-      '@babel/types': 7.24.9
-      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.24.9)
-      babel-plugin-polyfill-corejs3: 0.8.5(@babel/core@7.24.9)
-      babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.24.9)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.2)
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.25.2)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.25.2)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-assertions': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-attributes': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.25.2)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.2)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.2)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.2)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.2)
+      '@babel/plugin-transform-arrow-functions': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-async-generator-functions': 7.23.2(@babel/core@7.25.2)
+      '@babel/plugin-transform-async-to-generator': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-block-scoped-functions': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-block-scoping': 7.23.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-class-properties': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-class-static-block': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-classes': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-transform-computed-properties': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-destructuring': 7.23.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-dotall-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-duplicate-keys': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-dynamic-import': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-exponentiation-operator': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-export-namespace-from': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-for-of': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-transform-function-name': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-json-strings': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-literals': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-logical-assignment-operators': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-member-expression-literals': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-modules-amd': 7.23.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-modules-commonjs': 7.24.7(@babel/core@7.25.2)
+      '@babel/plugin-transform-modules-systemjs': 7.23.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-modules-umd': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-new-target': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-numeric-separator': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-object-rest-spread': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-transform-object-super': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-optional-catch-binding': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-optional-chaining': 7.23.0(@babel/core@7.25.2)
+      '@babel/plugin-transform-parameters': 7.22.15(@babel/core@7.25.2)
+      '@babel/plugin-transform-private-methods': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-private-property-in-object': 7.22.11(@babel/core@7.25.2)
+      '@babel/plugin-transform-property-literals': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-regenerator': 7.22.10(@babel/core@7.25.2)
+      '@babel/plugin-transform-reserved-words': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-shorthand-properties': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-spread': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-sticky-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-template-literals': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-typeof-symbol': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-unicode-escapes': 7.22.10(@babel/core@7.25.2)
+      '@babel/plugin-transform-unicode-property-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-unicode-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/plugin-transform-unicode-sets-regex': 7.22.5(@babel/core@7.25.2)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.25.2)
+      '@babel/types': 7.25.2
+      babel-plugin-polyfill-corejs2: 0.4.10(@babel/core@7.25.2)
+      babel-plugin-polyfill-corejs3: 0.8.5(@babel/core@7.25.2)
+      babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.25.2)
       core-js-compat: 3.37.1
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.9)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.2)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-plugin-utils': 7.24.7
-      '@babel/types': 7.24.9
+      '@babel/types': 7.25.2
       esutils: 2.0.3
 
   '@babel/preset-typescript@7.23.2(@babel/core@7.23.3)':
@@ -10778,9 +10684,9 @@ snapshots:
 
   '@docsearch/css@3.6.0': {}
 
-  '@docsearch/js@3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)':
+  '@docsearch/js@3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)':
     dependencies:
-      '@docsearch/react': 3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)
+      '@docsearch/react': 3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)
       preact: 10.21.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -10789,7 +10695,7 @@ snapshots:
       - react-dom
       - search-insights
 
-  '@docsearch/react@3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)':
+  '@docsearch/react@3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)':
     dependencies:
       '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.9.0)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
@@ -10797,8 +10703,8 @@ snapshots:
       algoliasearch: 4.20.0
     optionalDependencies:
       '@types/react': 18.2.79
-      react: 18.2.0
-      react-dom: 18.0.0(react@18.2.0)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
       search-insights: 2.9.0
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -11335,9 +11241,9 @@ snapshots:
 
   '@remix-run/router@1.16.0': {}
 
-  '@rollup/plugin-babel@5.3.1(@babel/core@7.24.9)(@types/babel__core@7.20.5)(rollup@4.20.0)':
+  '@rollup/plugin-babel@5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@4.20.0)':
     dependencies:
-      '@babel/core': 7.24.9
+      '@babel/core': 7.25.2
       '@babel/helper-module-imports': 7.24.7
       '@rollup/pluginutils': 3.1.0(rollup@4.20.0)
       rollup: 4.20.0
@@ -11764,13 +11670,21 @@ snapshots:
       '@testing-library/dom': 8.19.0
       preact: 10.21.0
 
-  '@testing-library/react@13.4.0(react-dom@18.0.0(react@18.2.0))(react@18.2.0)':
+  '@testing-library/react@13.4.0(react-dom@18.3.1(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@babel/runtime': 7.24.4
       '@testing-library/dom': 8.19.0
       '@types/react-dom': 18.2.14
       react: 18.2.0
-      react-dom: 18.0.0(react@18.2.0)
+      react-dom: 18.3.1(react@18.2.0)
+
+  '@testing-library/react@13.4.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.4
+      '@testing-library/dom': 8.19.0
+      '@types/react-dom': 18.2.14
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -12999,27 +12913,27 @@ snapshots:
       html-entities: 2.3.3
       validate-html-nesting: 1.2.2
 
-  babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.24.9):
+  babel-plugin-polyfill-corejs2@0.4.10(@babel/core@7.25.2):
     dependencies:
-      '@babel/compat-data': 7.24.9
-      '@babel/core': 7.24.9
-      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.24.9)
+      '@babel/compat-data': 7.25.2
+      '@babel/core': 7.25.2
+      '@babel/helper-define-polyfill-provider': 0.6.1(@babel/core@7.25.2)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.8.5(@babel/core@7.24.9):
+  babel-plugin-polyfill-corejs3@0.8.5(@babel/core@7.25.2):
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.25.2)
       core-js-compat: 3.37.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.5.3(@babel/core@7.24.9):
+  babel-plugin-polyfill-regenerator@0.5.3(@babel/core@7.25.2):
     dependencies:
-      '@babel/core': 7.24.9
-      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.25.2)
     transitivePeerDependencies:
       - supports-color
 
@@ -15061,7 +14975,7 @@ snapshots:
       debug: 4.3.6
       esbuild: 0.23.0
       jiti: 2.0.0-beta.2
-      jiti-v1: jiti@1.21.0
+      jiti-v1: jiti@1.21.6
       pathe: 1.1.2
       pkg-types: 1.1.3
       tsx: 4.16.5
@@ -15295,6 +15209,8 @@ snapshots:
       html-escaper: 2.0.2
       istanbul-lib-report: 3.0.1
 
+  ivya@1.1.0: {}
+
   jackspeak@3.4.0:
     dependencies:
       '@isaacs/cliui': 8.0.2
@@ -15353,8 +15269,6 @@ snapshots:
 
   jiti@1.20.0: {}
 
-  jiti@1.21.0: {}
-
   jiti@1.21.6: {}
 
   jiti@2.0.0-beta.2: {}
@@ -16653,11 +16567,17 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-dom@18.0.0(react@18.2.0):
+  react-dom@18.3.1(react@18.2.0):
     dependencies:
       loose-envify: 1.4.0
       react: 18.2.0
-      scheduler: 0.21.0
+      scheduler: 0.23.2
+
+  react-dom@18.3.1(react@18.3.1):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
 
   react-is@17.0.2: {}
 
@@ -16681,6 +16601,10 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
+  react@18.3.1:
+    dependencies:
+      loose-envify: 1.4.0
+
   read-pkg-up@7.0.1:
     dependencies:
       find-up: 4.1.0
@@ -16949,7 +16873,7 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.21.0:
+  scheduler@0.23.2:
     dependencies:
       loose-envify: 1.4.0
 
@@ -17956,9 +17880,9 @@ snapshots:
       punycode: 1.4.1
       qs: 6.11.2
 
-  use-sync-external-store@1.2.0(react@18.2.0):
+  use-sync-external-store@1.2.0(react@18.3.1):
     dependencies:
-      react: 18.2.0
+      react: 18.3.1
 
   userhome@1.0.0: {}
 
@@ -18069,15 +17993,15 @@ snapshots:
     optionalDependencies:
       vite: 5.3.3(@types/node@20.14.14)(terser@5.22.0)
 
-  vitepress-plugin-tabs@0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4)):
+  vitepress-plugin-tabs@0.5.0(vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4))(vue@3.4.35(typescript@5.5.4)):
     dependencies:
-      vitepress: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
+      vitepress: 1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4)
       vue: 3.4.35(typescript@5.5.4)
 
-  vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4):
+  vitepress@1.3.1(@algolia/client-search@4.20.0)(@types/node@20.14.14)(@types/react@18.2.79)(postcss@8.4.40)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)(terser@5.22.0)(typescript@5.5.4):
     dependencies:
       '@docsearch/css': 3.6.0
-      '@docsearch/js': 3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.0.0(react@18.2.0))(react@18.2.0)(search-insights@2.9.0)
+      '@docsearch/js': 3.6.0(@algolia/client-search@4.20.0)(@types/react@18.2.79)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(search-insights@2.9.0)
       '@shikijs/core': 1.10.3
       '@shikijs/transformers': 1.10.3
       '@types/markdown-it': 14.1.1
@@ -18415,10 +18339,10 @@ snapshots:
   workbox-build@7.1.0(@types/babel__core@7.20.5):
     dependencies:
       '@apideck/better-ajv-errors': 0.3.6(ajv@8.12.0)
-      '@babel/core': 7.24.9
-      '@babel/preset-env': 7.23.2(@babel/core@7.24.9)
+      '@babel/core': 7.25.2
+      '@babel/preset-env': 7.23.2(@babel/core@7.25.2)
       '@babel/runtime': 7.24.4
-      '@rollup/plugin-babel': 5.3.1(@babel/core@7.24.9)(@types/babel__core@7.20.5)(rollup@4.20.0)
+      '@rollup/plugin-babel': 5.3.1(@babel/core@7.25.2)(@types/babel__core@7.20.5)(rollup@4.20.0)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@4.20.0)
       '@rollup/plugin-replace': 2.4.2(rollup@4.20.0)
       '@rollup/plugin-terser': 0.4.4(rollup@4.20.0)
@@ -18609,11 +18533,11 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.1.0
 
-  zustand@4.1.1(react@18.2.0):
+  zustand@4.1.1(react@18.3.1):
     dependencies:
-      use-sync-external-store: 1.2.0(react@18.2.0)
+      use-sync-external-store: 1.2.0(react@18.3.1)
     optionalDependencies:
-      react: 18.2.0
+      react: 18.3.1
 
   zwitch@2.0.4: {}
 
diff --git a/test/browser/fixtures/locators/blog.test.tsx b/test/browser/fixtures/locators/blog.test.tsx
new file mode 100644
index 000000000000..1a50c29e2aff
--- /dev/null
+++ b/test/browser/fixtures/locators/blog.test.tsx
@@ -0,0 +1,29 @@
+import { expect, test } from 'vitest'
+import { render } from '@testing-library/react'
+import { page } from '@vitest/browser/context'
+import Blog from '../../src/blog-app/blog'
+
+test('renders blog posts', async () => {
+  const { container } = render(<Blog />)
+
+  const screen = page.elementLocator(container)
+
+  await expect.element(screen.getByRole('heading', { name: 'Blog' })).toBeInTheDocument()
+
+  const posts = screen.getByRole('listitem').all()
+
+  expect(posts).toHaveLength(4)
+
+  const [firstPost, secondPost] = posts
+
+  expect(firstPost.element()).toHaveTextContent(/molestiae ut ut quas/)
+  expect(firstPost.getByRole('heading').element()).toHaveTextContent(/occaecati excepturi/)
+
+  await expect.element(secondPost.getByRole('heading')).toHaveTextContent('qui est esse')
+
+  await secondPost.getByRole('button', { name: 'Delete' }).click()
+
+  expect(screen.getByRole('listitem').all()).toHaveLength(3)
+
+  expect(screen.getByPlaceholder('non-existing').query()).not.toBeInTheDocument()
+})
diff --git a/test/browser/fixtures/locators/vitest.config.ts b/test/browser/fixtures/locators/vitest.config.ts
new file mode 100644
index 000000000000..8edb8f6cf049
--- /dev/null
+++ b/test/browser/fixtures/locators/vitest.config.ts
@@ -0,0 +1,26 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+const provider = process.env.PROVIDER || 'playwright'
+const name =
+  process.env.BROWSER || (provider === 'playwright' ? 'chromium' : 'chrome')
+
+export default defineConfig({
+  optimizeDeps: {
+    include: ['react/jsx-dev-runtime'],
+  },
+  cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)),
+  test: {
+    browser: {
+      enabled: true,
+      provider,
+      name,
+      headless: true,
+    },
+    onConsoleLog(log) {
+      if (log.includes('ReactDOMTestUtils.act')) {
+        return false
+      }
+    }
+  },
+})
diff --git a/test/browser/package.json b/test/browser/package.json
index db96674dfbe6..173e6c7cdd5a 100644
--- a/test/browser/package.json
+++ b/test/browser/package.json
@@ -11,6 +11,7 @@
     "test-fixtures": "vitest",
     "test-mocking": "vitest --root ./fixtures/mocking",
     "test-mocking-watch": "vitest --root ./fixtures/mocking-watch",
+    "test-locators": "vitest --root ./fixtures/locators",
     "test-snapshots": "vitest --root ./fixtures/update-snapshot",
     "coverage": "vitest --coverage.enabled --coverage.provider=istanbul --browser.headless=yes",
     "test:browser:preview": "PROVIDER=preview vitest",
@@ -18,12 +19,16 @@
     "test:browser:webdriverio": "PROVIDER=webdriverio vitest"
   },
   "devDependencies": {
+    "@testing-library/react": "^13.2.0",
+    "@types/react": "^18.2.79",
     "@vitejs/plugin-basic-ssl": "^1.0.2",
     "@vitest/browser": "workspace:*",
     "@vitest/cjs-lib": "link:./cjs-lib",
     "@vitest/injected-lib": "link:./injected-lib",
     "execa": "^7.1.1",
     "playwright": "^1.41.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "url": "^0.11.3",
     "vitest": "workspace:*",
     "webdriverio": "^8.32.2"
diff --git a/test/browser/specs/locators.test.ts b/test/browser/specs/locators.test.ts
new file mode 100644
index 000000000000..1a9a615dbfbf
--- /dev/null
+++ b/test/browser/specs/locators.test.ts
@@ -0,0 +1,13 @@
+import { expect, test } from 'vitest'
+import { runBrowserTests } from './utils'
+
+test('locators work correctly', async () => {
+  const { stderr, stdout } = await runBrowserTests({
+    root: './fixtures/locators',
+    reporters: [['verbose', { isTTY: false }]],
+  })
+
+  expect(stderr).toBe('')
+  expect(stdout).toContain('✓ blog.test.tsx')
+  expect(stdout).toContain('1 passed (1)')
+})
diff --git a/test/browser/src/blog-app/blog.tsx b/test/browser/src/blog-app/blog.tsx
new file mode 100644
index 000000000000..72f2d59952f4
--- /dev/null
+++ b/test/browser/src/blog-app/blog.tsx
@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function App() {
+  const [posts, setPosts] = React.useState(() => [
+    {
+      userId: 1,
+      id: 1,
+      title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
+      body: 'quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto',
+    },
+    {
+      userId: 1,
+      id: 2,
+      title: 'qui est esse',
+      body: 'est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla',
+    },
+    {
+      userId: 1,
+      id: 3,
+      title: 'ea molestias quasi exercitationem repellat qui ipsa sit aut',
+      body: 'et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut',
+    },
+    {
+      userId: 1,
+      id: 4,
+      title: 'eum et est occaecati',
+      body: 'ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit',
+    },
+  ])
+
+  function removePost(index: number) {
+    setPosts(posts => posts.filter((_, i) => i !== index))
+  }
+
+  return (
+    <div>
+      <h1>Blog</h1>
+      <ul>
+        {posts.map((post, index) => (
+          <li key={post.id}>
+            <h2>{post.title}</h2>
+            <p>{post.body}</p>
+            <button onClick={() => removePost(index)}>Delete</button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/test/browser/tsconfig.json b/test/browser/tsconfig.json
index 5b66297693ad..06bca217a45c 100644
--- a/test/browser/tsconfig.json
+++ b/test/browser/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "jsx": "react-jsx",
     "module": "ESNext",
     "moduleResolution": "Bundler",
     "paths": {
diff --git a/test/browser/vitest.config.mts b/test/browser/vitest.config.mts
index 813dcfcb24f0..ba958fb752ba 100644
--- a/test/browser/vitest.config.mts
+++ b/test/browser/vitest.config.mts
@@ -24,10 +24,10 @@ export default defineConfig({
     },
   },
   optimizeDeps: {
-    include: ['@vitest/cjs-lib'],
+    include: ['@vitest/cjs-lib', 'react/jsx-dev-runtime'],
   },
   test: {
-    include: ['test/**.test.{ts,js}'],
+    include: ['test/**.test.{ts,js,tsx}'],
     // having a snapshot environment doesn't affect browser tests
     snapshotEnvironment: './custom-snapshot-env.ts',
     browser: {