Empezando con Allure Vitest

Genera hermosos informes HTML usando Allure Report y tus pruebas de Vitest.

Ejemplo de Allure Report Vitest

INFO

Consulta los proyectos de ejemplo en github.com/allure-examples para ver Allure Vitest en acción.

Configuración

1. Prepara tu proyecto

Asegúrate de que Node.js esté instalado.
Allure Vitest está probado con Node.js 18 y versiones superiores. Las versiones anteriores pueden funcionar, pero no podemos garantizarlo.
Abre una terminal y ve al directorio del proyecto. Por ejemplo:
bash
```
cd /home/user/myproject
```
Asegúrate de que Allure Report esté instalado. Si no lo está, sigue las instrucciones de instalación. Ten en cuenta que Allure Report requiere Java.
Instala el adaptador Allure Vitest y asegúrate de que todos los paquetes que necesita estén instalados.
npmyarnpnpm
bash
```
npm install --save-dev vitest @vitest/runner allure-vitest
```
bash
```
yarn add --dev vitest @vitest/runner allure-vitest allure-js-commons
```
bash
```
pnpm install --dev vitest @vitest/runner allure-vitest
```
WARNING
Si ejecutas las pruebas y ves el error “no vitest context is detected”, asegúrate de que los paquetes vitest y @vitest/runner estén ambos listados en las devDependencies de tu proyecto y tengan la misma versión.

Modifica tu archivo de configuración de Vitest, por ejemplo, vitest.config.ts.

En la lista de archivos de configuración, agrega "allure-vitest/setup" (para la mayoría de los administradores de paquetes) o require.resolve("allure-vitest/setup") (para Yarn PnP).
En la lista de reporteros, agrega "allure-vitest/reporter".
Opcionalmente, especifica resultsDir y otras opciones para el reportero. Consulta la configuración de Allure Vitest para más detalles.

Normal configurationConfiguration for Yarn PnP

import AllureReporter from "allure-vitest/reporter";
import { defineConfig } from "vitest/config";

export default defineConfig({
  test: {
    setupFiles: ["allure-vitest/setup"],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          resultsDir: "allure-results",
        },
      ],
    ],
  },
});

import AllureReporter from "allure-vitest/reporter";
import { defineConfig } from "vitest/config";

const require = createRequire(import.meta.url);

export default defineConfig({
  test: {
    setupFiles: [require.resolve("allure-vitest/setup")],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          resultsDir: "allure-results",
        },
      ],
    ],
  },
});

2. Ejecuta las pruebas

Ejecuta tus pruebas de Vitest de la misma manera que lo harías normalmente. Por ejemplo:

npmyarnpnpm

bash

npm test

bash

yarn test

bash

pnpm test

Esto guardará los datos necesarios en allure-results u otro directorio, según la configuración. Si el directorio ya existe, los nuevos archivos se agregarán a los existentes, para que un informe futuro se base en todos ellos.

3. Genera un informe

Finalmente, ejecuta Allure para convertir los resultados de las pruebas en un informe HTML. Esto abrirá automáticamente tu navegador para ver el informe.

bash

allure serve allure-results

Si es necesario, reemplaza allure-results con la ruta al directorio especificado en la configuración.

Existen algunas opciones que pueden afectar cómo se genera el informe. Ejecuta allure --help para ver la lista completa de opciones.

Escribir pruebas

El adaptador Allure Vitest extiende las características estándar de informes de Vitest al proporcionar capacidades adicionales para crear pruebas más informativas y estructuradas. Esta sección resalta las mejoras clave que pueden ser utilizadas:

Anotación de Metadatos: Mejora los informes de pruebas con descripciones, enlaces y otros metadatos.
Organización de Pruebas: Estructura tus pruebas en jerarquías claras para una mejor legibilidad y organización organizar pruebas.
División en Pasos: Divide las pruebas en pasos de prueba más pequeños para facilitar su comprensión y mantenimiento.
Pruebas Parametrizadas: Describe claramente los parámetros para las pruebas parametrizadas para especificar diferentes escenarios.
Establecer etiquetas globalmente: Usa variables de entorno para establecer metadatos y otras etiquetas.
Adjuntos: Captura automáticamente capturas de pantalla y otros archivos durante la ejecución de las pruebas.
Selección de Pruebas: Usa un archivo de plan de pruebas para seleccionar qué pruebas ejecutar, permitiendo una ejecución flexible de las pruebas.
Detalles del Entorno: Incluye información completa del entorno para acompañar el informe de la prueba.

