close

Browser mode

The Browser Mode API is provided by @rstest/browser, designed to let you use a Playwright-style Locator workflow in browser tests.

Exported API

@rstest/browser provides the runtime entry for Browser Mode. Its core responsibility is locating elements and driving interactions.

page is the query entry point, Locator handles chaining and action execution, BrowserPage describes the query APIs supported by page, and setTestIdAttribute configures the test id attribute name.

The following are the APIs currently exported by @rstest/browser:

  • page - BrowserPage query entry (queries only)
  • Locator - Core class for chained queries and interactions
  • BrowserPage - Type definition for page
  • setTestIdAttribute - Configure the attribute name used by getByTestId()

Assertion API

The assertion entry point is expect.element(locator).

When you import @rstest/browser in a Browser Mode test (e.g., import { page } from '@rstest/browser'), expect automatically gains the element capability.

Its responsibility is to perform web-first assertions (with auto-waiting) on a Locator, such as toBeVisible and toHaveText.

The relationship between the two can be understood as: @rstest/browser is responsible for finding and operating on elements, while expect.element is responsible for verifying element state.

Example: query, interaction, and assertion

browser-example.test.ts
import { page } from '@rstest/browser';
import { expect, test } from '@rstest/core';

test('submits form', async () => {
  await page.getByLabel('Email').fill('[email protected]');
  await page.getByRole('button', { name: 'Submit' }).click();
  await expect.element(page.getByText('Done')).toBeVisible();
});

In this example, page first creates a Locator, the Locator executes fill/click, and finally expect.element(locator) performs a visibility assertion on the result, forming a complete test cycle.

Detailed reference