La mise à jour de votre boutique WooCommerce est une chose sérieuse car vous risquez de casser certaines fonctionnalités qui pourraient avoir un effet négatif sur vos résultats ou simplement sur le fonctionnement de votre site.

Il y a quatre écoles de pensée parmi les propriétaires de boutiques pour les mises à jour de WooCommerce :

  • Le Cowboy : Ces propriétaires de boutiques ont cliqués sur « mettre à jour » sans réfléchir. Puis leurs boutiques s’effondrent.
  • La pomme de terre du canapé : Ceux qui ignorent tout simplement les mises à jour, les traitant comme si elles n’existaient pas.
  • Le chat qui fait peur : ces propriétaires de boutiques ont tant d’extensions et de thèmes obsolètes parce qu’ils sont terrifiés par ce qui se passera s’ils tentent une mise à jour.
  • Le franc-tireur : Enfin, ce sont les propriétaires de boutiques qui effectuent des sauvegardes régulières, testent les nouvelles versions de WooCommerce sur un site de staging en scène, puis mettent à jour leur site en production sans problème.

Idéalement, tout le monde devrait être un franc-tireur. Heureusement, ce n’est pas difficile d’en être un ! Avec les bons outils en place, une solide liste de contrôle des tests et un peu d’automatisation, vous pouvez commencer à garder votre site WooCommerce à jour et toujours fonctionner sans problème.

Dans cet article, nous allons vous expliquer comment effectuer une mise à jour de WooCommerce en toute sécurité du début à la fin, y compris les outils à utiliser et une importante liste de contrôle pour les tests et les mises à jour.

Et n’oubliez pas que votre objectif ultime est d’augmenter les revenus de votre boutique. N’oubliez donc pas de télécharger notre e-book gratuit, 10 façons d’augmenter les conversions de votre page produit WooCommerce.

Prêt à commencer ? Alors, allons-y !

Investissez un peu de temps maintenant pour économiser beaucoup de temps (et d’anxiété) plus tard

Avant de nous lancer, les meilleures pratiques nous disent que vous ne devez jamais mettre à jour votre site, en particulier WooCommerce, sans avoir préalablement testé de manière approfondie les nouvelles versions. Cela vaut pour les versions majeures, mineures et les correctifs.

Il faut être prêt à prendre un peu de temps maintenant pour gagner beaucoup de temps plus tard.

Vous n’avez pas besoin de cliquer sur le bouton mettre à jour tout de suite. Accordez-vous du temps et assurez-vous de bien comprendre les changements qui seront apportés et, surtout, comment ils pourraient avoir une incidence sur tout le reste de votre site. Il vous suffit de lire les nouvelles fonctionnalités disponibles dans la version de WooCommerce que vous souhaitez mettre à jour pour vous aider à vous préparer.

Pour mettre les choses en perspective, et comprendre à quel point les choses pourraient facilement se casser, pensez-y un instant du point de vue d’un développeur de thème ou d’extension : puisque le noyau de WooCommerce, ainsi que celui de WordPress, doivent être rétrocompatibles. Maintenant, pensez au nombre d’extensions que vous – ou votre site client – utilisez. Quelle est la probabilité qu’une mise à jour de WooCommerce casse certaines fonctionnalités ? Eh bien, je suppose que vous connaissez déjà la réponse : c’est extrêmement probable.

C’est pourquoi, juste après l’annonce d’une mise à jour de WooCommerce, il est toujours bon de consulter les journaux des modifications et les forums d’assistance de WordPress.org avant de mettre à jour WooCommerce. Si jamais un problème survenait lors d’une mise à jour, 99 % du temps, quelqu’un d’autre tomberait sur le problème en premier, ce qui vous épargnerait énormément de temps et de tracas pour régler le problème vous-même.

