Modo navegador de Vitest

Las pruebas que se ejecutan en un navegador (el modo navegador de Vitest) se reportan igual que las que se ejecutan en Node: las mismas claves, los mismos estados, los mismos intentos y los mismos helpers probara.*. El reporter sigue ejecutándose en el proceso Node de Vitest, y el navegador le entrega lo que registró cada prueba. Algunas cosas funcionan de otra manera, y otras todavía no funcionan: cada una lo advierte, y ninguna hace fallar una prueba.

Camino rápido

1. Instala el proveedor de tu versión de Vitest, en la misma versión que vitest, junto con playwright, y después el Chromium de Playwright (npx playwright install chromium):

   Vitest	Paquete del proveedor	provider en test.browser
   3.2	@vitest/browser	'playwright'
   4.0, 4.1 y 5	@vitest/browser-playwright	playwright(), importado de @vitest/browser-playwright

2. Activa el modo navegador en test.browser, junto al reporter, registrado como para Node (primeros pasos):

   Clave de test.browser	Valor
   enabled	true
   provider	el valor de la tabla anterior
   instances	[{ browser: 'chromium' }]

3. Ejecuta las pruebas como siempre (npx vitest run). No va nada más en la configuración: el reporter añade a cada proyecto de navegador el archivo de setup para navegador de tu versión de Vitest.

El reporter se prueba en Chromium sin interfaz con Vitest 3.2.7, 4.0.18, 4.1.11 y 5.0.2, cada uno con su proveedor en la misma versión.

Qué funciona como en Node

Función	En un navegador
Resultados	Las claves, los estados y los intentos de una ejecución en Node: una prueba que pasa de Node al navegador conserva su caso
Reintentos y repeticiones	Cada intento es un resultado
Los helpers probara.*	La misma importación y las mismas llamadas: títulos, comentarios, parámetros, etiquetas, enlaces, pasos, archivos
captureOutput	La consola del navegador llega a Vitest, y cada intento recibe su stdout.log y su stderr.log
Capturas de pantalla de los fallos	Se adjuntan a los intentos fallidos; attachScreenshots: false las deja fuera

Un paso solo queda anidado bajo otro cuando empieza en la parte síncrona del cuerpo del otro: un navegador no tiene un contexto asíncrono que seguir, así que un paso que empieza después de un await no es hijo de ese paso (probara.step()).

probara.attach() en un navegador

• Espéralo con await. El navegador entrega el archivo o el cuerpo al lado Node de Vitest, que lo copia después de que vuelva la llamada. Una copia que termina cuando su prueba ya acabó no se adjunta, con una advertencia en la salida de Vitest que nombra el archivo y la prueba, y que termina con Await probara.attach() before the test ends.

• Un cuerpo (una cadena, un Uint8Array) se envía igual que en Node.

• Una ruta la lee el lado Node de Vitest, y solo donde Vite sirve archivos, con las mismas reglas que el propio Vite del proyecto:

  La ruta	Qué pasa
  Relativa	Se resuelve respecto a la raíz del proyecto (el root de Vite), no al directorio en el que se ejecuta vitest
  Dentro de las carpetas de server.fs.allow (por defecto, la raíz del workspace del proyecto)	Se copia
  Un archivo que Vite deniega: archivos .env, certificados y .git, por defecto	Se rechaza
  Incluida en el server.fs.deny propio del proyecto	Se rechaza. Esa lista sustituye los valores por defecto de Vite: vuelve a incluir en ella .env* y *.{crt,pem}
  Un enlace simbólico del proyecto que apunta fuera de las carpetas que sirve Vite	Se rechaza: Vite juzga el archivo al que apunta el enlace

  Un archivo rechazado no se copia a ningún sitio, y la prueba continúa. Una advertencia lo nombra: probara.attach() did not attach "<name>": Vite does not serve "<file>" (server.fs.allow or server.fs.deny).

• Versiones antiguas de Vite. El reporter consulta el Vite con el que se ejecuta el Vitest del proyecto. Vite 5.0 a 5.3 solo tienen una comprobación de archivos más antigua, que es la que decide entonces, con un aviso por proceso vitest: Vite <version> has no isFileLoadingAllowed (it arrived in 5.4): the browser attach follows its isFileServingAllowed. Cuando no se encuentra Vite desde el proyecto, se rechaza la ruta: Vite's file rules are not reachable from this run, so "<file>" is not served.

• El comando que usa. probara.attach() llama a un comando de navegador que el reporter añade a cada proyecto de navegador, probaraAttach; un comando tuyo con ese nombre se sustituye.

Aún no disponible

Función	Qué pasa
runCasesOnly	No se aplica a un proyecto de navegador: todas sus pruebas se ejecutan y se reportan, con una advertencia, runCasesOnly does not apply in browser mode yet: the tests of project "<name>" run and are reported
Las llamadas probara.* de una prueba test.concurrent	Se descartan, con una advertencia en la salida de Vitest, probara.<helper>() is dropped in a concurrent test: ...: un navegador no puede saber cuál de las pruebas concurrentes hizo una llamada, y una llamada nunca se da a otra prueba
La salida de consola de una prueba test.concurrent	Se deja fuera, con una advertencia, igual que en Node (salida de consola)

Escribe las pruebas que llaman a los helpers como pruebas secuenciales (test, no test.concurrent), o ejecútalas en Node, donde cada prueba concurrente conserva sus propias llamadas. Cada advertencia del modo navegador, y qué hacer con ella, está en solución de problemas.

Relacionado: Pasos y adjuntos · Diferencias con la API de Jest · Actualizar el reporter · Fuente: browser-mode.md