Vitest Browser Mode Course

Prerelease - still adding content to this course this week

Learn everything you need to know to get up to speed with Vitest Browser Mode, to run your tests in a very realistic, fast and (optionally) visual way!

This is a course about Vitest Browser Mode.

  • learn how to install Vitest Browser Mode, and configure it
  • how it differs from normal Vitest tests, or E2E tests
  • and how to use all of its features to test your apps in this new and exciting way

Unlike the other courses on this site, it is not interactive and is more text-based.

I personally think that Vitest Browser Mode is a key part of your arsenal of tools to help write tests, so it is really important to understand it.

If you want to read a blog post introducing the basics of Vitest Browser Mode, check out my blog post here, then return to this course if you want to learn it all in depth and become an expert on it!

Note: Right now this course focuses only on testing React components in Vitest Browser Mode (and not Svelte or Vue - yet!)

13 lessons
Step by step lessons

Course Lessons

13 lessons to learn everything about Vitest Browser Mode

Vitest Browser Introduction

1
FREE

What is Vitest Browser Mode

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

Start

Vitest Browser Mode Setup

2
PRO

Installing Vitest Browser Mode

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

Start
3
PRO

Selecting a Provider

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

Start
4
PRO

Setting up Vitest Browser Mode in your CI/CD Pipeline

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

Start

Vitest Browser Mode Fundamentals

5
PRO

Writing Vitest Browser Mode Tests Introduction

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

Start
6
PRO

Rendering React Components in Browser Mode

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

Start

Vitest Browser Mode Locators

7
PRO

Vitest Browser Mode Locators - Introduction

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

Start
8
PRO

Vitest Browser Mode Locators - The Seven Query Functions

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

Start
9
PRO

Vitest Browser Mode Locators - The Modifier Functions

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

Start
10
PRO

Vitest Browser Mode Locators - The Interactive Methods

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

Start

Vitest Browser Mode Assertions

11
PRO

Vitest Browser Mode Assertions Overview

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

Start

Vitest Browser Mode Interactivity

12
PRO

Interactivity API - userEvent Guide

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

Start

Vitest Browser Mode Advanced

13
PRO

Browser Mode Context Module

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

Start

This course is currently a work in progress (working on it this week).

The core content is there! There is still a bit of polish to be added, but the core information is available. Please check it out and give any feedback.