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

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. Write an E2E Test

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

Check how Playwright has it's own way of intercepting network calls.

3. 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.

EXTRA

More often than you'd expect, you’ll need to mock query responses to test different scenarios—not necessarily for development purposes. For example, if the backend isn't ready yet and you need to proceed with a screen but are blocked, setting up MSW in the browser allows you to mock responses and keep moving forward.

If you’ve followed the tutorial up to this point, MSW is already set up for testing in a Node.js environment. Now, we’ll configure MSW as a service worker to intercept queries in the browser. You might wonder why this is necessary if we already have Playwright. While Playwright is more focused on automating tests, think of MSW in this context as a development tool for quick testing.

Let’s configure it:

1. Configure MSW for Browser Testing

So far, MSW has been used to mock API responses in a Node.js environment. Now, let’s set it up for the browser.

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

2. 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="true"

IMPORTANT: The MSW worker and the Playwright worker can interfere with each other, so make sure to disable VITE_API_MOCK when running end-to-end (E2E).