Comment effectuer facilement des tests de régression visuelle dans WordPress

Garder votre site WordPress tel qu'il devrait être peut être stressant. Une petite mise à jour ou une modification rapide du CSS peut subtilement casser une mise en page, et vous ne le remarquerez souvent que lorsqu'un visiteur vous le signalera.

Le plus difficile est que vérifier chaque page à la main n'est tout simplement pas pratique. Cela prend trop de temps et il est facile de manquer de petits changements. 🤦

Et bien que le « test de régression visuelle » semble technique, vous n'avez pas besoin d'outils de développement pour l'utiliser. C'est un moyen simple d'économiser des heures de vérification manuelle et d'éviter des problèmes de mise en page embarrassants.

Après avoir testé différents outils et méthodes, j'ai trouvé une option fiable qui ne nécessite aucune compétence en codage ou expertise technique. Dans ce guide, je vais vous montrer comment effectuer des tests de régression visuelle sur votre site WordPress en quelques étapes simples.

Qu'est-ce que le test de régression visuelle ?

Le test de régression visuelle est un moyen de vérifier si la conception de votre site change de manière inattendue après une mise à jour. Il fonctionne en comparant des instantanés avant et après de vos pages pour repérer tout ce qui semble différent.

Chaque fois que vous mettez à jour le cœur de WordPress, installez un plugin, changez de thème ou modifiez du code, il y a une chance que quelque chose sur le front-end puisse se décaler : un bouton manquant, une mise en page cassée ou une image qui cesse soudainement de se charger.

Le problème ? Ces bugs visuels passent souvent inaperçus jusqu'à ce qu'un visiteur les signale via un formulaire de contact ou une enquête de feedback sur la conception. D'ici là, les dommages à l'expérience utilisateur de votre site pourraient déjà être faits.

C'est pourquoi l'exécution de tests de régression visuelle est si utile.

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 changé.

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

Vous n’avez pas non plus à effectuer ces comparaisons 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'apparence de votre site sur différentes tailles d'écran — vous aidant ainsi à détecter les problèmes de mise en page sur ordinateur, tablette et mobile.

Pourquoi les tests de régression visuelle sont-ils importants pour les utilisateurs de WordPress ?

Si vous gérez un site Web WordPress, les tests de régression visuelle sont un filet de sécurité qui vous fait 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 changé – et si c’est quelque chose que vous devez corriger.

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

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

Cela dit, je vais vous montrer comment effectuer facilement des tests de régression visuelle dans WordPress. Voici un bref aperçu des étapes que nous allons couvrir :

• Étape 1 : Installer et activer le plugin de test de régression visuelle
• Étape 2 : Configurer les paramètres du plugin VRT
• Étape 3 : Ajouter de nouvelles pages ou articles à tester
• Étape 4 : Vérifier les différences visuelles
• Étape 5 : Examiner et agir
• FAQ : Comment exécuter des tests de régression visuelle dans WordPress
• Prochaines étapes : Améliorez la conception de votre site WordPress

Étape 1 : Installer et activer le plugin de test de régression visuelle

Dans ce tutoriel, j’utiliserai le plugin VRTs car il est convivial et facile à utiliser pour les tests de régression visuelle. 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 tôt.

Voici comment cela fonctionne : Le plugin prend des captures d'écran des pages que vous sélectionnez. Vous pouvez ensuite déclencher des comparaisons manuellement ou planifier leur exécution automatique après avoir apporté des modifications à votre site, telles que la mise à jour d'un plugin ou la modification de votre thème.

Le plugin compare ensuite les captures d'écran « avant » et « après » côte à côte et met en évidence toutes les différences visuelles.

Ainsi, au lieu de vérifier manuellement chaque page, vous obtenez un rapport visuel rapide montrant ce qui a changé et si quelque chose semble inhabituel.

Pour installer le plugin, vous devez d'abord visiter le site Web de VRTs et vous inscrire à un forfait en cliquant sur le bouton « Commencer gratuitement ».

Vous pouvez ensuite choisir l’un des plans.

Le plan gratuit vous permet de tester jusqu’à 3 pages par jour sur un domaine et de planifier des tests quotidiens. Les plans payants vous permettent de tester plus de pages, d’exécuter des tests manuels et d’exécuter automatiquement des tests de régression visuelle après les mises à jour du noyau WordPress, des plugins et des thèmes.

