Support Vitest Browser Mode w/ Playwright provider

[JessicaSachs]

Environment

• Operating System: Darwin
• Node Version: v22.9.0
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/JessicaSachs/nuxt-playwright-vitest-browser-repro

Describe the bug

Vitest completely hangs when I try to launch it with pnpm vitest

There's an error in the Vitest browser UI which is swallowed by the CLI

❯ /node_modules/.pnpm/[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/vite/dist/client/env.mjs:12:482

Additional context

After following the instructions, pulling the reproduction repo, and otherwise trying to get a basic installation of Vitest + Playwright + Nuxt working, I've found that I can't.

Logs

[JessicaSachs]

The documentation around Browser Testing is super confusing. I finally figured out that Nuxt supports Playwright via Vitest but ONLY in the Node context and that it's a complete replacement for Vitest's own Playwright stuff.

The Nuxt documentation as written is NOT supposed to be used with Vitest's Playwright as Vitest documents it and that they're completely unrelated aside from Vitest being the test runner.

😭

I was so confused about which page I was dealing with and the interoperability between Vitests Page API and Nuxt's Page API. It was mainly the TypeScript and expect types that were throwing me off.

I expected Vitest's expect to have been extended with DOM matchers and it wasn't. Now I understand why.

This issue is still applicable because I still want to render my Nuxt app in Vitest browser mode, but I am a little less confused about the purpose of @nuxt/test-utils/e2e.