Content slides

Introduction¶

Un test de régression visuel vérifie que les modifications de code n'ont pas introduit de changements visuels non désirés

Contrairement aux tests unitaires, qui vérifient la logique, les tests visuels se concentrent sur le rendu final (UI) perçu par l'utilisateur

Pourquoi utiliser les tests visuels ?¶

Cohérence de l'interface : Détecter les décalages de pixels, les erreurs de couleurs ou de polices
Effets de bord : Identifier si une modification CSS sur une page a cassé un élément sur une autre page
Validation de design : Automatiser la comparaison pour aider les équipes Produit et Design
Cross-browser : S'assurer que le rendu est identique sur Chrome, Firefox ou Safari

Pixel Comparison vs DOM Snapshots¶

Il existe deux approches principales :

Pixel Comparison (BackstopJS) : Compare deux images bit à bit
Problème : Très sensible à l'environnement (GPU, OS, polices)
DOM Snapshots (Percy) : Capture le DOM et les assets (CSS/Images)
Avantage : Le rendu est généré dans le cloud de manière stable et reproductible

BackstopJS¶

BackstopJS est un outil open-source basé sur Puppeteer qui utilise la comparaison de pixels

Points forts : Gratuit, tourne en local, rapports HTML détaillés
Points faibles : Nécessite impérativement Docker en CI pour garantir un rendu identique entre le dev et la machine de build

BackstopJS - Configuration¶

Initialisation : backstop init

{
  "id": "my_app",
  "viewports": [
    { "label": "desktop", "width": 1280, "height": 800 },
    { "label": "mobile", "width": 375, "height": 667 }
  ],
  "scenarios": [
    {
      "label": "Homepage",
      "url": "http://localhost:3000",
      "selectors": ["document"],
      "misMatchThreshold": 0.1
    }
  ],
  "engine": "puppeteer"
}

BackstopJS - Exécution¶

Création des références : Capturer l'état "OK" de l'application
```
backstop reference
```
Exécution des tests : Comparer le code actuel aux références
```
backstop test
```
Approuver les changements : Si le changement est voulu, il devient la nouvelle référence
```
backstop approve
```

BackstopJS - GitLab CI¶

Utilisation de l'image officielle pour éviter les problèmes de rendu :

visual_test:
  stage: test
  image: backstopjs/backstopjs:latest
  script:
    - backstop test --docker
  artifacts:
    when: on_failure
    paths:
      - backstop_data/html_report

BrowserStack Percy¶

Percy est une solution SaaS qui gère la complexité du rendu et de la comparaison dans le cloud

Workflow : Capture le DOM localement \(\rightarrow\) Envoi au cloud Percy \(\rightarrow\) Rendu et comparaison \(\rightarrow\) Dashboard de validation
Avantage : Parfait pour les équipes, permet d'approuver les changements via une interface web

BrowserStack Percy - Configuration¶

Installation : npm install --save-dev @percy/cli @percy/puppeteer

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

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('http://localhost:3000')

  // Capture envoyée directement à Percy
  await percySnapshot(page, 'Homepage')

  await browser.close()
})()

Exécution : npx percy exec -- node visual_test.js

BrowserStack Percy - GitLab CI¶

percy_test:
  stage: test
  image: node:lts
  variables:
    PERCY_TOKEN: $PERCY_TOKEN # Défini dans les réglages du projet
  script:
    - npm ci
    - npx percy exec -- node visual_test.js

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