En la mayoría de los casos, Allure Vitest proporciona dos formas diferentes de usar una característica: la API en tiempo de ejecución y la API de metadatos.

API en tiempo de ejecución: usa las funciones de Allure para agregar ciertos datos al resultado de la prueba durante su ejecución. Este enfoque permite construir los datos dinámicamente.
Ten en cuenta que se recomienda llamar a las funciones de Allure lo más cerca posible del inicio de la prueba. De esta manera, los datos se agregarán incluso si la prueba falla temprano.
API de metadatos: agrega una etiqueta de metadatos (comenzando con @) en el nombre de la prueba. Allure Vitest la extraerá y actualizará los datos del resultado de la prueba en consecuencia. Al usar este enfoque, los datos se agregarán independientemente de cómo se ejecute la prueba.

Agregar Metadatos

Allure te permite enriquecer tus informes con una variedad de metadatos. Esta información adicional proporciona contexto y detalles para cada prueba, mejorando la utilidad del informe. Consulta la sección de referencia de metadatos para obtener una lista exhaustiva de lo que se puede agregar.

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.displayName("Test Authentication");
  await allure.owner("John Doe");
  await allure.tags("Web interface", "Authentication");
  await allure.severity("critical");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.owner:JohnDoe" +
    " @allure.label.tag:WebInterface" +
    " @allure.label.tag:Authentication" +
    " @allure.label.severity:critical",
  async () => {
    // ...
  },
);

Organizar pruebas

Como se describe en Mejorar la navegación en tu informe de pruebas, Allure admite múltiples formas de organizar las pruebas en estructuras jerárquicas.

Para especificar la ubicación de una prueba en la jerarquía basada en comportamiento:

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.epic("Web interface");
  await allure.feature("Essential features");
  await allure.story("Authentication");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.epic:WebInterface" +
    " @allure.label.feature:EssentialFeatures" +
    " @allure.label.story:Authentication",
  async () => {
    // ...
  },
);

Para especificar la ubicación de una prueba en la jerarquía basada en suites:

Runtime APIMetadata API

import * as allure from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.parentSuite("Tests for web interface");
  await allure.suite("Tests for essential features");
  await allure.subSuite("Tests for authentication");
  // ...
});

import { test } from "vitest";

test(
  "Test Authentication" +
    " @allure.label.parentSuite:TestsForWebInterface" +
    " @allure.label.suite:TestsForEssentialFeatures" +
    " @allure.label.subSuite:TestsForAuthentication",
  async () => {
    // ...
  },
);

Dividir una prueba en pasos

Para crear pasos y sub-pasos, puedes usar la función step(), consulta la referencia.

import * as allure from "allure-js-commons";
import { Status } from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  await allure.step("Step 1", async () => {
    await allure.step("Sub-step 1", async (ctx) => {
      await ctx.parameter("foo", "1");
      // ...
    });
    await allure.step("Sub-step 2", async (ctx) => {
      await ctx.parameter("foo", "2");
      // ...
    });
  });
  await allure.logStep("Step 2", Status.SKIPPED);
});

Describir pruebas parametrizadas

Dado que las pruebas en Vitest, a diferencia de otros marcos, se escriben como funciones anónimas, es muy fácil implementar el patrón de pruebas parametrizadas, es decir, ejecutar la misma lógica de prueba con diferentes datos de prueba. Para hacerlo, simplemente escribe la prueba dentro de un bucle y usa los parámetros de la variable tanto en su título como en su cuerpo.

Para mostrar el valor de un parámetro en el informe de prueba, pásalo a la función parameter().

Using test()Using test.each()

import * as allure from "allure-js-commons";
import { test } from "vitest";

for (const login of ["johndoe", "[email protected]"]) {
  test(`Test Authentication as ${login}`, async () => {
    await allure.parameter("login", login);
    await allure.parameter("time", new Date().toUTCString(), { excluded: true });
    // ...
  });
}

import * as allure from "allure-js-commons";
import { test } from "vitest";

test.each(["johndoe", "[email protected]"])("Test Authentication as %s", async (login) => {
  await allure.parameter("login", login);
  await allure.parameter("time", new Date().toUTCString(), { excluded: true });
  // ...
});

Establecer etiquetas globalmente

Cualquier etiqueta, incluidas las personalizadas, se puede establecer mediante las variables de entorno en tu sistema operativo. Aquí tienes un ejemplo (suponiendo que usas el administrador de paquetes npm):

