Saltar al contenido principal

Pruebas visuales

TestCafe crea una captura de pantalla del elemento dado y la compara con una tomada anteriormente. Ejecuta las pruebas utilizando navegadores específicos.

Ejecución de pruebas visuales​

  1. Inicie su aplicación: 
    npm start
  2. Hay un archivo “.env” en la carpeta raíz donde puede proporcionar una URL para la aplicación que se va a probar. Por defecto es DEPLOY_URL=localhost:3000. 
    export DEPLOY_URL='http://localhost:3000'
  3. Comience las pruebas: 
    npm run visual-tests
    También puede seleccionar el navegador: 
    npm run visual-tests -- --browser=safari
  4. Preparar el informe: 
    npm run prepare-visual-report
    Cuando ejecute este comando, se abre una página en su explorador antes de que el informe esté listo. Una vez que el comando termine de ejecutarse, actualice la página para obtener el informe completo.

Cómo escribir pruebas visuales​

Los siguientes métodos de ayudantes para pruebas visuales están disponibles en el paquete de pruebas e2e de Jutro:

import {
  takeScreenShot, // Takes a screenshot of the component
  getTestMetadata, // Searches for the metadata of the test
  matchImageSnapshot, // Checks if given screenshots are matching
  generateSingleTestReport, // Generates a test report
  verifyVisualSnapshot, // Takes a snapshot for the given selector and checks if it's matching with the previous
} from '@jutro/lab-preview-test-e2e';

En la aplicación de Jutro, encontrará un ejemplo de una configuración sencilla de pruebas visuales:

const getUrl = (url = '') => `${process.env.DEPLOY_URL}/${url}`;
const isVisible = (selector) => selector.with({ visibilityCheck: true }).exists;

fixture`Jutro App`.beforeEach(async () => {
  // use Testcafe Role initializer to login to or open your app (https://devexpress.github.io/testcafe/documentation/guides/advanced-guides/authentication.html)
  await openJutroApplication();
});

test('Codeless Form page', async (t) => {
  //  Testcafe selector (https://devexpress.github.io/testcafe/documentation/reference/test-api/selector/constructor.html)
  const codelessForm = screen.getByTestId('codeless-form');

  await t.navigateTo(getUrl()); // pass the page URL you want to test into the `getUrl` if needed
  await t.expect(isVisible(codelessForm)).ok(); // wait till the element on the page is visible

  // takes a visual snapshot for the selector and verifies if it matches with the previous one
  await verifyVisualSnapshot(t, codelessForm);
});

Cómo realizar un seguimiento de las pruebas visuales​

Utilizamos capturas de pantalla para hacer la comparación visual de las páginas web. Es muy importante tomar estas capturas de pantalla en un entorno controlado (utilizando el mismo navegador, sistema operativo y resolución de pantalla), ya que el navegador renderiza la página web de forma diferente en distintos sistemas operativos y tamaños de pantalla.

Para asegurarse de que las pruebas sean uniformes, puede ejecutarlas en imágenes de Docker.