Locators 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 React Testing Library there are also getAllBy/queryAllBy/findAllBy which return an array instead of just one item. The equivalent in Vitest Browser Mode is using the .all() method on the locator. For example, instead of getAllByRole('button') in RTL, you would use getByRole('button').all() which returns an array of all matching elements.

In this lesson we're going to go over the basics of:

• how to query and find an element (similar to RTL's getBy functions)
• how they work with async rendering (similar to RTL's await findBy functions)
• and how to check an element is NOT rendered (similar to RTL's queryBy functions)

We will dive into each of the main seven functions in detail in the next lesson.