Il n’est pas rare non plus de s’abstenir de pousser la mise à jour de WooCommerce immédiatement sur votre site et d’attendre que les auteurs des extensions/thèmes publient leurs propres mises à jour des produits en rapport avec WooCommerce avant que vous puissiez également mettre à jour votre site. Ainsi, être patient et prendre le temps de vérifier la compatibilité peut vraiment être payant.

Démarrer avec votre mise à jour WooCommerce

L’approche des mises à jour de WooCommerce comporte quatre étapes essentielles, chacune ayant ses propres étapes. Nous vous promettons qu’après avoir tout parcouru une fois, cela devient plus rapide et plus facile à chaque fois ! Nous vous guiderons à travers chacune des quatre étapes suivantes de la mise à jour de WooCommerce :

Mise à jour de WooCommerce : Trouver les bons outils

Soyons réalistes : tester manuellement WooCommerce est fastidieux et prend beaucoup de temps. C’est pour ces raisons que tant de gens ne le font tout simplement pas ou, lorsqu’ils le font, ils ne testent pas correctement et ratent des erreurs sur leurs sites.

Heureusement, il existe des outils qui peuvent aider à accélérer le processus de test et à le rendre moins ennuyeux. Après avoir testé d’innombrables fois les mises à jour de WooCommerce au fil des ans, voici les outils que nous recommandons. Examinons chacun d’entre eux de plus près.

Site de staging

Ce n’est pas négociable. Vous ne devez jamais mettre à jour votre site en production immédiatement après une nouvelle version de WooCommerce.

Les sites de staging fournissent un environnement de test sûr où vous êtes libre de casser des choses (généralement sans répercussion). Vous pouvez y lancer des mises à jour de WooCommerce, tester de nouvelles versions et voir comment votre site pourrait réagir avant de mettre à jour votre site en production.

Si vous n’avez pas de site de staging, Kinsta peut vous aider – nous offrons un environnement de staging gratuit avec chaque site, ainsi que jusqu’à cinq environnements de staging premium supplémentaires si un seul ne suffit pas.

Outils de comparaison visuelle

Comment savoir si votre site a changé après une mise à jour de WooCommerce ? Si vous gérez un grand site de plusieurs dizaines de pages, le suivi des petits changements de formatage ou même des widgets qui ont cessé de s’afficher peut prendre du temps.

Avec un outil de comparaison visuelle comme WP Boom, que nous allons utiliser pour ce tutoriel, vous pouvez prendre un instantané de votre site, cliquer sur « mettre à jour », puis prendre un second instantané pour voir rapidement ce qui a changé :

WP Boom
WP Boom

Il est important de souligner qu’un changement visuel ne signifie pas nécessairement qu’une fonctionnalité de votre site est cassée, mais qu’elle pourrait l’être.

Outils de test de bout en bout

Si les outils de comparaison visuelle peuvent vous aider à repérer rapidement les changements dans le formatage et la conception de votre site, les outils de test de bout en bout vont plus loin. Ils testent la fonctionnalité réelle de votre site et vous donnent plus de certitude lorsque quelque chose ne fonctionne pas.

Cliquer sur votre site pour effectuer des tests, comme ajouter un élément au panier et le commander, prend du temps. Ces tâches se font rapidement lorsque vous avez déjà testé une centaine de fois les mises à jour de WooCommerce.

Grâce à des outils de test de bout en bout, vous pouvez automatiser ce processus pour qu’il se fasse automatiquement pour vous.

Avec l’arrêt de Robot Ninja, nous allons vous montrer comment utiliser deux outils différents dans ce tutoriel.

Le premier est Ghost Inspector :

Ghost Inspector
Ghost Inspector

Le deuxième outil de test de bout en bout que vous pouvez essayer est Usetrace :

Usetrace
Usetrace

Il s’agit d’un autre outil de test automatisé de bout en bout pour WooCommerce, que vous pouvez utiliser sur les sites de staging et en production. Nous verrons plus loin dans cet article comment les mettre en place. WooCommerce propose également des tests E2E que vous pouvez exécuter si vous êtes plutôt un développeur.

