Automatisez les tests visuels WordPress : Gagnez du temps

Introduction

Vous avez déjà passé des heures à vérifier manuellement chaque page de votre site WordPress pour vous assurer que tout est parfait visuellement ? Imaginez pouvoir automatiser ce processus pour gagner du temps et éviter les erreurs humaines. Dans ce tutoriel, nous allons découvrir ensemble comment automatiser vos tests visuels WordPress pour un résultat impeccable à chaque fois.

Pré-requis et vision d’ensemble

Avant de commencer, assurez-vous d’avoir les outils et compétences suivants :

| Outils/Compétences | Versions/Niveaux | Temps estimé | |——————–|——————-|————–| | WordPress | Version 5.0+ | 2-3 heures | | Node.js | Version 12+ | | | BackstopJS | Version 4+ | | | Connaissances en ligne de commande | Intermédiaire | |

Tutoriel pas-à-pas

Étape 1 : Installation de Node.js

Objectif de l’étape : Installer Node.js sur votre machine.

Procédure :

1. Rendez-vous sur le site officiel de Node.js et téléchargez l’installateur correspondant à votre système d’exploitation.
2. Suivez les instructions d’installation.
3. Vérifiez l’installation en ouvrant votre terminal et en tapant `node -v` et `npm -v`. Vous devriez voir les versions de Node.js et npm affichées.

Vérification rapide :

• Ouvrez votre terminal et tapez `node -v` et `npm -v`. Si les versions s’affichent, l’installation est réussie.

Erreurs fréquentes et correctifs :

• Si les commandes ne sont pas reconnues, assurez-vous que Node.js est bien ajouté à votre PATH environnemental.

Étape 2 : Installation de BackstopJS

Objectif de l’étape : Installer BackstopJS, un outil de test visuel.

Procédure :

1. Ouvrez votre terminal.
2. Tapez la commande suivante pour installer BackstopJS globalement :

npm install -g backstopjs

Vérification rapide :

• Tapez `backstop –version` dans votre terminal. Si une version s’affiche, l’installation est réussie.

Erreurs fréquentes et correctifs :

• Si vous rencontrez des erreurs de permission, essayez d’exécuter la commande avec `sudo` (pour les utilisateurs Unix).

Étape 3 : Configuration de BackstopJS

Objectif de l’étape : Configurer BackstopJS pour votre site WordPress.

Procédure :

1. Créez un répertoire pour vos tests visuels, par exemple `backstop_tests`.
2. Dans ce répertoire, créez un fichier de configuration `backstop.json` avec le contenu suivant :

json {"id":"backstop_default","viewports": [ {"label":"phone","width": 320,"height": 480 }, {"label":"tablet","width": 1024,"height": 768 } ],"scenarios": [ {"label":"Homepage","url":"http://votre-site-wordpress.com","referenceUrl":"","readyEvent":"","readySelector":"","delay": 500,"hideSelectors": [],"removeSelectors": [],"hoverSelector":"","clickSelector":"","postInteractionWait": 0,"selectors": [],"selectorExpansion": true,"expect": 0,"misMatchThreshold": 0.1,"requireSameDimensions": true } ],"paths": {"bitmaps_reference":"backstop_data/bitmaps_reference","bitmaps_test":"backstop_data/bitmaps_test","engine_scripts":"backstop_data/engine_scripts","_report":"backstop_data/_report","ci_report":"backstop_data/ci_report" },"report": ["browser"],"engine":"puppeteer","engineOptions": {"args": ["--no-sandbox"] },"asyncCaptureLimit": 5,"asyncCompareLimit": 50,"debug": false,"debugWindow": false }

Vérification rapide :

• Assurez-vous que le fichier `backstop.json` est bien présent dans votre répertoire `backstop_tests`.

Erreurs fréquentes et correctifs :

• Si vous voyez des erreurs de syntaxe, vérifiez que le fichier JSON est correctement formaté.

Étape 4 : Capture des références

Objectif de l’étape : Capturer les images de référence de votre site.

Procédure :

1. Ouvrez votre terminal et naviguez jusqu’à votre répertoire `backstop_tests`.
2. Tapez la commande suivante pour capturer les images de référence :

backstop reference

Vérification rapide :

• Vérifiez que les images de référence sont bien enregistrées dans le répertoire `backstop_data/bitmaps_reference`.

Erreurs fréquentes et correctifs :

• Si les images ne sont pas capturées, assurez-vous que l’URL de votre site est correcte et accessible.

Étape 5 : Exécution des tests visuels

Objectif de l’étape : Exécuter les tests visuels et comparer les images capturées avec les références.

Procédure :

1. Dans votre terminal, tapez la commande suivante pour exécuter les tests :

backstop test

Vérification rapide :

• Ouvrez le rapport généré dans le répertoire `backstop_data/_report` pour voir les résultats des tests.

Erreurs fréquentes et correctifs :

• Si les tests échouent, vérifiez les différences visuelles dans le rapport et ajustez vos sélecteurs ou configurations en conséquence.

Étape 6 : Automatisation avec un script

Objectif de l’étape : Automatiser l’exécution des tests visuels avec un script.

En suivant ces recommandations, vous obtiendrez des résultats concrets et durables.

Si vous avez besoin d’aide, contactez un webmaster sérieux qui va vous aider dans vos tâches de site internet. Voici le numéro de téléphone : 09 77 29 09 69