feat(browser): introduce built-in locators

[sheremet-va]

Description

This PR adds built-in locators.

import { page } from '@vitest/browser/context'

await page.getByRole('button').click()
await page.getByRole('list').getByRole('listitem', { name: 'Hello World' }).hover()

• all providers use playwright locators under the hood to support Shadow DOM.
• when webdriverio needs to do an action (a click for example), the locator is transformed into a unique CSS
• when preview needs to do an action, we just use the HTML element found with the locator

Proposed API:

import { page } from '@vitest/browser/context'

interface Page {
  getByRole(role: string, options?: RoleOptions): Locator
  getByLabelText(text: string | RegExp): Locator
  getByTestId(testId: string | RegExp): Locator
  getByAltText(text: string | RegExp): Locator
  getByPlaceholder(text: string | RegExp): Locator
  getByText(text: string | RegExp): Locator
  getByTitle(title: string | RegExp): Locator

  elementLocator(element: Element): Locator
}

interface Locator {
  click(options?: UserEventClickOptions): Promise<void>
  dblClick(options?: UserEventClickOptions): Promise<void>
  tripleClick(options?: UserEventClickOptions): Promise<void>
  clear(): Promise<void>
  hover(): Promise<void>
  unhover(): Promise<void>
  fill(text: string, options?: UserEventFillOptions): Promise<void>
  screenshot(): Promise<ScreenshotResult>
  dropTo(element: Locator): Promise<void>

  // these are useful methods to combine them with third-party libraries that require Element or HTMLElement
  // return the element immediately or fails there are no elements or more than 2
  element(): Element
  elements(): Element[]
  query(): Element | null
  all(): Locator[]

  // chaining methods
  getByRole(role: string): Locator
  // ... same as on page
}

All @testing-library/jest-dom are support out of the box:

expect(page.getByRole('button').element()).toHaveTextContent('text')
// calls `locator.element()` automatically
await expect.element(page.getByRole('button')).toHaveTextContent('text')

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

• It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
• Ideally, include a test that fails without this PR but passes with it.
• Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.

Tests

• Run the tests with pnpm test:ci.

Documentation

• If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

• Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.