Outils de sauvegarde

Vous devez effectuer des sauvegardes régulières de votre site. Si vous êtes intéressé par les sauvegardes de bases de données, nous vous recommandons de passer par WP Migrate DB Pro, ou simplement d’utiliser WP-CLI pour effectuer des exportations rapides.

Si vous êtes chez Kinsta, nous fournissons des sauvegardes quotidiennes automatiques, des points de sauvegarde manuelle et la conservation des sauvegardes pour tous nos plans :

Sauvegardes MyKinsta
Sauvegardes MyKinsta

Une fois que vous avez les bons outils en place, il est temps de faire quelques préparatifs.

Mise à jour de WooCommerce : Préparation (liste de contrôle en 7 étapes)

Si vous voulez que la mise à jour de WooCommerce se fasse sans problème, vous devez vous préparer. Cela implique un peu de travail, mais une fois que vous vous êtes préparé une fois, il est plus facile de remplir les blancs et de le faire plus rapidement la prochaine fois que vous faites une mise à jour. Vous trouverez ci-dessous les sept étapes de préparation que nous recommandons.

Étape 1 : Refamiliarisez-vous avec le site que vous mettez à jour

Si vous n’êtes pas sûr du fonctionnement de votre site (c’est-à-dire s’il s’agit du site d’un nouveau client), prenez quelques notes. Cela vous aidera à réduire l’anxiété que vous pourriez ressentir si vous vous trompez sur le fonctionnement du site après une mise à jour (cela arrive plus souvent que vous ne le pensez).

Je vous recommande également de dresser une liste des URLs critiques et des fonctionnalités de votre site (et de ceux de vos clients). Cette liste devrait comprendre les pages importantes de votre site, comme votre page d’accueil, votre catégorie et votre produit, « mon compte », votre panier et vos pages de paiement.

Étape 2 : Vérifiez que vos sauvegardes sont à jour

Si vos sauvegardes ne sont pas à jour, c’est le moment de faire une nouvelle sauvegarde. Familiarisez-vous à nouveau avec votre outil de sauvegarde. Surtout, vérifiez s’il fonctionne correctement et assurez-vous que vous savez comment revenir à une version antérieure de votre site.

Étape 3 : Mettre en place WP Boom

Il suffit d’une minute pour mettre en place cet outil. Si votre mémoire et votre prise de notes ne sont pas très bonnes (nous pouvons tous faire des erreurs), WP Boom peut vous aider à combler les lacunes avec des captures d’écran de votre site. Considérez-les comme les photos « avant » des publicités pour les régimes.

Vous voudrez commencer par prendre votre premier instantané du site, afin d’avoir un aperçu visuel de la mise à jour préalable de votre site.

Il ne pourra généralement pas faire de captures d’écran de la commande (vous avez besoin de certains produits dans votre panier) et des pages protégées, mais c’est là que l’un des prochains outils peut vous aider.

Note : Nous vous expliquerons plus loin comment installer et utiliser WP Boom.

Étape 4 : Configurez votre outil de test automatisé

Si vous testiez WooCommerce manuellement, c’est la partie où vous feriez une liste de scénarios de test : par exemple, ouvrir votre site, ajouter un produit au panier, passer commande, saisir les informations de paiement, etc.

Heureusement, Ghost Inspector et Usetrace peuvent automatiquement faire tout cela pour vous. Nous vous expliquerons un peu plus loin comment configurer ces deux outils.

Étape 5 : Identifiez les autres parties de votre site que vous souhaitez tester

L’étape suivante consiste à identifier toutes les autres parties de votre site que vous souhaitez tester, sur la base de la liste des URLs et des fonctionnalités essentielles que vous avez créée précédemment. Il peut s’agir de fonctionnalités telles que des formulaires de contact et des popups, ou d’éléments tels que des diaporamas et des galeries.

