Vitest Browser Mode Course

Introduction to show what Vitest Browser Mode is, and why you should be excited to start to use it for testing your frontend applications

Step-by-step guide to installing and configuring Vitest Browser Mode

Learn the differences between the three providers (Playwright, Preview, and WebdriverIO) and which one is best for your testing needs

How to use projects in your Vitest config file

Guide to getting your CI/CD pipeline (like GitHub Actions) running your Vitest Browser Mode tests in headless mode

Introduction to writing simple tests with Vitest Browser Mode, including rendering components and making basic assertions

Learn how to use vitest-browser-react to render and test React components the same way they render in your application

Learn how to test React hooks in Vitest Browser Mode

A full guide to using Locators to find and query elements in your tests, understanding the page API and element selection

Lesson covering everything you need to know about querying for a single element on the page

How to query for elements asynchronously, with the built in polling methods to retry until your assertions pass (or it fails and times out). This is mostly with expect.element()

Lesson explaining how to query for multiple elements, and how to make assertions against them

Explaining how to use Locator query functions and assertions to check that something is NOT rendered

Detailed overview of the seven query functions: getByRole, getByAltText, getByLabelText, getByPlaceholder, getByText, getByTitle, and getByTestId

Learn how to combine regular locator functions with modifiers: nth, first, last, and, or, and filter to create powerful element queries

Learn the methods to initiate interactivity: click, dblClick, clear, hover, unhover, fill, selectOptions, screenshot, and element queries

Overview of the main assertions available in Vitest Browser Mode, including element state, visibility, and content assertions

Deep dive into the assertions that can be used with forms and inputs

How to make use of the Vitest Browser Mode accessibility assertions

Overview of the Browser Mode userEvent interactivity API for simulating real user interactions using Chrome DevTools Protocol

Overview about the Vitest Browser Mode context module, giving you access to things like userEvents, commands, the page object, and more

Lesson on what Vitest Browser Mode Visual Regression tests are, how to use them, and importantly how to avoid flaky tests!

How to spyOn and mock in Vitest Browser Mode