Guide de test visuel avec Percy –

Cet article a été créé en partenariat avec Percy . Nous vous remercions de soutenir les partenaires qui rendent SitePoint possible.

Les tests visuels permettent d’assurer la cohérence de votre interface utilisateur dans différents navigateurs et sur différentes largeurs d’écran.

La plupart des équipes de développement reposent uniquement sur des tests unitaires et d’intégration. Bien que cette pratique aide à garantir le bon fonctionnement de la logique d'application, elle ne parvient pas à détecter les défauts visuels au niveau de l'interface utilisateur. L'implémentation de ce type de test permet de détecter rapidement les problèmes visuels et de les résoudre avant la publication du produit.

Dans ce didacticiel, vous apprendrez à configurer et exécuter des tests visuels pour votre projet à l'aide de Percy [. À des fins de démonstration, nous utiliserons une application d’une page unique pilotée par une API et utilisant des données réelles. Vous apprendrez à tester visuellement les interfaces utilisateur générant des données dynamiques, ainsi que le processus d’examen et d’approbation visuels de Percy.

Conditions préalables

Les tests visuels intéressent les utilisateurs expérimentés et les utilisateurs expérimentés. Pour suivre ce didacticiel, vous devez être à l’aise pour écrire du code avec la syntaxe JavaScript ES6 +. Nous ne ferons pas de développement d'applications proprement dit, mais vous devez au moins avoir une certaine expérience de l'utilisation des bibliothèques suivantes si vous souhaitez modifier quelque chose dans le projet de démonstration que nous allons utiliser:

• Express.js + RESTful APIs [19659008] jQuery
• Axios
• Cadres CSS

Vous devez également connaître Git branching et différents types de stratégies de ramification . La connaissance de tout cadre de test vous aidera également à comprendre facilement les concepts abordés dans cet article. Vous devez disposer d’un compte GitHub pour pouvoir poursuivre ce didacticiel. Nous utiliserons ce projet de démonstration comme point de départ

À propos de Percy