Vous pouvez tester ces choses manuellement ou, si vous êtes plus technique, vous pouvez aussi essayer d’automatiser cette étape.

Étape 6 : Découvrez les nouveautés de la version de WooCommerce que vous mettez à jour

C’est également une bonne idée de voir quelles nouvelles mises à jour et fonctionnalités sont disponibles dans la version de WooCommerce que vous mettez à jour. Plus précisément, vérifiez si vos extensions et votre thème sont compatibles avec cette version.

Encore une fois, il vaut mieux passer du temps maintenant pour s’épargner du temps et de l’anxiété plus tard. Nous vous recommandons de consulter les annonces de sortie sur WooCommerce.com, les journaux des modifications, les problèmes de GitHub et les forums de support WordPress.

Étape 7 : Clonez votre site en production dans votre environnement de staging

Si vous utilisez des extensions qui disposent d’un mode de staging, tels que WooCommerce Subscriptions, activez-les ou désactivez-les simplement. De même, vous voudrez désactiver les e-mails.

Ensuite, vérifiez que l’environnement de staging ressemble le plus possible à celui de votre site. Nous vous suggérons également d’activer le mode de débogage de WordPress à ce stade, afin de faciliter la résolution des problèmes à l’avenir.

Important : après avoir poussé votre site de staging, vous ne voulez pas perdre les commandes qui pourraient arriver. Pour éviter cela, nous vous recommandons de mettre votre boutique WooCommerce en mode de maintenance. Cela vous permettra de vous assurer qu’aucune commande n’est passée pendant que vous effectuez les mises à jour et les tests.

Mise à jour de WooCommerce : Mise à jour et test de votre site de staging (liste de contrôle en 7 étapes)

Maintenant que vous êtes prêt à partir, voici la partie la plus amusante : la mise à jour de votre site. Ce qui est génial avec les sites de staging, c’est qu’il n’est pas important que votre site casse, parce que c’est juste une copie. Examinons les étapes de cette partie du processus.

Étape 1 : Prenez un instantané de votre site avec WP Boom

La première chose que vous voudrez faire est de prendre un instantané de votre site avec WP Boom. Cela vous donnera un aperçu visuel de votre site, avant sa mise à jour.

Étape 2 : Utilisez votre outil de test et assurez-vous que vos tests sont réussis

Comme nous l’avons déjà mentionné, vous pouvez utiliser un outil de test de bout en bout tel que Ghost Inspector ou Usetrace pour automatiser vos tests. Plus loin dans cet article, nous vous expliquerons comment effectuer un test à l’aide de ces deux outils et comment vérifier que les tests sont réussis.

Étape 3 : Mettez à jour vos extensions et votre thème

Lors de la phase de préparation, nous avons mentionné la nécessité de vérifier si vos extensions et votre thème sont compatibles avec la dernière version de WooCommerce que vous mettez à jour. Si vous avez remarqué que vos extensions ou votre thème sont obsolètes et ne sont plus compatibles avec la dernière version de WooCommerce, il est temps de les mettre à jour vers une version compatible.

Étape 4 : Mettez à jour WooCommerce sur votre site de staging

Une fois que vous avez mis à jour vos extensions et votre thème, en vous assurant qu’il n’y aura pas de problèmes de compatibilité, vous êtes prêt à mettre à jour votre site de staging avec la dernière version de WooCommerce. La mise à jour de votre site de staging vous permet d’identifier les erreurs potentielles à résoudre avant d’envoyer la mise à jour de WooCommerce sur votre site en production.

Étape 5 : Vérifiez les erreurs dans vos journaux

Après avoir mis à jour vos extensions, votre thème et WooCommerce, il est judicieux de vérifier vos journaux pour rechercher les éventuelles erreurs résultant de ces mises à jour. Faites un scan rapide pour vous assurer que vous pouvez toujours accéder à votre page d’accueil et à votre zone d’administration.

