Content slides

Introduction¶

Un test de régression visuel est un type de test logiciel utilisé pour vérifier que les modifications de code n'ont pas introduit de changements visuels non désirés dans une application.

Contrairement aux tests unitaires ou fonctionnels, qui vérifient la l**ogique et le fonctionnement du code**, les tests de régression visuels se concentrent sur l'apparence de l'application.

Pourquoi¶

Assurent la cohérence de l'interface : Ils aident à détecter les changements visuels inattendus, comme les décalages, les modifications de couleurs, ou les erreurs d'affichage, qui peuvent survenir lors d'une mise à jour ou d'un changement de code.
Identifient les effets de bord visuels : Parfois, une modification de style ou une nouvelle fonctionnalité peut impacter des éléments visuels ailleurs dans l'application. Les tests visuels permettent de repérer ces effets de bord.
Accélèrent les validations de design : En automatisant la comparaison des interfaces visuelles, ces tests facilitent le travail des équipes de design et de développement en fournissant rapidement un retour sur les différences.
Réduisent les risques d'erreur en production : Une interface cohérente est essentielle pour l'expérience utilisateur. Ces tests aident à éviter que des problèmes visuels n'atteignent les utilisateurs finaux, en validant les interfaces avant chaque déploiement.

Fonctionnement¶

Les tests de régression visuels comparent l’apparence de l'application actuelle avec une version de référence. Lorsqu’un test est lancé :

Des captures d'écran de certaines pages ou composants sont prises.
Ces captures sont comparées aux captures de référence. Les différences sont calculées au niveau des pixels, et des différences significatives sont identifiées.
Un rapport de test visuel est généré, montrant les différences détectées, souvent avec un code de couleur pour distinguer les modifications.

BackstopJS¶

BackstopJS est un outil de tests de régressions visuels qui utilise des captures d’écran et un système de comparaison basé sur des différences de pixels.

Il est basé sur Puppeteer et Chrome pour prendre des captures d'écran, ce qui permet de tester des pages web en local.

BackstopJS - Configuration¶

Initialiez le projet

backstop init

Configurer le projet

{
  "id": "project_name",
  "viewports": [
    {
      "label": "desktop",
      "width": 1280,
      "height": 800
    }
  ],
  "scenarios": [
    {
      "label": "Homepage",
      "url": "https://www.votresite.com",
      "selectors": ["document"],
      "misMatchThreshold": 0.1
    }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "puppeteer",
  "asyncCaptureLimit": 5,
  "asyncCompareLimit": 50
}

BackstopJS - Execution¶

Création des images de référence : pour prendre les captures d’écran de référence, exécutez :

backstop reference

Exécution des tests : pour comparer les captures actuelles avec celles de référence :

backstop test

Affichage des résultats : un rapport HTML sera généré dans backstop_data/html_report. Utilisez backstop openReport pour le visualiser.

BackstopJS - GitlabCI¶

image: node:14

stages:
  - visual_test

visual_test:
  stage: visual_test
  script:
    - npm install -g backstopjs
    - backstop test || (echo "Visual differences detected" && exit 1)
  artifacts:
    paths:
      - backstop_data/html_report

Browerstack Percy¶

Browserstack Percy est une solution de tests visuels hébergée qui simplifie le processus de comparaison des captures d’écran.

Il permet d'effectuer des tests dans divers navigateurs et résolutions, et fournit un dashboard pour gérer les différences visuelles.

Browerstack Percy - Configuration¶

npm install --save-dev @percy/cli @percy/puppeteer
Percy utilise une variable d’environnement PERCY_TOKEN pour s'authentifier. Ajoutez votre jeton Percy à vos variables d'environnement GitLab CI.
Configuration

// visual_test.js
const Percy = require('@percy/puppeteer');
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.votresite.com');

  // Prendre une capture d'écran avec Percy
  await Percy.screenshot(page, 'Homepage');

  await browser.close();
})();

Pour exécuter des tests Percy localement
```
npx percy exec -- node visual_test.js
```

Browerstack Percy - GitlabCI¶

image: node:14

stages:
  - visual_test

variables:
  PERCY_TOKEN: "<votre_token_percy>"

visual_test:
  stage: visual_test
  script:
    - npm install
    - npx percy exec -- node visual_test.js

☕️ Si tu souhaites soutenir mon travail, tu peux m'offrir un café ici.