Playwright

The first thing that we can improve is the browser provider used to run our tests. By default, Vitest uses the preview provider, which is a great way to get started with the Browser Mode quickly but is not something you would want to use in your application.

The default preview provider has a few intentional limitations:

It relies on the installed browser executables, which means it will fail on CI unless you have those browsers installed;
It simulates browser events instead of relying on Chrome DevTools Protocol.

Those are quite important, and so it's recommended to use a designated browser provider both for to run tests locally and have them running on CI.

Currently, Vitest supports two browser providers: playwright and webdriverio. Your browser provider affects multiple things:

The actual browser(s) used to run your tests;
Options available in test.browser in vite.config.ts;
The underlying API used by the page object in @vitest/browser/context.

In this workshop, we will be using Playwright as the browser provider for Vitest, but the steps involved are much the same if you choose to use WebdriverIO instead.

👨‍💼 Your task is to introduce Playwright to the existing Vitest setup. It will consist of multiple steps:

Install playwright as a dependency in the project;
In
vite.config.ts
, update test.browser.provider to use 'playwright' as the browser provider;
In
tsconfig.test.json
, update the compilerOptions.types to include the Playwright type definitions for expect() matchers.

Once you are done with it, make sure that the tests are still passing by running npm test. Good luck!

02. Vitest Browser Mode/03. Playwright (💪 problem)

Playwright