Module Augmentation for Playwright's Page Type in Vitest Browser Commands

[mikaelbalin]

I've been working with Vitest and Playwright for browser testing and discovered that the TypeScript types for browser commands don't properly include the page property from Playwright. This makes it difficult to create custom browser commands that need access to Playwright's Page API.

I solved this by augmenting the module types in my vitest.config.mts:

import { Page } from "playwright";

declare module "vitest/node" {
  interface BrowserCommandContext {
    page: Page;
  }
}

This allows me to create browser commands like:

const emulateReducedMotion: BrowserCommand<
  [reducedMotion: "reduce" | "no-preference" | null]
> = async ({ page, provider }, reducedMotion) => {
  if (provider.name !== "playwright") {
    throw new Error(`provider ${provider.name} is not supported`);
  }

  await page.emulateMedia({ reducedMotion });
};

According to the documentation, we should generally avoid it as it can break things. However, in this case, it's extremely useful for creating type-safe browser commands.

Should Vitest better expose these types directly in their public API?

I'd appreciate any insights or alternative approaches!

[sheremet-va]

Vitest actually exposes a way to augment commands types depending on the provider: https://vitest.dev/guide/browser/playwright.html

You need to either add @vitest/browser/providers/playwright to your tsconfig.compilerOptions.types or reference it in your config/reference comment.

[mikaelbalin]

Thanks, that was very helpful. Actually, I just forgot to include the Vitest config in tsconfig :)