Comment faire facilement des tests de régression visuels sur WordPress

La semaine dernière, un ami qui gère plusieurs sites WordPress m’a appelé en panique. Une extension de routine avait cassé le menu de navigation de son client/cliente, mais il ne l’avait pas remarqué jusqu’à ce que les clients commencent à se plaindre.

C’est un problème courant que j’ai vu un nombre incalculable de fois, et c’est exactement la raison pour laquelle les tests de régression visuelle sont si importants pour les propriétaires de sites WordPress.

Les tests de régression visuels peuvent sembler compliqués. Cependant, il s’agit en fait d’une solution simple qui peut vous enregistrer des heures de vérification manuelle et prévenir des problèmes de mise en page embarrassants.

Généralement, il fonctionne en comparant automatiquement des captures d’écran de vos pages avant et après. Cela aide à attraper même les plus petites modifications visuelles qui pourraient briser l’apparence de votre site. 🔍

Dans ce guide, je vais vous afficher comment faire des tests de régression visuels sur votre site WordPress. Après avoir testé de nombreux outils et méthodes, j’ai trouvé la solution la plus fiable qui ne nécessitera aucune connaissance en codage ou expertise technique.

Qu’est-ce que le test visuel de régression et pourquoi est-il important ? 🤔

Chaque fois que vous mettez à jour votre site – qu’il s’agisse d’une mise à jour du cœur de WordPress, d’un nouveau plugin, d’une modification de thème ou d’une simple modification mineure du code – il est possible qu’un élément de l’interface publique ne soit plus à sa place.

Par exemple, un bouton peut disparaître, votre mise en page peut se briser ou une image de produit peut cesser de se charger correctement.

Le problème ? Ces bogues visuels passent souvent inaperçus jusqu’à ce qu’un internaute les signale par le biais d’un formulaire de contact ou d’une enquête de retour d’information sur la conception.

D’ici là, les dommages causés à l’expérience des utilisateurs/utilisatrices de votre site sont peut-être déjà faits.

C’est là qu’interviennent les tests de régression visuels.

Le processus est simple : prenez des instantanés de vos pages avant et après une mise à jour, puis comparez-les pour repérer tout ce qui a été modifié.

Et si vous testez sur un site staging (ce que nous recommandons), vous pouvez en toute sécurité effectuer des mises à jour et des comparaisons pour détecter les problèmes visuels avant que tout ne soit mis en direct.

La bonne nouvelle ? Vous n’avez pas à le faire manuellement.

Avec des outils de test de régression visuelle comme VRTs, Percy ou BackstopJS, vous pouvez automatiser les comparaisons de captures d’écran et vérifier l’aspect de votre site sur différentes tailles d’écran – ce qui vous aide à détecter les problèmes de mise en page sur ordinateur, tablette et mobile.

Pourquoi est-ce important pour les utilisateurs/utilisatrices de WordPress ?

Si vous gérez un site WordPress, le test de régression visuel est un filet de sécurité qui permet de gagner du temps. Au lieu de cliquer sur chaque page après une mise à jour, cet outil vous donne un rapport visuel de ce qui a été modifié – et si c’est quelque chose que vous devez corriger.

Il est particulièrement utile dans de nombreux scénarios, tels que les agences qui effectuent des mises à jour sur plusieurs sites WordPress, les indépendants qui gèrent les sites Web de leurs clients ou les propriétaires de boutiques en ligne qui veulent s’assurer que les pages de produits et de validation restent intactes.

En bref, les tests de régression visuels vous aident à éviter les surprises frustrantes, à gagner du temps et à assurer le bon fonctionnement de votre site WordPress.

Ceci étant dit, je vais partager avec vous comment faire facilement des tests de régression visuels sur WordPress. Voici un aperçu rapide de toutes les étapes que je vais couvrir dans ce guide :

Étape par étape : Installer et activer le plugin Visual Regression Testing

Dans ce tutoriel, j’utiliserai l’extension VRTs parce qu’elle est conviviale pour les débutants et super facile à utiliser pour les tests de régression visuels. Qu’il s’agisse d’une mise en page décalée, d’un bouton manquant ou d’un élément cassé après une mise à jour, VRTs vous aide à le repérer rapidement.

Voici comment cela fonctionne : L’extension effectue des captures d’écran des pages que vous sélectionnez. Vous pouvez ensuite déclencher des comparaisons manuellement ou les planifier pour qu’elles s’exécutent automatiquement après avoir apporté des modifications à votre site, comme la mise à jour d’un plugin ou l’Ajustement de votre thème.

L’extension compare ensuite les captures d’écran “avant” et “après” côte à côte et met en évidence les différences visuelles.

Ainsi, au lieu de vérifier manuellement chaque page, vous obtenez un rapport visuel rapide affichant ce qui a été modifié et si quelque chose semble inactif.

Pour installer l’extension, vous devez d’abord vous rendre sur le site des VRT et vous inscrire à une offre en cliquant sur le bouton “Premiers pas gratuits”.