Si vous obtenez un écran blanc de la mort ou êtes coincé dans une autre situation irrécupérable, c’est le bon moment pour revenir à une version précédente de votre site. Vous pouvez soit résoudre vous-même votre problème, soit demander de l’aide.

Étape 6 : Prendre un deuxième instantané pour comparer les changements

Si tout va bien jusqu’à présent, refaites une recherche sur WP Boom et obtenez un second cliché. Comparez vos clichés avant et après pour voir ce qui a changé.

Ce qui est formidable avec WP Boom, c’est qu’il vous indique à quel point votre site a changé depuis votre dernier cliché.

Par exemple, il peut y avoir un changement visuel de 7 % entre vos deux séries de clichés. Cela ne signifie pas nécessairement que votre site est cassé, mais que vous devez peut-être ajuster certains styles.

Étape 7 : Recommencer Ghost Inspector ou Usetrace pour s’assurer que tout fonctionne correctement

Ensuite, effectuez un autre test en utilisant soit Ghost Inspector soit Usetrace (ou tout autre outil de test de bout en bout que vous avez choisi) pour vous assurer que votre flux de commande est en bon état de fonctionnement. Vous pouvez également effectuer des contrôles manuels ou automatisés pour toute autre fonctionnalité de votre site, comme les formulaires de contact.

Si quelque chose ne fonctionne pas comme vous vous y attendez, c’est le moment de le signaler et/ou de le corriger.

Si vous avez du code personnalisé sur votre site (c’est-à-dire du code qui n’est pas maintenu par un développeur d’extensions tiers), vous devrez le corriger et vous assurer que les corrections sont appliquées à votre site en production avant ou après l’exécution de la mise à jour (selon le problème).

Le contrôle des versions comme le fait d’avoir votre site dans Git, peut vous aider à mieux gérer les changements. L’endroit où vous signalez les bogues dépend des extensions que vous utilisez et de vos dispositions en matière de support. À partir de là, vous devrez soit attendre les nouvelles versions de vos extensions/thèmes et ensuite réessayer le processus, soit travailler vous-même sur les corrections et mettre à jour votre code.

La bonne nouvelle, c’est que votre site en production n’est pas cassé, vos clients pourront toujours faire des achats. De plus, vous pouvez prendre le temps de répéter le processus autant de fois que nécessaire jusqu’à ce que vous soyez certain que tout fonctionne comme prévu.

Mise à jour de WooCommerce : Mise à jour et test de votre site en production (liste de contrôle en 8 étapes)

Une fois que vous avez mis à jour votre site de staging et qu’il fonctionne correctement, que toutes les fonctionnalités défectueuses ont été corrigées et que tous les bogues ont été éliminés, vous êtes prêt à mettre à jour votre site en production.

Examinons les étapes de la mise à jour de votre site WooCommerce en production, dont beaucoup seront similaires à celles que vous avez effectuées lors des tests de votre site de présentation.

Étape 1 : Sauvegardez votre site en production

La première étape consiste à sauvegarder votre site en production. Il est important de s’assurer que vous ne manquez pas cette étape. Si vous êtes un utilisateur de Kinsta, vous avez le choix entre plusieurs options de sauvegarde. Cependant, vous pouvez également utiliser une extension de sauvegarde.

Étape 2 : Prenez un autre cliché de votre site

Ensuite, vous voudrez prendre un autre cliché de votre site avec WP Boom. Cela vous permet d’obtenir un enregistrement visuel de base de votre site en production, avant sa mise à jour.

Étape 3 : Exécutez Ghost Inspector ou Usetrace et assurez-vous que vos tests sont réussis

Là encore, vous pouvez utiliser soit Ghost Inspector soit Usetrace pour cela, selon que vous souhaitez utiliser une extension Chrome ou un outil en ligne pour enregistrer vos tests. Cela fournit une autre base de référence pour la mise à jour de votre site.

