Tests visuels

TestCafe crée une capture d'écran de l'élément donné et la compare à une capture d'écran prise précédemment. Vous exécutez les tests en utilisant des navigateurs spécifiques.

Exécution de tests visuels

1. Démarrez votre application :

   npm start

2. Le dossier racine contient un fichier « .env » où vous pouvez indiquer une URL pour l'application à tester. Par défaut, il s'agit de DEPLOY_URL=localhost:3000.

   export DEPLOY_URL='http://localhost:3000'

3. Démarrez les tests :

   npm run visual-tests

   Vous pouvez également sélectionner le navigateur :

   npm run visual-tests -- --browser=safari

4. Préparez le rapport :

   npm run prepare-visual-report

   Lorsque vous exécutez cette commande, une page s'ouvre dans votre navigateur avant que le rapport ne soit prêt. Une fois l'exécution de la commande terminée, actualisez la page pour obtenir le rapport complet.

Comment rédiger des tests visuels

Les méthodes d'applications auxiliaires suivantes pour les tests visuels sont disponibles dans le package de tests de bout en bout 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';

Dans l'application Jutro, vous pouvez trouver un exemple de configuration simple de tests visuels :

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);
});

Comment suivre les tests visuels

Nous utilisons des captures d'écran pour comparer visuellement des pages Web. Il est très important de réaliser ces captures d'écran dans un environnement contrôlé (en utilisant le même navigateur, le même système d'exploitation et la même résolution d'écran), car le navigateur restitue la page Web différemment selon le système d'exploitation et la taille de l'écran.

Pour vous assurer que vos tests sont cohérents, vous pouvez les exécuter dans des images Docker.