Vous pouvez ensuite choisir l’une des offres. L’offre gratuite vous permet de tester jusqu’à 3 pages par jour sur un domaine et de programmer des tests quotidiens.

En revanche, les offres payantes vous permettent de tester un plus grand nombre de pages, d’effectuer des tests manuels et d’exécuter automatiquement des tests de régression visuels après les mises à jour du cœur, des plugins et des thèmes de WordPress.

Il suffit de cliquer sur “Acheter maintenant” ou “Installer maintenant” sous l’offre que vous souhaitez utiliser.

Ensuite, suivez les instructions pour ouvrir un compte sur le site de la VRT et ajoutez vos détails de paiement.

Une fois le paiement terminé, vous arrivez sur votre Tableau de bord VRTs, où vous pouvez télécharger l’extension sous forme de fichier .zip.

Il vous suffit ensuite de vous rendre dans Plugins ” Add Plugin et de cliquer sur le bouton “Téléverser un plugin”. Vous pouvez alors choisir le fichier .zip de l’extension VRTs que vous venez de télécharger.

Confirmez bien que vous avez activé l’extension une fois qu’elle a été installée. Pour plus de détails, vous pouvez consulter notre guide sur l’installation d’une extension WordPress.

Étape par étape : Définir les réglages de l’extension VRTs

Une fois l’extension activée, il est temps de configurer le moment où vos tests de régression visuels doivent s’exécuter.

Titre ” VRTs ” Réglages “ dans le menu d’administration de WordPress.

Une fois à l’intérieur, vous pouvez défiler vers le bas jusqu’à la section “Déclencheurs” – c’est là que vous indiquez à l’extension quand prendre et comparer automatiquement des instantanés.

Voici les options disponibles :

• Exécuter des Réglages toutes les 24 heures (Gratuit) – Il s’agit du réglage par défaut. Les VRT vérifieront automatiquement vos publications ou pages sélectionnées une fois par jour pour détecter les modifications visuelles.
• Misesen page après les mises à jour de WordPress et des extensions (Pro) – Idéal pour détecter les problèmes de mise en page causés par les mises à jour, dès qu’ils se produisent.
• Exécutez des tests avec vos apps préférées (Pro) – Connectez les VRT avec des outils externes ou des flux de travail à l’aide de webhooks.
• Lancer des tests à la demande (Pro) – Déclenchez manuellement des tests dès que vous en avez besoin, directement depuis votre tableau de bord WordPress.

Une fois que vous avez sélectionné le déclencheur qui correspond à votre flux de travail (ou à votre licence), il vous suffit de cliquer sur le bouton “Enregistrer les modifications” en bas de la page.

Étape par étape : Ajouter de nouvelles pages ou publications à tester

Une fois que vous avez configuré les Réglages de l’extension, il est temps de choisir les pages ou les publications que vous souhaitez inclure dans vos tests de régression visuels.

Passons maintenant à l’onglet “Tests”, où vous gérerez et exécuterez vos tests visuels.

À partir de là, vous pouvez cliquer sur le bouton “Ajouter une nouvelle”. Cela vous permettra de choisir les publications ou les pages à tester.

Dans la fenêtre surgissante, vous devez choisir les pages ou les publications sur lesquelles vous souhaitez effectuer le test de régression visuel.

Cliquez ensuite sur “Ajouter un nouveau test” pour confirmer vos sélections.

L’extension VRTs prend un instantané de chaque page sélectionnée. Il s’agit de votre base de référence, c’est-à-dire d’une version “avant” de l’aspect actuel de vos publications ou de vos pages.

Après avoir configuré votre test, vous verrez une instruction vous demandant d’actualiser la page pour charger l’instantané initial. C’est ce qu’il faut faire.

Ajouté, vous trouverez un lien vers l’instantané de la page ou de la publication que vous avez ajouté pour le test.

Vous constaterez également que l’état de l’essai est automatiquement défini sur ” Planifié ” pour le lendemain. Cela s’explique par le fait que la version gratuite de VRTs exécute les tests selon un calendrier de 24 heures.

Vous pouvez cliquer sur le lien “Voir l’instantané” pour vérifier la capture d’écran initiale.

Il s’ouvrira dans un nouvel onglet comme celui-ci :

Vous pouvez maintenant apporter toutes les modifications nécessaires à votre site. Revenez demain pour examiner la comparaison et repérer tout problème visuel inattendu.

Étape par étape : Vérifier les différences visuelles

Une fois le test terminé et les éventuels bogues visuels détectés, vous devriez voir apparaître une alerte de notification dans l’onglet VRTs ” Runs.

Une fois à l’intérieur, vous pouvez survoler la course avec les modifications détectées.

Cliquez ensuite sur le lien “Afficher les détails” lorsqu’il apparaît.

Sur l’écran suivant, vous verrez une comparaison côte à côte de votre page, affichant les versions avant et après.

L’extension met automatiquement en évidence les différences visuelles, ce qui vous permet de les repérer rapidement :