Étape 4 : Synchroniser et pousser vos changements

Ensuite, en fonction de la façon dont votre site de staging et votre environnement de production fonctionnent, vous devrez peut-être simplement synchroniser les changements entre le staging et la production. Sinon, vous devrez peut-être procéder à une nouvelle mise à jour de vos extensions et de votre code.

Si vous êteschez Kinsta, vous pouvez pousser les changements sur votre site de production en un clic :

The MyKinsta push staging to live option
The MyKinsta push staging to live option

N’oubliez pas de sortir votre boutique WooCommerce du mode maintenance.

Étape 5 : Vérifiez les erreurs dans vos journaux

Une fois que vous avez terminé la synchronisation de la mise à jour, vérifiez à nouveau vos journaux d’erreurs pour voir si des problèmes ont pu se produire. Vérifiez que vous pouvez toujours accéder à la page d’accueil et à la zone d’administration.

Comme pour le site de staging, si vous obtenez un écran blanc de la mort ou si vous rencontrez une autre situation irrécupérable, il est préférable de revenir à une version antérieure de votre site et de faire quelques dépannages ou de demander de l’aide.

Étape 6 : Prenez un autre cliché avec WP Boom

Ensuite, relancer WP Boom pour avoir une deuxième série d’instantanés. Comparez vos clichés avant et après pour voir si quelque chose a changé.

Étape 7 : Relancer Ghost Inspector ou Usetrace pour confirmer que le site fonctionne correctement

Une fois de plus, vous pouvez utiliser votre outil automatisé pour effectuer un autre test et vous assurer que tout fonctionne comme il se doit. À ce stade, vous pouvez également effectuer toute autre vérification manuelle (ou automatisée) des autres fonctionnalités de votre site, comme les formulaires de contact.

Si vous avez traité et corrigé des problèmes plus tôt lors de la mise à jour de votre site de staging, tels que des conflits de code d’extension et votre propre code personnalisé, il ne devrait pas y avoir trop de problèmes (s’il y en a) à résoudre à ce stade.

Étape 8 : Effectuer un contrôle visuel final

Vous avez presque terminé. Il ne vous reste plus qu’à vérifier votre liste d’URLs critiques et de fonctionnalités pour vous assurer que tout fonctionne.

Si tout semble bien se passer, c’est fini ! Votre WooCommerce mis à jour est maintenant en ligne.

Démarrer avec WP Boom

WP Boom est un outil de test et de comparaison visuel conçu pour WordPress. Une fois qu’il est configuré, vous pouvez comparer les captures d’écran avant et après la mise à jour de votre site, et recevoir des alertes lorsque les mises à jour automatiques entraînent des changements visuels sur vos sites :

WP Boom
WP Boom

Pour commencer à utiliser WP Boom, créez un compte gratuit. Après avoir saisi votre adresse e-mail et votre mot de passe, une fenêtre modale s’ouvrira pour vous demander de connecter un nouveau site :

Le formulaire d'inscription de WP Boom
Le formulaire d’inscription de WP Boom

Une fois que vous avez saisi les détails et cliqué sur Créer un site, WP Boom se met au travail en prenant le premier instantané de votre site. Cela prendra une minute ou deux, selon le nombre de pages que contient votre site :

Un instantané de WP Boom
Un instantané de WP Boom

Lorsque ce processus est terminé, la page s’actualise. Lorsque vous cliquez sur le nom de votre site, vous verrez un aperçu de votre instantané, y compris le temps qu’il a pris et le nombre de pages de votre site :

Le dernier instantané de WP Boom
Le dernier instantané de WP Boom

Lorsque vous êtes prêt à prendre un deuxième instantané, il vous suffit de retourner au tableau de bord de WP Boom, de sélectionner le site que vous voulez photographier et de cliquer sur Snapshot Selected Sites.

