Lesson:Vitest Browser Mode Locators - Introduction

Vitest Browser Mode Locator objects are how you query elements that are rendered on the page.

They look very similar to React Testing Library query functions (like getByText()).

They are based on Playwright Locators .

There are seven main functions (getByRole, getByAltText, getByLabelText, getByPlaceholder, getByText, getByTitle, getByTestId)

In this and the next few lessons we will explain how to:

  • get/assert on a single element (the same as getBy... functions in React Testing Library)
  • get/assert on multiple elements (the same as getAllBy... functions in React Testing Library)
  • assert that an element is not in the DOM (the same as using queryBy...() with toBeNull() or .notToBeInTheDocument())
  • learn the different query functions (like getByText(), getByRole() etc)
  • how to combine multiple locator functions to narrow down on the exact element you want to find
  • running actions like .click() on those Locator objects to interact with the DOM

Loading full lesson...