Cliquez simplement sur « Acheter maintenant » ou « Installer maintenant » sous le forfait que vous souhaitez utiliser.

Ensuite, suivez les instructions pour créer un compte sur le site Web de VRTs et ajoutez vos informations de paiement.

Une fois que vous avez terminé l’inscription, vous arriverez sur votre tableau de bord VRTs, où vous pourrez télécharger le plugin sous forme de fichier .zip.

Ensuite, rendez-vous simplement sur la page Plugins » Ajouter un plugin et cliquez sur le bouton « Télécharger un plugin ». À partir de là, vous pouvez choisir le fichier .zip du plugin VRTs que vous venez de télécharger.

Assurez-vous d'activer le plugin une fois qu'il a été installé. Pour plus de détails, vous pouvez consulter notre guide sur comment installer un plugin WordPress.

Étape 2 : Configurer les paramètres du plugin VRT

Une fois le plugin activé, il est temps de décider quand vos tests de régression visuelle doivent s'exécuter.

Allez dans VRTs » Paramètres dans votre menu d'administration WordPress.

Dans la page des paramètres, faites défiler jusqu'à la section « Déclencheurs ». C'est ici que vous indiquez au plugin quand prendre et comparer automatiquement les instantanés.

Voici les options disponibles :

• Exécuter les tests toutes les 24 heures (Gratuit) – C'est le réglage par défaut. VRTs vérifiera automatiquement vos articles ou pages sélectionnés une fois par jour pour les changements visuels.
• Exécuter les tests après les mises à jour de WordPress et des plugins (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écuter les tests avec vos applications préférées (Pro) – Connectez VRTs à des outils ou des flux de travail externes à l'aide de webhooks.
• Exécuter les tests à la demande (Pro) – Déclenchez manuellement les tests chaque fois 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), cliquez simplement sur le bouton « Enregistrer les modifications » en bas de la page.

Étape 3 : Ajouter de nouvelles pages ou articles à tester

Une fois que vous avez configuré les paramètres du plugin, il est temps de choisir les pages ou les articles que vous souhaitez inclure dans vos tests de régression visuelle.

Passons à l'onglet « Tests », où vous gérerez et exécuterez vos tests visuels. À partir de là, vous pouvez cliquer sur le bouton « Ajouter un nouveau ». Cela vous permettra de choisir les articles ou les pages à tester.

Dans la fenêtre contextuelle qui apparaît, choisissez les articles ou pages que vous souhaitez inclure dans vos tests de régression visuelle.

Ensuite, cliquez sur « Ajouter un nouveau test » pour confirmer vos sélections.

Le plugin VRT prendra un instantané initial de chaque page sélectionnée. Cela servira de référence — en gros, une version « avant » de l'apparence actuelle de vos articles ou pages.

Après avoir configuré votre test, vous verrez une instruction pour actualiser la page afin de charger l'instantané initial. Procédez à l'actualisation.

Après l'actualisation, vous verrez un lien vers l'instantané de la page ou de l'article que vous avez ajouté pour le test.

Vous verrez également que le « Statut du test » est automatiquement défini sur « Planifié » pour le lendemain. En effet, la version gratuite de VRTs exécute les tests selon un calendrier de 24 heures.

Vous pouvez cliquer sur le lien « Afficher le cliché » pour vérifier la capture d'écran initiale.

Il s'ouvrira dans un nouvel onglet comme ceci :

Si vous utilisez la version gratuite, votre test est maintenant prévu pour le lendemain. Vous pouvez continuer à travailler sur votre site et revenir dans 24 heures pour voir le rapport de comparaison.

Mais si vous avez la version Pro, vous pouvez exécuter un test immédiatement pour repérer les problèmes tout de suite.

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

Une fois le test terminé et des modifications visuelles détectées, vous verrez une notification dans l'onglet VRTs » Runs.

Sur l'écran des exécutions, vous pouvez survoler l'exécution 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, montrant les versions avant et après.

Le plugin met automatiquement en évidence les différences visuelles, vous permettant de repérer rapidement des problèmes tels que :

