How to run Playwright within Vitest

I will guide you through the setup process of playwright, I assume that you have already setup vitest, otherwise I will refer to its documentation.

Install Playwright:

run npm init playwright@latest

Playwright will guide you through the setup. When everything is done, playwright is going to download everything it needs to play right, including their builds for Firefox, chromium and WebKit. This might take some minutes, so grab yourself a coffee.

Setting up our first test

When everything worked, we can now proceed setting up our first test, which should run inside vitest.

To get to a common base, I simply tweaked the example.spec.ts playwright gives you after successfully installing.

import { Browser, BrowserContext, chromium, expect, Page } from "@playwright/test";
import { afterAll, beforeAll, describe, test } from "vitest";

describe("playwright meets vitest", () => {
  let page: Page;
  let browser: Browser;
  let context: BrowserContext;
  beforeAll(async () => {
    browser = await chromium.launch();
    let context = await browser.newContext();
    page = await context.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  test("has title", async () => {
    await page.goto("<https://playwright.dev/>");

    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);
  });

  test("get started link", async () => {
    await page.goto("<https://playwright.dev/>");

    // Click the get started link.
    await page.getByRole("link", { name: "Get started" }).click();

    // Expects the URL to contain intro.
    await expect(page).toHaveURL(/.*intro/);
  });
});

Firstly, we need to import all the Utils we are going to need. Note that we are also importing browser and context from Playwright, since we need to set up the browser manually within vitest.

Next, we need to merge the playwright test into the vitest structure.

So we wrap everything into a describe block.

Inside this describe, we introduce global variables for our, page, browser, and context to make them accessible.

In the beforeAll hook, we need to initialize those variables. So we are going to launch a new Browser, and get the context and page from it.

Do not forget to close this browser in the afterAll hook.

Then we can do our testing like we are used to it.

When running vitest

npx vitest UI watch --ui --threads false

you can now see that the tests are executed and everything works as expected!

Note that this command will open vitest UI and run all tests inside a folder called UI, you can change this parameter to your circumstances.

Here is the result:

From now on, you can also run UI tests with Vitest.

Which means that you can use all advantages like Reports, watch mode etc. with your UI tests.

The biggest advantage in my opinion is that you can integrate unit and end-to-end tests into the same CI and do not have to watch for two separate CIs.

One disadvantage is that it seems to be not possible to run the tests in headed mode.

I'm still trying to find a way to do that, and will update this article once I did it.

Happy testing,

Alex