Quelques autres fonctionnalités intéressantes de WP Boom sont la possibilité de programmer des instantanés hebdomadaires et des rapports par e-mail qui détaillent les changements visuels sur votre site. Cette fonction est utile si vous gérez une tonne de sites et que vous avez mis en place des mises à jour automatiques.

Outils de test automatisés : Ghost Inspector et Usetrace

Il est important de tester et de s’assurer que la fonctionnalité de l’ensemble de votre site WooCommerce fonctionne correctement après avoir effectué des mises à jour, et pas seulement votre processus de commande.

Après tout, si un client remplit un formulaire de contact ou tente d’utiliser la discussion en direct et que ces fonctionnalités sont défaillantes, comment le saurez-vous si vous ne les avez pas testées ?

Il est facile d’effectuer des tests manuels : il suffit de cliquer sur votre site, de remplir des formulaires et d’utiliser votre fenêtre de discussion en direct.

Pour aider à automatiser ce processus, vous pouvez d’abord dresser une liste des fonctionnalités essentielles, ainsi que des instructions sur la manière d’effectuer manuellement les tests (par exemple, « Ouvrir le site, aller sur la page de contact, remplir le formulaire, etc.) ). Cela vous permettra de ne rien manquer lorsque vous effectuerez un test manuel.

Si vous préférez automatiser ce processus, si vous souhaitez avoir plus de contrôle sur vos tests automatisés, ou si vous avez un site ou une fonctionnalité très personnalisés, nous vous recommandons de consulter Ghost Inspector et/ou UseTrace.

Ces deux options sont très intéressantes si vous n’êtes pas familier avec PHP et que ne voulez pas jouer avec les scripts et le code. Ces options offrent des fonctionnalités similaires pour automatiser vos tests de commande.

En fin de compte, l’option choisie dépendra de l’utilisation que vous souhaitez faire d’une extension Chrome ou d’un outil en ligne pour enregistrer vos tests. Par ailleurs, si vous êtes un développeur et que vous aimez vous salir les mains, Codeception est un excellent choix pour les développeurs.

Démarrer avec Ghost Inspector

Ghost Inspector est un outil que vous pouvez utiliser pour automatiser le test de votre site WooCommerce et vous assurer qu’il fonctionne correctement. Le mieux, c’est que vous n’avez pas besoin d’expérience en programmation ou en test pour l’utiliser.

Ghost Inspector fonctionne en ajoutant une extension à votre navigateur Chrome ou Firefox. L’extension enregistre ensuite votre site et exécute automatiquement les tests.

Pour commencer, visitez le site web de Ghost Inspector et cliquez sur Start Your Free Trial Saisissez vos informations dans le formulaire, puis sélectionnez Create Account :

La page d'inscription de Ghost Inspector
La page d’inscription de Ghost Inspector

Vous serez alors redirigé vers une page de bienvenue. En bas, cliquez sur le bouton Install Test Recorder :

Installation de l'enregistreur de test de Ghost Inspector
Installation de l’enregistreur de test de Ghost Inspector

Cela ouvrira le Chrome Web Store dans un nouvel onglet du navigateur. Sélectionnez Ajouter à Chrome :

ghost inspector extension
Adding the Ghost Inspector Chrome extension

L’extension Ghost Inspector sera automatiquement ajoutée à votre navigateur, apparaissant dans le coin supérieur droit. La première fois que vous cliquerez dessus, il vous demandera de vous connecter en utilisant vos identifiants :

Connexion à l'extension Chrome Ghost Inspector
Connexion à l’extension Chrome Ghost Inspector

Actualisez votre navigateur. Lorsque vous êtes prêt à effectuer un test, allez sur votre site WooCommerce (en vous assurant que vous êtes déconnecté), puis cliquez sur l’extension du navigateur.

Dans le menu déroulant, sélectionnez l’option « Créer un nouveau test », puis le bouton « Start Recording » :