• Décalages de mise en page et éléments mal alignés : Si votre conception change après une mise à jour de plugin ou un changement de thème, comme des boutons qui se déplacent ou du texte qui saute, VRTs le signalera.
• Éléments manquants ou cassés : Qu'il s'agisse d'une image manquante, d'un bouton CTA, ou d'un formulaire intégré, les VRTs facilitent la détection de tout ce qui disparaît de manière inattendue.
• Contenu dynamique (faux positifs) : Parfois, l'outil peut signaler une modification qui n'est pas une erreur. Cela se produit souvent avec les glissières d'images, les publicités ou les témoignages rotatifs qui changent à chaque chargement de page.
• Modifications de contenu inattendues : Le plugin vous alertera également des modifications de texte, de liens ou d'images, vous permettant de détecter les modifications non autorisées ou les erreurs de publication avant les utilisateurs.

Vous pouvez utiliser la poignée de glissement au centre de l'écran pour faire défiler les anciennes et les nouvelles versions et confirmer visuellement les modifications exactes.

Étape 5 : Examiner et agir

Après avoir exécuté un test de régression visuelle, prenez 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 rétablissant des fonctionnalités manquantes.
• Revenir à une sauvegarde : Si les modifications sont plus importantes ou difficiles à corriger, vous pouvez restaurer la page à une version précédente en utilisant la sauvegarde de votre site Web ou son historique des versions. Cela permet d'éviter de laisser des problèmes sur votre site.

Cela dit, notez que si vous corrigez un problème mais que le test affiche toujours l'erreur, assurez-vous de vider votre cache WordPress afin que l'outil voie la dernière version de votre site.

FAQ : Comment exécuter des tests de régression visuelle dans WordPress

Si vous débutez dans les tests de régression visuelle, vous n'êtes pas seul. Voici quelques réponses rapides aux questions courantes des utilisateurs et développeurs WordPress.

Quelle est la différence entre les tests d'instantané et les tests de régression visuelle ?

Les tests d'instantané sont un terme de développeur qui fait généralement référence à la vérification si la sortie du code sous-jacent correspond à un enregistrement précédent. Les tests de régression visuelle vérifient l'apparence de votre site à l'œil humain en comparant des captures d'écran pour détecter les changements de mise en page ou de conception.

Quel est le meilleur outil pour les tests de régression visuelle dans WordPress ?

L'option la plus simple est le plugin VRTs – Visual Regression Tests. Il est convivial pour les débutants, s'exécute dans votre tableau de bord et ne nécessite aucun codage. La version gratuite fonctionne bien pour la plupart des utilisateurs.

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

Les tests manuels consistent à cliquer sur vos pages importantes après une mise à jour pour vous assurer que tout est toujours correct. Vous voudrez vérifier des pages comme votre page d'accueil, votre page de contact, vos articles de blog, et toutes les mises en page personnalisées ou les étapes de paiement. Cela fonctionne, mais cela peut prendre beaucoup de temps.

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

Automatisez-le. Un plugin comme VRTs – Visual Regression Tests peut capturer des captures d'écran de vos pages clés et les comparer pour vous, afin que vous n'ayez pas à tout vérifier à la main.
L'utilisation d'un site de staging vous aide également à détecter les problèmes avant de mettre à jour votre site en direct.

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

Un outil de régression visuelle est l'un des moyens les plus simples de repérer les changements de mise en page après une mise à jour. Il aide également à prévisualiser les mises à jour sur un site de staging avant de les mettre en ligne.

Assurez-vous de vérifier l'apparence de vos pages sur ordinateur, tablette et mobile. Les outils de développement de navigateur facilitent le test rapide de différentes tailles d'écran. Et enfin, obtenir des retours de vrais utilisateurs ou clients peut vous aider à repérer des détails que vous pourriez manquer.

Prochaines étapes : Améliorez la conception de votre site WordPress

J'espère que cet article vous a aidé à apprendre comment effectuer des tests de régression visuelle dans WordPress. Si vous souhaitez continuer à améliorer votre site, vous pourriez également aimer :

• Guide pour débutants sur la refonte d'un site Web WordPress
• Éléments de conception clés pour un site web WordPress efficace
• Comment obtenir des retours sur la conception de votre site web dans WordPress
• Comment améliorer l'expérience utilisateur dans WordPress
• Questions de retour d'expérience utilisateur à poser aux visiteurs de votre site web

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.