# Modo navegador de Vitest > Reporta las pruebas que Vitest ejecuta en un navegador con @probara/vitest-reporter — el proveedor de cada versión de Vitest, qué funciona como en Node, probara.attach() y las reglas de archivos de Vite, y qué aún no está disponible. Las pruebas que se ejecutan en un navegador (el [modo navegador de Vitest](https://vitest.dev/guide/browser/)) 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](https://docs.probara.net/es/developers/ci-integrations/vitest/#3-añádelo-a-la-configuración-de-vitest)): | 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](https://docs.probara.net/es/developers/ci-integrations/vitest/results-and-retries/#reintentos-y-repeticiones) | Cada intento es un resultado | | Los [helpers `probara.*`](https://docs.probara.net/es/developers/ci-integrations/vitest/metadata/) | La misma importación y las mismas llamadas: títulos, comentarios, parámetros, etiquetas, enlaces, pasos, archivos | | [`captureOutput`](https://docs.probara.net/es/developers/ci-integrations/vitest/steps-and-attachments/#salida-de-consola) | La consola del navegador llega a Vitest, y cada intento recibe su `stdout.log` y su `stderr.log` | | [Capturas de pantalla de los fallos](https://docs.probara.net/es/developers/ci-integrations/vitest/steps-and-attachments/#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()`](https://docs.probara.net/es/developers/ci-integrations/vitest/steps-and-attachments/#probarastep)). ## `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 "": Vite does not serve "" (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 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 "" 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`](https://docs.probara.net/es/developers/ci-integrations/vitest/run-selection/) | 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 "" run and are reported` | | Las llamadas `probara.*` de una prueba `test.concurrent` | Se descartan, con una advertencia en la salida de Vitest, `probara.() 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](https://docs.probara.net/es/developers/ci-integrations/vitest/steps-and-attachments/#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](https://docs.probara.net/es/developers/ci-integrations/vitest/troubleshooting/#modo-navegador). Relacionado: [Pasos y adjuntos](https://docs.probara.net/es/developers/ci-integrations/vitest/steps-and-attachments/) · [Diferencias con la API de Jest](https://docs.probara.net/es/developers/ci-integrations/vitest/metadata/#diferencias-con-la-api-de-jest) · [Actualizar el reporter](https://docs.probara.net/es/developers/ci-integrations/vitest/migrating/#actualizar-el-reporter) · Fuente: [browser-mode.md](https://github.com/cynch-me/probara-sdk/blob/main/packages/vitest-reporter/docs/browser-mode.md)