🔧 Configure Vitest, MSW and Playwright in a React project with Vite and TS - Part 3

Playwright is a framework-agnostic end-to-end testing (also known as E2E, or integration testing) tool for web apps. Playwright has great developer experience and makes writing good and resilient to changes tests straightforward.

1. Install Playwright

To set up Playwright, run the following command:

npm init playwright@latest

\n\n

You'll be guided through a setup wizard in your terminal. When prompted with "Where to put your end-to-end tests?", you can set it to src/tests (as recommended in earlier tutorials).

Add Scripts to package.json

In your package.json, add the following two scripts for running Playwright tests:

This allows you to run the tests in both development and CI environments.

Playwright Configuration

The playwright.config.ts file should be configured as follows:

Key Changes in the Configuration:

• use.baseURL: This sets the base URL of your development server, so you don’t have to write it in every test.
• webServer: This block describes how to start your development server. It will reuse an already-running server unless you are in a CI environment.
• testDir: The directory where Playwright should look for your E2E tests (in this case, src/tests/e2e).

2. Configure MSW for Browser Testing

So far, MSW has been set up for mocking API responses in a Node.js environment. However, because Playwright uses a real browser for testing, you need to configure MSW to work in the browser environment.

Create a new JavaScript module that will register the MSW service worker for browser-based tests:

3. Register the Worker in Development Mode

To start the MSW worker when the app is running in development mode, add the following to your app’s root module (e.g., src/main.tsx):

Make sure to set the VITE_API_MOCK environment variable in your .env file:

VITE_API_MOCK=enabled

4. Write an E2E Test

Now you can write an E2E test for a flow in your app. Here’s an example Playwright test:

5. Running the Test

To run the E2E test, use the following command:

npm run test:e2e:ci

This will execute the test in CI mode, which is useful for automated pipelines.