Part of making assertions in tests is taking a value (such as an HTML Element in a component) and asserting that it matches some condition.

For example, you could check that 10 > 5 like this: expect(10).toBeGreaterThan(5).

In Vitest Browser Mode there are lots of built-in assertions that can be used on Locators.

Here are some examples:

// check this is visible (not hidden):
await expect
  .element(
    screen.getByText('Loading...')
  )
  .toBeVisible();

// check a button has the disabled property set
await expect
  .element(screen.getByRole('button'))
  .toBeDisabled();

// check a button has text content of Click me
await expect
  .element(screen.getByRole('button'))
  .toHaveTextContent('Click me');

// check an element with data-testid="container" is empty:
await expect
  .element(
    screen.getByTestId('container')
  )
  .toBeEmptyDOMElement();

If you have used other tools like React Testing Library or Playwright you will find that these assertion methods look quite familiar!

In this lesson we'll go over the main use cases of these.

We will also have a short recap on why you should be using expect.element() for DOM assertions.