MacOS/LinuxWindows

bash

export ALLURE_LABEL_epic=WebInterface
npm test

powershell

$Env:ALLURE_LABEL_epic = "WebInterface"
npm test

Adjuntar capturas de pantalla y otros archivos

En los informes de Allure, tienes la capacidad de adjuntar varios tipos de archivos, lo que puede mejorar significativamente la comprensión del informe. Una práctica común es adjuntar capturas de pantalla que capturen el estado de la interfaz de usuario en momentos específicos durante la ejecución de las pruebas.

Para obtener instrucciones detalladas sobre cómo implementar los adjuntos, consulta la sección de adjuntos en la referencia de Allure Vitest.

import * as allure from "allure-js-commons";
import { ContentType } from "allure-js-commons";
import { test } from "vitest";

test("Test Authentication", async () => {
  // ...

  await allure.attachment("Text file", "This is the file content.", ContentType.TEXT);

  await allure.attachmentPath("Screenshot", "/path/to/image.png", {
    contentType: ContentType.PNG,
    fileExtension: "png",
  });
});

Seleccionar pruebas mediante un archivo de plan de pruebas

Si la variable de entorno ALLURE_TESTPLAN_PATH está definida y apunta a un archivo existente, Vitest solo ejecutará las pruebas listadas en este archivo.

Aquí tienes un ejemplo de cómo ejecutar pruebas según un archivo llamado testplan.json (suponiendo que uses el administrador de paquetes npm):

MacOS/LinuxWindows

bash

export ALLURE_TESTPLAN_PATH=testplan.json
npm test

powershell

$Env:ALLURE_TESTPLAN_PATH = "testplan.json"
npm test

Información del entorno

En la página principal del informe, puedes recopilar diversa información sobre el entorno en el que se ejecutaron las pruebas. Para hacerlo, edita el objeto environmentInfo en la configuración.

Por ejemplo, es una buena idea usar esto para recordar la versión del sistema operativo y la versión de Node.js obtenidas de los objetos os y process. Esto puede ayudar al lector futuro a investigar errores que solo son reproducibles en algunos entornos.

Widget de Entornos en Allure Report

import { createRequire } from "node:module";
import * as os from "node:os";
import { defineConfig } from "vitest/config";

const require = createRequire(import.meta.url);

export default defineConfig({
  test: {
    setupFiles: [require.resolve("allure-vitest/setup")],
    reporters: [
      "verbose",
      [
        "allure-vitest/reporter",
        {
          environmentInfo: {
            os_platform: os.platform(),
            os_release: os.release(),
            os_version: os.version(),
            node_version: process.version,
          },
        },
      ],
    ],
  },
});

Ten en cuenta que si tu lanzamiento incluye múltiples ejecuciones de Vitest (consulta Cómo funciona), Allure Vitest solo guardará la información del entorno de la última ejecución.

Empezando con Allure Vitest

Configuración

1. Prepara tu proyecto

2. Ejecuta las pruebas

3. Genera un informe

Escribir pruebas

Agregar Metadatos

Organizar pruebas

Dividir una prueba en pasos

Describir pruebas parametrizadas

Establecer etiquetas globalmente

Adjuntar capturas de pantalla y otros archivos

Seleccionar pruebas mediante un archivo de plan de pruebas

Información del entorno

Powered by

Únete a nuestro boletín

Allure TestOps

Compañía

Empezando con Allure Vitest ​

Configuración ​

1. Prepara tu proyecto ​

2. Ejecuta las pruebas ​

3. Genera un informe ​

Escribir pruebas ​

Agregar Metadatos ​

Organizar pruebas ​

Dividir una prueba en pasos ​

Describir pruebas parametrizadas ​

Establecer etiquetas globalmente ​

Adjuntar capturas de pantalla y otros archivos ​

Seleccionar pruebas mediante un archivo de plan de pruebas ​

Información del entorno ​

Powered by

Únete a nuestro boletín

Allure TestOps

Compañía

Empezando con Allure Vitest

Configuración

1. Prepara tu proyecto

2. Ejecuta las pruebas

3. Genera un informe

Escribir pruebas

Agregar Metadatos

Organizar pruebas

Dividir una prueba en pasos

Describir pruebas parametrizadas

Establecer etiquetas globalmente

Adjuntar capturas de pantalla y otros archivos

Seleccionar pruebas mediante un archivo de plan de pruebas

Información del entorno