Percy fournit aux développeurs une plate-forme et un flux de travail permettant d'exécuter des tests et des analyses visuels sur des applications Web, des sites statiques ou des bibliothèques de composants. . Il existe un plan gratuit qui prend en charge un nombre illimité de membres de l'équipe, 5 000 instantanés par mois (avec un historique d'un mois) et un nombre illimité de projets.

Pour commencer avec Percy, installez l'un de ses SDK dans le projet. vous voulez tester visuellement. C’est la même chose que d’installer un framework de test comme Mocha ou Jest. Ensuite, vous écrivez un script et vous l'exécutez comme vous le feriez avec n'importe quel type de test.

Toutefois, dans le cas de Percy, les instantanés DOM de votre application Web sont capturés et téléchargés pour être restitués sur l'infrastructure de Percy. Percy détecte ensuite et souligne les différences visuelles entre les instantanés nouveaux et précédents, également appelés lignes de base . Les résultats sont affichés dans Percy, où vous pouvez examiner et déterminer si l’interface utilisateur semble correcte ou doit être corrigée.

Percy restitue chaque instantané dans Chrome et Firefox et peut restituer jusqu’à dix résolutions d’écran différentes. C’est assez impressionnant, car cela est fastidieux à la main. Je vous encourage à lire les documents suivants pour mieux comprendre:

Passons maintenant à la mise en œuvre pratique du processus de test visuel. Dans cet article, nous allons:

1. mettre en place un projet de démonstration
2. mettre en place le tableau de bord du projet Percy
3. générer des instantanés Percy
4. gérer les données dynamiques avec Cypress
5. définir le flux de travaux d'approbation

commencez.

1. Configuration du projet de démonstration

Nous allons effectuer des tests visuels sur une application de gestion des devises basée sur l’API que j’ai construite précédemment. Vous pouvez trouver le tutoriel pour la construction de cette application ici si cela vous intéresse.

Sinon, rendez-vous sur ce référentiel GitHub et branchez-le sur votre compte GitHub. Ensuite, ouvrez README.md pour obtenir des instructions sur le téléchargement et la configuration du projet sur votre disque dur. Suivez-les jusqu'à ce que l'application soit en cours d'exécution sur votre machine.

Le projet est une application d'une page unique fournie par Express jQuery et Guidons . Les appels AJAX à partir de la page Web sont acheminés vers le serveur Express, qui les achemine ensuite vers les fournisseurs d'API monétaires tiers. L'application est composée de trois pages:

La page d'accueil de l'application contient les taux de change quotidiens. Les données sont actualisées à toutes les heures.

La page de taux de change vous permet de convertir une devise à une autre.

La page Taux historiques est similaire à la page Taux de change, sauf qu'elle vous permet d'afficher les taux de toutes les dates antérieures à 1999.

N'hésitez pas à consulter le code source si vous le souhaitez. , mais ce n'est pas nécessaire. L'important est de voir par vous-même comment interagir avec l'application. Dans la section suivante, nous allons automatiser cette interaction à l'aide de code pour créer les instantanés nécessaires au test visuel. Ensuite, configurons notre compte de projet Percy.

2. Configuration du tableau de bord du projet de Percy

Comme indiqué précédemment, le processus de test visuel nécessite un projet Percy permettant de réviser et d’approuver des instantanés. Pour en obtenir un, inscrivez-vous simplement sur un compte gratuit .

Une fois la procédure d'inscription terminée, vous ' Vous aurez alors la possibilité de créer un nouveau projet ou d’essayer un projet de démonstration. Cela vous mènera à travers une visite guidée qui vous montrera comment interagir avec différents éléments des outils de révision. Vous pouvez le vérifier, mais c’est facultatif.

Si vous êtes confiant pour naviguer dans le tableau de bord, faites défiler vers le haut, puis cliquez sur le bouton Create project . Entrez un nom de projet sur la page suivante: «Percy-Tutorial». Une fois que vous avez confirmé le nom, vous accédez à la page Construction, où vous pouvez configurer les paramètres de test visuel de votre projet.

associez le projet «Percy-Tutorial» au projet que vous avez précédemment créé sur votre compte GitHub. Tout d’abord, nous devons donner à Percy la permission d’accéder à nos référentiels GitHub. Les référentiels dans GitHub sont structurés en organisations. Vous devez disposer du rôle de "propriétaire" pour donner à Percy l'autorisation d'accéder à votre référentiel.

Allez à l'onglet Intégrations . Dans la section "Lier un référentiel", vous recevrez un message vous demandant "d'installer une intégration" pour votre organisation. Cliquez dessus et vous serez dirigé vers une page avec une liste des intégrations de Percy. Suivez les écrans pour configurer l’intégration de GitHub et donner accès à tous les référentiels sur lesquels vous souhaitez effectuer un test visuel. Une fois les étapes d'installation terminées, vous devez relier le projet Percy-Tutorial à votre référentiel GitHub:

Ensuite, retournez à votre projet Percy et accédez à la page Builds. Copiez le PERCY_TOKEN sous la configuration de la section CI et sauvegardez-le quelque part. Nous en aurons besoin pour la prochaine étape.

3. Générer des instantanés Percy

Maintenant que notre projet Percy est prêt à recevoir des instantanés, nous devons les générer et les télécharger vers Percy pour examen. Nous allons utiliser PercyScript pour accomplir cette tâche. Accédez au dossier dans lequel vous avez configuré le projet de démonstration. Ouvrez un terminal et installez le paquet suivant:

 npm install -D @ percy / script

PercyScript utilise Puppeteer une API de haut niveau permettant de contrôler le navigateur Chrome via le protocole DevTools. En bref, Puppeteer nous permet d’interagir avec une page Web de la même manière que les humains, mais en utilisant du code. Par exemple, nous pouvons saisir du texte, cliquer sur des boutons et des liens. Notez que le navigateur Chrome sera téléchargé dans votre dossier node_modules soyez donc patient si vous avez une connexion Internet lente.

Créez ensuite un nouveau fichier JavaScript à la racine du projet, snapshots.js et copiez ce code. Ce script créera trois instantanés pour nous, un pour chaque page. Il existe de nombreux scénarios que nous pouvons tester, mais dans un souci de simplicité, nous allons uniquement vérifier que chaque page fonctionne correctement et affiche les résultats correctement:

 const PercyScript = require ('@percy / script');

PercyScript.run (async (page, percySnapshot) => {
    / **
    | --------------------------------------- |
    | Générer des tarifs journaliers Snaphsot |
    | --------------------------------------- |
    ** /
    wait page.goto ('http: // localhost: 3000 /');
    // attend la fin de l'appel AJAX
    wait page.waitForSelector ('. loading', {
        caché: vrai
    });
    // Prendre un instantané
    wait percySnapshot ("page d'accueil");

    / **
    | --------------------------------------- |
    | Générer un instantané du taux de change |
    | --------------------------------------- |
    ** /
    wait page.goto ('http: // localhost: 3000 / exchange');
    // Attend la fin de l'appel AJAX
    wait page.waitForSelector ('. loading', {
        caché: vrai
    });
    wait page.select ('select # from', 'BTC'); // Sélectionnez Bitcoin
    wait page.select ('select # to', 'USD'); // Sélectionnez le dollar américain
    wait page.type ('# montant', '1'); // Entrer le montant
    wait page.click ('. submit'); // Appuyez sur le bouton de conversion
    // attend la fin de l'appel AJAX
    wait page.waitForSelector ('. loading', {
        caché: vrai
    });
    // Prendre un instantané
    wait percySnapshot ('échange');

    / **
    | --------------------------------------- |
    | Générer un instantané des taux historiques |
    | --------------------------------------- |
    ** /
    wait page.goto ('http: // localhost: 3000 / historical');
    // attend la fin de l'appel AJAX
    wait page.waitForSelector ('. loading', {
        caché: vrai
    });
    // Définir la date du calendrier
    wait page.evaluate (() => {
        document.getElementById ('date'). value = '2019-07-01';
    })
    // Cliquez sur le bouton Fetch Rates
    wait page.click ('. submit');
    // attend la fin de l'appel AJAX
    wait page.waitForSelector ('. loading', {
        caché: vrai
    });
    // Prendre un instantané
    wait percySnapshot ('historique');
});

Pour comprendre le script, vous devez consulter la Documentation de l’API de Puppeteer pour trouver des références aux fonctions utilisées. Vous devrez également lire les commentaires que j'ai mis en place pour comprendre le rôle de chaque ligne.

J'aimerais préciser que j'utilise Semantic UI Loader dans la devise. Projet d'application pour indiquer à l'utilisateur qu'une demande AJAX est en cours de traitement en arrière-plan. Lorsque la demande est terminée, le chargeur est masqué à l'aide de CSS. Dans le code Puppeteer, nous devons attendre la disparition du chargeur avant de pouvoir prendre un instantané.

Avant d'exécuter le script, nous devons lancer un terminal séparé pour exécuter notre application à l'aide de la commande npm start . Sinon, Percy ne pourra pas trouver et interagir avec notre application Web.

Lançons le script. Si vous utilisez Windows, je vous recommande d’utiliser Git Bash ou n’importe quel terminal sous Linux pour exécuter la commande suivante. Si vous souhaitez utiliser PowerShell ou un terminal Windows, vous devez utiliser la syntaxe appropriée pour définir les variables d'environnement:

 $ export PERCY_TOKEN = aaabbbcccdddeee # Remplacez-le par votre jeton de projet.
$ npx percy exec - node snapshots.js

Donnez-lui quelques secondes pour que les instantanés soient générés et chargés dans votre tableau de bord du projet Percy:

Un lien vers les résultats sera généré pour vous. Appuyez sur Alt + cliquez sur le lien pour ouvrir la page de création du tableau de bord. Vous pouvez également trouver les résultats directement dans Percy sous l'onglet Builds . Une fois la page ouverte, vous devrez peut-être attendre un peu pour que les résultats s'affichent. la première génération prend plus de temps, car Percy rassemble et rend les actifs pour la première fois. Comme il s'agit des premiers instantanés que vous avez téléchargés, il n'y a pas de référence à comparer pour détecter les différences visuelles.

Vous avez peut-être également remarqué que ces instantanés ont été «auto-approuvé». Le paramètre par défaut de Percy consiste à approuver automatiquement toutes les versions de test effectuées sur la branche principale. Vous pouvez modifier cela dans les paramètres de votre projet.

Les instantanés générés semblent idéaux comme base de référence pour des tests futurs. Cependant, il y a un problème. Si vous deviez déjeuner maintenant et recommencer les tests à votre retour, un différentiel visuel sera détecté même si rien n'a changé. Cela se produira sur les pages Taux quotidiens et Taux de change. La page d'historique ne sera pas affectée, car les données sont gelées sur une date passée spécifique.

Le problème est causé par l'actualisation des taux de change et l'affichage de nouveaux résultats. . C'est un gros problème, car des différences visuelles seront générées pour quelque chose de non pertinent. Nous devons geler ces données afin de pouvoir nous concentrer sur les domaines d’essai qui importent. Dans la section suivante, vous apprendrez comment procéder.

4. Gestion des données dynamiques

Si votre application traite des données dynamiques, vous pouvez la lancer dans un environnement de test dans lequel elle stockera des données fixes. Il est possible d’utiliser des bibliothèques de génération de données telles que faker.js pour ces projets. Dans notre cas, nous traitons avec des données dynamiques provenant d’une API RESTful distante du monde réel. Pour résoudre ce problème, nous devons intercepter les requêtes de l'API HTTP et remplacer les réponses par nos données locales. Puppeteer a une fonction, page.setRequestInterception (true) qui peut nous permettre de faire exactement cela.

Nous devrons intercepter les demandes de pages relatives aux taux de change quotidiens et à la conversion de devises. Lors des tests, nous fournirons les demandes avec nos données afin que les instantanés soient toujours cohérents. Mise à jour snapshots.js . Veillez à placer les données et le code de traitement fictifs en haut, comme suit:

 const PercyScript = require ('@percy / script');

const mockRates = {
  "succès": vrai,
  "horodatage": 1563176645,
  "base": "EUR",
  "date": "2019-07-15",
  "les taux": {
    "EUR": 1,
    "USD": 1.12805,
    "GBP": 0.897815,
    "AUD": 1,604031,
    "BTC": 0.00011,
    "KES": 116.200495,
    "JPY": 121.793281,
    "CNY": 7.75354
  }
};

const mockConvertRate = {
  "rate": 10244.442
}

PercyScript.run (async (page, percySnapshot) => {
  / **
  | --------------------------------------- |
  | Demande de page simulée |
  | --------------------------------------- |
  ** /

  // Activer l'interception de demande
  wait page.setRequestInterception (true);
  // Écouter chaque demande de page
  page.on ('request', request => {
    // API de taux journaliers factices
    if (request.url (). includes ('/ api / rates')) {
      request.respond ({
        statut: 200,
        contentType: "application / json; charset = utf-8",
        body: JSON.stringify (mockRates) // renvoie les données de taux fictifs
      });
    }
    // Mock Convert / Exchange API
    else if (request.url (). includes ('/ api / convert')) {
       request.respond ({
         statut: 200,
         contentType: "application / json; charset = utf-8",
         body: JSON.stringify (mockConvertRate) // retourne les données de taux de conversion
       });
    } autre {
      request.continue ();
    }
  });
}
// ...

Encore une fois, lancez vos tests Percy: npx percy exec - node snapshots.js . Donnez-lui quelques minutes. Bientôt, vous devriez avoir une version propre que nous utiliserons comme base de référence pour les futurs tests visuels.

5. Processus d'approbation

Au cours de l'élaboration d'un projet, de nombreux changements seront introduits dans l'application. Certains des changements peuvent être accidentels, d'autres intentionnels. Dans les deux cas, les modifications doivent être approuvées par un responsable de projet ou un membre de l'équipe. En supposant que vous ayez une stratégie de branchement Git en place, voici un bref aperçu de l’apparence du flux de travaux d’approbation:

1. créer une nouvelle branche de fonctionnalité
2. créer et valider des modifications dans la branche de fonction
3. créer une demande de retrait via votre Tableau de bord GitHub
4. exécuter les tests Percy
5. approuver la construction du tableau de bord Percy
6. fusionner la branche de fonction
7. créer une nouvelle ligne de base sur le maître

Faisons un peu de pratique. Nous allons commencer par créer une nouvelle branche de fonctionnalité:

 git checkout -b feature-1

Ensuite, faisons quelques changements visuels. Nous allons changer les couleurs des icônes et des boutons. Ouvrez index.html dans votre éditeur de code et utilisez la recherche-remplacement pour remplacer toutes les occurrences de orange par par vert à l'exception de celle située sous menu . Laissez cette orange. Seules les icônes devraient passer au vert. Ensuite, validez les modifications et appuyez sur votre référentiel distant:

 git add.
git commit -m "Couleur orange remplacée par du vert"
git push -u origine feature-1

Ensuite, accédez à votre page de référentiel GitHub et créez une nouvelle demande d'extraction:

Vous pouvez également cliquer sur le lien de demande d'extraction fourni. après avoir poussé la branche à distance. N'hésitez pas à commenter. Ceci fait, vous pouvez générer une nouvelle version de test visuel: npx percy exec - node snapshots.js .

Une fois le script exécuté, attendez un peu que les instantanés soient rendus dans Percy. Si vous deviez vérifier le statut de votre demande d'extraction, voici ce que vous verriez:

En cliquant sur . Détails vous amènera à Percy pour examiner. les changements visuels.

Taux journaliers diff:

Taux de change diff:

Tarifs visuel diff:

Tout est superbe. Vérifiez les modifications apportées aux navigateurs et aux largeurs de périphériques. Les changements visuels doivent être comme prévu. Vous pouvez approuver un par un ou cliquer sur le bouton Tout approuver en haut. Passez rapidement à votre tableau de bord GitHub et vous verrez la mise à jour de votre demande d'extraction:

Percy met à jour le statut des demandes d'extraction lorsque les modifications sont détectées et approuvées. Nous pouvons maintenant fusionner le PR. La dernière étape consiste à retourner à la branche principale, à la mettre à jour et à exécuter à nouveau la version de test visuel:

 git checkout master
git pull
npx percy exec - node snapshots.js

Il est nécessaire de reconstruire le test visuel sur la branche principale afin que les prochains tests utilisent cette version comme base. Voici une illustration de la manière dont les lignes de base sont sélectionnées:

Il est fastidieux de faire des tests visuels à chaque fois que nous poussons ou que nous fusionnons des branches. La bonne nouvelle est que nous pouvons automatiser ce processus en utilisant une plate-forme d'intégration continue. Exécuter des tests localement est une bonne chose, mais Percy est conçu pour faire partie des tests automatisés lancés par votre plate-forme CI. Percy prend en charge plusieurs :

• AppVeyor
• Azure Pipelines
• Buildkite
• CircleCI
• CodeShip
• Drone
• GitLab CI
• ] Travis CI

Vous pouvez également héberger votre propre serveur CI / CD sur votre réseau local. Percy soutient cela aussi. Si votre solution préférée ne figure pas dans la liste, vous pouvez discuter avec le service d'assistance Percy ou votre fournisseur de CI / CD pour le configurer.

Intégration du SDK

Avant de conclure, je voudrais mentionner qu'il y a un nombre de SDK qui vous permettent d'utiliser un cadre existant pour générer des instantanés Percy. Par exemple, si vous utilisez Cypress vous utilisez le Percy / Cypress SDK pour exploiter votre suite existante à des fins de test visuel. Voici un exemple de la manière dont nous pouvons utiliser Cypress pour générer des instantanés Percy:

 décris ('CurrencySPA', () => {

    beforeEach (() => {
        cy.server ();
        cy.route ('GET', '/ api / rates', 'fixture: rates.json'); // Réponse fictive sur les taux quotidiens

        cy.visit ('localhost: 3000');
    })

    it ('Charge les tarifs journaliers', () => {
        cy.get ('# app> h1'). devrait ('have.text', 'Taux de change'); // Confirmer le titre de l'en-tête de page
        cy.get ('. loading'). devrait ('not.be.visible');
        cy.get ('tbody> tr'). eq (0) .should ('contenir', 'EUR');
        cy.get ('tbody> tr'). eq (1) .should ('contenir', '1.12805');
        cy.percySnapshot ();
    });

    it ('Convertir devise', () => {
        cy.route ('POST', '/ api / convert', {// Réponse simulée de conversion monétaire
            "rate": 10244.442
        });
        cy.get ('. menu> a: nth-child (3)'). click (); // Cliquez sur le menu Exchange Rates
        cy.get ('# app> h1'). should ('have.text', 'Taux de change'); // Confirmer le titre de l'en-tête de page
        cy.get ('. loading'). devrait ('not.be.visible');
        cy.get ('# de'). select ('BTC');
        cy.get ('# à'). sélectionnez ('USD');
        cy.get ('# montant'). type ('1');
        cy.get ('. submit'). click ();
        cy.get ('# result'). should ('have.text', 'USD 10244.442');
        cy.percySnapshot ();
    });

    it ('Charge les taux historiques', () => {
        cy.get ('. menu> a: nth-child (4)'). click (); // Cliquez sur le menu Tarifs historiques
        cy.get ('# app> h1'). devrait ('have.text', 'Taux historiques'); // Confirmer le titre de l'en-tête de page
        cy.get ('# date')
            .type ('2019-07-02') // Reviendra au 2019-07-01 (bug connu)
            .brouiller();
        cy.get ('. submit'). click ();
        cy.get ('table'). devrait ('be.visible');
        cy.percySnapshot ();
    });
});

Bien soigné, n'est-ce pas?

Il existe également d'autres intégrations de test de bout en bout que Percy prend en charge. Pour une liste complète des intégrations, vous devriez consulter la page du SDK de Percy . Vous pouvez également créer votre propre SDK s’il n’ya pas d’alternative à la technologie que vous utilisez.

Résumé

J'espère que vous avez maintenant confiance en votre capacité à mettre en œuvre des tests visuels. Dans ce didacticiel, nous avons présenté un changement de fonctionnalité simple dans lequel les modifications visuelles étaient prévues, mais vous pouvez imaginer que les tests visuels aident également à détecter les modifications visuelles inattendues.

Dans les deux cas, les tests visuels fournissent un niveau de couverture d'assurance-chômage impossible. avec des tests fonctionnels et avec le flux de travail de Percy, vous pouvez obtenir cette couverture sur chaque demande d'extraction

Grâce à la technologie de test visuel, vous pouvez désormais disposer d'une couverture de test à 100% pour vos projets. Bien que cela ne soit pas une garantie que les problèmes ne disparaîtront pas, Percy réduira considérablement le risque que votre équipe ne distribue des produits aux utilisateurs finaux présentant des défauts.

J'écris un code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.