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.

Les tests de régression visuelle WordPress résolvent ce problème en comparant automatiquement l'apparence de vos pages avant et après chaque modification, puis en vous alertant au moment où quelque chose change.

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 connaissance 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 cinq é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. À ce moment-là, les dommages causés à l'expérience utilisateur de votre site sont peut-être déjà 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.

Les sites WordPress sont particulièrement vulnérables aux problèmes de mise en page car ils sont assemblés à partir de nombreuses pièces indépendantes : votre thème, le constructeur de pages, les blocs et les plugins supposent tous des choses différentes sur la façon dont vos pages sont rendues.

L'un d'entre eux peut modifier discrètement l'apparence d'une page :

• Une mise à jour de plugin modifie le style d'un bouton ou d'un formulaire
• Une mise à jour du cœur de WordPress modifie la façon dont un bloc Gutenberg s'affiche
• Une mise à jour WooCommerce modifie la disposition des produits ou les champs de paiement
• Une mise à jour de thème ajuste l'espacement, les polices ou les points de rupture responsifs
• Une modification CSS personnalisée affecte plus de pages que prévu

Les tests de régression visuelle WordPress détectent ces modifications involontaires avant vos visiteurs. Au lieu de parcourir chaque page après chaque mise à jour, l'outil compare les captures d'écran avant et après et signale tout ce qui semble différent.

Pour les propriétaires de sites occupés, cela signifie la tranquillité d'esprit. Pour les agences qui gèrent les sites des clients, cela signifie détecter les régressions avant qu'un client ne vous contacte à leur sujet.

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

Pour commencer, connectez-vous au tableau de bord de votre site de staging (ou à votre site en direct, si vous préférez).

Dans ce tutoriel, j'utiliserai le plugin VRTs car il est convivial pour les débutants 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 rapidement.

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 plan en cliquant sur le bouton « Commencer gratuitement ».

Vous pouvez ensuite choisir l’un des plans.

Au moment de la rédaction, le plan gratuit vous permet de tester jusqu'à 3 pages par jour sur un seul 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 cœur de 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, consultez notre guide sur la manière d'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.

Accédez à 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 des tests à la demande (Pro) – Déclenchez manuellement des tests quand 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é, VRTs facilite la détection de tout ce qui disparaît de manière inattendue.
• Contenu dynamique (faux positifs) : Parfois, l'outil peut signaler un changement qui n'est pas une erreur. Cela se produit souvent avec les curseurs 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 apportées au texte, aux liens ou aux images, afin que vous puissiez 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.

Si la modification était intentionnelle (comme une refonte planifiée de la page d'accueil), vous pouvez simplement approuver le nouveau cliché afin que le plugin sache qu'il doit l'utiliser comme nouvelle référence à l'avenir.

Étape 5 : Examiner et agir

Après avoir exécuté un test de régression visuelle, prenez des mesures en fonction des résultats.

Une chose à savoir avant de commencer à examiner les alertes : toute différence signalée n'est pas nécessairement un bug. Parfois, une page change légitimement à chaque visite, et le test signalera également ces changements.

Ce sont ce que l'on appelle des faux positifs, et c'est la raison la plus courante pour laquelle les nouveaux utilisateurs sont frustrés par les tests de régression visuelle. Comme l'outil vérifie essentiellement si la différence de pixels est supérieure à 0 %, tout élément dynamique qui déplace les pixels déclenchera une alerte.

Voici les déclencheurs de faux positifs les plus courants sur les sites WordPress :

• Curseurs et animations(carrousels d'images, animations de héros, effets de survol)
• Données en direct(flux des derniers articles, nombre de commentaires, compteurs de stock WooCommerce)
• Placements d'annonces et traqueursqui chargent un contenu différent à chaque visite
• Bannières de consentement aux cookies ou au RGPDqui apparaissent de manière imprévisible
• Images chargées paresseusementqui peuvent ou non s'être chargées lorsque la capture d'écran a été effectuée
• Polices de caractèresqui s'affichent légèrement différemment avant qu'elles aient fini de charger

Lorsque vous voyez l'un de ces éléments signalés, ouvrez la vue de comparaison dans les VRT et utilisez l'option « masquer les éléments » pour exclure cette région des tests futurs. Après cela, vous ne verrez que les véritables changements de conception qui méritent d'être examinés – ce qui est exactement ce que vous voulez.

Voici ce que vous pouvez faire ensuite :

• Modifier la page manuellement : Si les modifications sont mineures, vous pouvez résoudre 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 changements de mise en page sont mineurs, vous pouvez souvent les annuler en restaurant la page à une version précédente. Si une mise à jour majeure a planté l'ensemble de votre site, vous devrez peut-être restaurer une sauvegarde récente de votre site Web. Mais n'oubliez pas que cela annulera toutes les données de votre site, effaçant potentiellement les ventes ou les commentaires récents.

Cela dit, notez que si vous corrigez un problème mais que le test affiche toujours l'erreur, assurez-vous de vider le cache de votre WordPress, ainsi que tout cache CDN ou d'hébergement. Ainsi, l'outil verra 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 ?

Le test de snapshot est un terme de développeur qui fait généralement référence à la vérification du code caché derrière votre site pour voir s'il correspond à une version précédente, plutôt qu'à son apparence à l'écran.

Les tests de régression visuelle vérifient l'apparence réelle 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 aucune connaissance en codage. La version gratuite convient à 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 manuellement.
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 commentaires de vrais utilisateurs ou clients peut vous aider à détecter des détails que vous pourriez manquer.

Quand dois-je exécuter des tests de régression visuelle sur mon site WordPress ?

Les meilleurs moments pour exécuter un test de régression visuelle sont juste avant et juste après tout changement susceptible d'affecter la conception de votre site. Cela inclut les mises à jour du cœur de WordPress, les mises à jour de plugins et de thèmes, les modifications CSS personnalisées et l'ajout de nouveaux blocs ou d'éléments de constructeur de pages.

Si vous n'effectuez pas de changements fréquents, des tests quotidiens planifiés suffisent pour détecter les problèmes lents, tels qu'une mise à jour de plugin qui a discrètement cassé une mise en page que vous n'aviez pas pensé à vérifier.

Qu'est-ce qui cause les faux positifs dans les tests de régression visuelle ?

Les faux positifs se produisent lorsque le test signale une différence qui n'est pas réellement un bug. Les causes les plus courantes sur les sites WordPress sont les curseurs, les animations, les emplacements publicitaires, les bannières de cookies, les images chargées paresseusement et les données en direct comme les derniers articles ou les compteurs de stock WooCommerce.

Dans les VRT, vous pouvez masquer ces éléments afin qu'ils soient exclus de la comparaison, ce qui signifie que les tests futurs ne signalent que les véritables changements de conception.

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 vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.