Comment vérifier la non régression visuelle avec Cypress.js et Gitlab CI après un déploiement ?

Nous avions publié il y a quelques temps un article sur la mise en place de Cypress.js dans Gitlab CI, dans le but de faire des tests end-to-end. Aujourd’hui, je vous explique comment on peut assurer la non régression visuelle avec Cypress.js & Gitlab CI après un déploiement. 

Pourquoi tester la non régression visuelle ?

Sur nos projets, nous utilisons Cypress.js pour faire des tests fonctionnels, mais cela ne suffit pas à s’assurer de toute la non régression.

Les tests Cypress.js vont vérifier qu’une fonctionnalité fonctionne, sans vraiment se soucier de l’emplacement des éléments.
Par exemple :

• le test va remplir le champ input d’un formulaire sans se soucier s’il est affiché au bon endroit.
• le test va cliquer sur un lien sans vérifier qu’il est bien positionné dans la page.

La non régression visuelle permet de vérifier que chaque élément est bien positionné là où il doit se trouver.

Les tests peuvent être lancés en mode desktop, mais aussi en mode responsive, tablette et mobile.
On peut réaliser des actions avant les captures d’écran, comme se loguer par exemple, pour les pages en mode connecté.

C’est pourquoi à Kaliop, on combine les 2 : les tests de non régression fonctionnelle et les tests de non régression visuelle.

Le principe des tests de non régression

Le process que nous utilisons pour les déploiements sur un environnement est le suivant :

• On vérifie la branche à déployer par les tests fonctionnels.
• On va prendre des captures d’écran de certaines page du site sur l’environnement cible.
• On déploie.
• On reprend les mêmes captures d’écran sur l’environnement une fois le déploiement terminé.
• Les captures d’écran avant et après déploiement sont automatiquement comparées.

En cas d’erreur, on est alerté par email et/ou par slack.

Concrètement, comment ca marche ?

Pour cela nous utilisons :

• Gitlab CI
• Cypress.js
• le plugin de Cypress.js : cypress-visual-regression

Après avoir installé Cypress, il faut donc installer le plugin cypress-visual-regression.

npm install cypress-visual-regression

Il faut l’ajouter dans le fichier index.js du folder plugins de cypress :

const getCompareSnapshotsPlugin = require("cypress-visual-regression/dist/plugin");
 
module.exports = on => {
 getCompareSnapshotsPlugin(on);
};

Dans le Cypress.json, on ajoute le path des screenshots :

"screenshotsFolder": "cypress/snapshots/actual"

Pour définir les pages à prendre en capture d’écran, on utilise un fichier json dans les fixtures de Cypress.js. Par exemple :

{
   "url": "/",
   "name": "HomePage"
 },
 {
   "url": "/monArticle1",
   "name": "article"
 },
 {
   "url": "/maNews1",
   "name": "news"
 },
 {
   "url": "/contactus",
   "name": "contactPage"
 }
]

Nous prenons en général une page par type d’objet, ainsi que des pages spécifiques du site, comme par exemple la page register, page de contact, et les pages les plus critiques pour le client : pages les plus visitées, pages qui représentent le plus de business, etc.

Le test Cypress.js qui va prendre les screenshots est le suivant :

describe("Screenshot Non regression", function() {
 it("screenshot", function() {
   cy.fixture(
     "screenshots/pages-www-" + Cypress.env("testEnv") + ".json"
   ).then($pageToCheck => {
     $pageToCheck.forEach(page => {
       cy.visit(Cypress.env("webSiteUrl") + page.url);
       cy.compareSnapshot(page.name);
     });
   });
 });
});
 

Pour chaque page présente dans le json, on va prendre la capture d’écran et la sauvegarder dans le folder spécifié dans le Cypress.json.

C’est le même test qui va être appelé avant et après le déploiement, ce sont les paramètres passés au test qui vont indiquer si on prend uniquement une capture d’écran ou si on fait aussi de la comparaison.

Tout est donc géré coté Gitlab CI.
Pour lancer les tests avant déploiement :

 - $(npm bin)/cypress run --spec "cypress/integration/screenshot.js" --env type=base --config screenshotsFolder=cypress/snapshots/base
 artifacts:
   when: always
   paths:
     - ${PATH_SCREENSHOTS_ARTEFACTS}

Le build pour les screenshot après déploiement dépend du build de screenshot avant le déploiement.

dependencies:
   - screenshot_before_deploy_validation
 script:
   - $(npm bin)/cypress run --spec "cypress/integration/sreenshot.js" --env type=actual
 artifacts:
   when: always
   paths:
     - ${PATH_SCREENSHOTS_ARTEFACTS}

Attention au faux négatifs

Il arrive régulièrement au départ que l’on ait des faux négatifs. Mais on peut gérer cela avec les options du plugin : on peut indiquer par exemple quels blocs de la page on veut capturer et/ou lesquels on veut retirer de la comparaison.

Les screenshots sont très utiles en mode run ou en fin de projet build quand le produit est assez avancé.
Les pages sont ajoutées au fur et à mesure de l’avancement du projet, on ne met dans les pages à tester que les pages qui sont finalisées.

Couplés à des tests automatiques fonctionnels, les screenshot apportent un vrai plus à la qualité sur le projet. Ils permettent de s’assurer que les livraisons n’ont pas impacté la qualité du site.