Adding Playwright Tests to your Vite Project with Code Coverage

This article will be a straightforward guidebook for adding E2E tests to your Vite project using Playwright. It will also show you how you can produce a code coverage report so that you can see what percentage of your code base is being covered by your tests.

Playwright makes it easy to add E2E tests to your Vite project.

Installation

Before we can begin to configure our tests, we need to install some dependencies. These dependencies will allow us to write tests and to produce a code coverage report.

npm install --save-dev @playwright/test playwright-test-coverage vite-plugin-istanbul nyc

Once you have installed the dependencies, if you want to be able to run your tests in one of Playwrights test runners you will need to install at least one of the available browsers. Run one of the commands below to install at least one browser.

// install all browsers
npx playwright install

// install one, specific browser
npx playwright install chromium
npx playwright install webkit

// get list of all available browsers
npx playwright install --help

Playwright Configuration

Now that we’ve got the installations out of the way, we can begin to add some files and configure Playwright in our Vite application.