• Mises en page et éléments mal alignés: Si votre design est modifié après une mise à jour d’extension ou une modification du thème, par exemple si les boutons ne sont plus à leur place ou si le texte est mal aligné, les TRV le signaleront.
• Éléments manquants ou cassés: Qu’il s’agisse d’une image manquante, d’un bouton CTA ou d’un formulaire embarqué, les TRV permettent de repérer facilement tout ce qui disparaît de manière inattendue, ce qui est particulièrement utile pour les pages d’e-commerce ou d’atterrissage.
• Modifications inattendues du contenu: L’extension vous alertera également des modifications apportées au texte, aux liens ou aux images, afin que vous puissiez repérer les modifications non autorisées ou les erreurs de publication avant que les utilisateurs/utilisatrices ne le fassent.

Vous pouvez utiliser la Poignée au centre de l’écran pour diapositive entre l’ancienne et la nouvelle version et confirmer visuellement les modifications exactes.

Étape par étape : Avis et action

Après avoir effectué un test de régression visuel, vous pouvez prendre des mesures en fonction des résultats. Voici ce que vous pouvez faire ensuite :

• Modifier manuellement la page: Si les modifications sont mineures, vous pouvez corriger les problèmes directement en modifiant la page, par exemple en ajustant la Mise en page, en déplaçant des éléments ou en rajoutant des fonctionnalités manquantes.
• Revenir à une sauvegarde: Si les modifications sont plus importantes ou plus difficiles à corriger, vous pouvez restaurer la page à une version précédente en utilisant la sauvegarde de votre site ou l’historique des versions. Cela vous aide à éviter de laisser des problèmes sur votre site.

FAQs pour l’exécution de tests de régression visuels sur WordPress

Si vous Premiers pas avec les tests de régression visuels, vous n’êtes pas seul. Voici quelques réponses rapides à des questions courantes que j’entends souvent de la part d’utilisateurs/utilisatrices et de développeurs/développeuses WordPress.

Quelle est la différence entre les tests instantanés et les tests de régression visuels ?

Le test de l’instantané permet de vérifier si le code ou le contenu de votre site reste inchangé, un peu comme si vous enregistriez une copie de sauvegarde de la façon dont les choses sont censées se dérouler.

Les tests de régression visuels, quant à eux, se concentrent sur l’apparence de votre site. Il compare les captures d’écran avant et après les mises à jour pour détecter les modifications de la mise en page, les éléments manquants ou les bogues visuels que vous pourriez ne pas remarquer tout de suite.

Quel est le meilleur outil pour effectuer des tests de régression visuels sur WordPress ?

L’option la plus simple est l’extension VRTs – Visual Regression Tests. Il s’adresse aux débutants, ne nécessite aucun codage et s’exécute directement depuis votre Tableau de bord. De plus, il existe une version gratuite très facile à utiliser.

Comment puis-je effectuer des tests de régression manuellement ?

Les tests de régression manuels consistent à parcourir votre site et à vérifier les pages clés après y avoir apporté des modifications, comme l’installation d’une nouvelle extension ou la mise à jour de votre thème.

Vous voudrez visiter votre page d’accueil, votre page de contact, votre processus de Commande (si vous en avez un) et toutes les mises en page personnalisées pour vous assurer que tout se présente et fonctionne comme il se doit. Cette méthode fonctionne, mais elle peut prendre beaucoup de temps si vous gérez un site volumineux ou très fréquenté.

Comment accélérer les tests de régression ?

La meilleure façon d’enregistrer du temps est de l’automatiser. L’utilisation d’une extension comme VRTs – Visual Regression Tests vous permet de créer des instantanés de vos pages importantes et de les comparer rapidement après une mise à jour.

Aucun besoin de cliquer manuellement sur chaque page – l’extension se charge de la vérification visuelle pour vous.

Vous pouvez également commencer par tester les mises à jour sur un site de staging, afin de ne pas corriger les problèmes sur un site en direct.

Quelles sont les meilleures façons de tester la conception d’un site WordPress ?

Voici quelques astuces pour tester votre design WordPress :

• Utilisez un outil de régression visuelle comme les VRT – Visual Regression Tests – pour repérer les modifications de conception.
• Prévisualisez les mises à jour de votre thème et de vos extensions sur un site de staging.
• Testez sur plusieurs tailles d’écran (ordinateur de bureau, tablette et mobile).
• Utilisez les outils de développement des navigateurs pour vérifier l’aspect de votre site dans différentes fenêtres de visualisation.
• Demandez le retour des utilisateurs/utilisatrices ou des clients : ils remarquent souvent des choses qui pourraient vous échapper.

J’espère que cet article vous a aidé à apprendre comment faire des tests de régression visuels sur WordPress. Ensuite, vous pouvez consulter notre article sur la création de salles de discussion dans WordPress pour vos utilisateurs/utilisatrices et les meilleures questions de retour d’expérience utilisateur à poser aux visiteurs du site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.