Le bouton « Démarrer l'enregistrement » de Ghost Inspector
Le bouton « Démarrer l’enregistrement » de Ghost Inspector

Lorsque vous parcourez et testez votre site, Ghost Inspector enregistre toutes vos actions. Lorsque vous avez terminé, cliquez à nouveau sur l’extension, puis sur J‘ai terminé l’enregistrement :

Le bouton « Enregistrement terminé » de Ghost Inspector
Le bouton « Enregistrement terminé » de Ghost Inspector

Vous pouvez ensuite nommer et enregistrer votre test. Si vous sélectionnez View My Test vous serez dirigé vers le tableau de bord de Ghost Inspector :

Le tableau de bord de Ghost Inspector
Le tableau de bord de Ghost Inspector

Vous pouvez consulter ici tous les détails du test. Vous verrez une liste des étapes et vous aurez la possibilité de les modifier. Cela vous indiquera si le test a été réussi et, dans le cas contraire, quelles sont les étapes qui requièrent votre attention. Pour des informations plus détaillées, consultez la documentation de Ghost Inspector.

Démarrer avec Usetrace

Si vous souhaitez utiliser un outil de test automatisé qui n’est pas spécifique à un navigateur en particulier, vous pouvez utiliser Usetrace. Avec cet outil, vous créez des wtracesw en enregistrant vos flux de travail grâce à l’éditeur en ligne Usetrace. Vous pouvez ensuite les utiliser pour tester automatiquement votre site.

Pour commencer, rendez-vous sur le site web Usetrace et cliquez sur »« Sign Up and Start Testing Now ». Après avoir créé un compte, vous serez redirigé vers le tableau de bord de Usetrace. Sélectionnez Start by creating a new trace :

Le tableau de bord d'Usetrace
Le tableau de bord d’Usetrace

Dans la fenêtre à gauche, vous trouverez les étapes et les réglages de votre trace. À droite se trouve le site que vous testez. Pour commencer, cliquez sur Record Steps :

usetrace record steps
Recording trace steps

Le programme commencera à enregistrer vos interactions sur le site. Chaque fois que vous effectuez une action, comme ajouter un élément dans votre panier ou remplir un formulaire de contact, il ajoutera un point de contrôle aux étapes de suivi à gauche.

Lorsque vous avez terminé, cliquez sur le bouton Save Steps :

Un test Usetrace
Un test Usetrace

Pour parcourir l’ensemble de la trace afin de confirmer que tout fonctionne, sélectionnez Run Trace dans le coin inférieur gauche :

Le bouton Run Trace dans Usetrace
Le bouton Run Trace dans Usetrace

Une fois qu’il est terminé, vous devriez voir un message de succès :

Un message de succès pour Usetrace
Un message de succès pour Usetrace

Vous pouvez cliquer sur Details pour en savoir plus sur chaque étape ou sélectionner OK si vous avez terminé. Pour des conseils et des instructions plus détaillées, n’hésitez pas à consulter la documentation Usetrace.

Résumé

Avec les bons outils, un peu de temps de préparation et une solide liste de contrôle en place, vous ne devriez pas avoir de problème pour tester et mettre en œuvre les mises à jour de WooCommerce. Afin de dissiper l’anxiété liée à la mise à jour de WooCommerce, il est important de démystifier le processus, ce que nous avons fait ici. Nous espérons que ce guide vous a fourni une base solide pour maintenir votre site WooCommerce à jour.

Nous devons également souligner qu’il est important de tester les e-mails transactionnels de votre boutique, mais c’est un tout autre parcours.

Maintenant, revenons à vous : Utilisez-vous des outils de visualisation ou de capture d’écran lorsque vous mettez à jour WooCommerce et WordPress ? Quels autres outils et flux de travail utilisez-vous pour les mises à jour ? Partagez-les avec nous dans les commentaires ci-dessous !