Bonjour
Dans cet article, je voudrais parler de mon expérience dans l'automatisation des tests de régression visuelle.
Présentation
J'ai décidé de faire l'automatisation des tests visuels après avoir accidentellement découvert un petit bug dans la mise en page. Le projet a modifié la conception d'une page et les modifications ont touché les pages non liées aux tâches.
Ayant décidé que la vérification manuelle de l'apparence des pages du site n'était pas une option, j'ai commencé l'automatisation.
Nous avions besoin d'une solution simple avec des rapports pratiques. Pour pouvoir écrire des autotests sans aucune restriction, comparez les captures d'écran des pages et des éléments du site et utilisez différents navigateurs.
Après une courte recherche d'une solution / structure prête à l'emploi, il a été décidé qu'il serait plus facile d'écrire votre propre solution avec la fonctionnalité et le format de rapports nécessaires. Parmi les options que j'ai vues, seul le cadre Galen semblait convenir, mais je l'ai trouvé après avoir écrit ma solution.
Après avoir implémenté et testé les autotests, j'ai décidé d'affiner un peu les tests et de créer un projet distinct, afin de pouvoir l'utiliser plus tard sur d'autres sites et projets.
À propos du projet
VisualRegressionBoilerplate est un projet relativement simple avec une structure spécifique.
Quelque chose comme un modèle / projet standard pour les autotests visuels.
Le projet est destiné aux petits sites / projets. Pour ceux qui ont besoin d'une solution simple, sans frameworks complexes.
Les possibilités
- Comparaison des captures d'écran des pages du site. Vous pouvez spécifier un ou plusieurs éléments ignorés.
- Comparaison des captures d'écran des éléments du site.
- Les tests peuvent être exécutés avec différentes largeurs d'écran: mobile - 360 px, tablette - 768 px, ordinateur de bureau - 1920 px
- Par défaut, deux navigateurs sont disponibles - chrome et firefox + les mêmes navigateurs en mode sans tête .
- Générateur de rapports - 4 captures d'écran sont créées pour chaque test - actuel, attendu, différence, gif. S'il n'y a pas de captures d'écran attendues, les captures d'écran réelles seront enregistrées comme prévu.
Technologies utilisées
- Java
- Testng
- Maven
- Webdriver de sélénium
- aShot - une bibliothèque pour comparer des images
Comment commencer à travailler avec un projet
- Installez java, maven, navigateurs.
- Dans le constructeur de la classe DriverWrapper , vous pouvez ajouter ou supprimer des navigateurs si nécessaire
- La classe TestConfig stocke tous les paramètres du projet - navigateur, taille de fenêtre de navigateur par défaut, etc. Ici, vous pouvez ajouter ou modifier des paramètres.
- Dans la classe BasePage , définissez l'adresse du site testé. Vous pouvez définir une adresse différente pour différents environnements (dev, stage, prod). BasePage et les autres classes du module d' application sont un exemple du modèle d' objet de page . Son utilisation est facultative.
- Examinez la classe de test TestExample et créez vos propres classes de test comme exemple.
- Ajouter de nouvelles classes de test à testng.xml
- Exécutez des tests avec les paramètres nécessaires via maven
- Vérifier le rapport dans le dossier de rapport
Dans le projet
README , tout est décrit plus en détail.
Comment écrire des tests
En général, comme vous le souhaitez. Il n'y a aucune restriction. Vous pouvez utiliser le modèle d'
objet de page ou autre chose.
Il vous suffit d'utiliser les fonctions suivantes pour comparer les captures d'écran:
Pour les pages:Comparaison des captures d'écran de page:
comparePageScreenshots("index_page");
Comparaison des captures d'écran de page avec ignorer un élément:
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
Comparaison des captures d'écran de la page en ignorant plusieurs éléments:
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
Comparaison des captures d'écran de l'élément de page - l'élément peut être recherché par le localisateur CSS
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
Ou vous pouvez passer un objet de classe
WebElement compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
Problèmes possibles
- Les tests peuvent échouer en raison du contenu dynamique de la page. Le problème est résolu en ignorant les éléments avec un contenu dynamique.
- Les tests peuvent échouer en raison d'une différence de quelques pixels. Vous pouvez résoudre ce problème en modifiant le paramètre - TestConfig.allowableDiffSize .
- Parfois, toutes les images ou certains éléments du site n'ont pas le temps de se charger. Pour résoudre ce problème, j'ai écrit la fonction preparePageForScreenshot () dans laquelle, en utilisant javaScript, la page défile de haut en bas. Mais cela n'aide pas toujours.
Résumé
À l'heure actuelle, le projet compte environ 50 tests - pages et différents éléments de page.
Grâce au script bash, des autotests sont lancés et le site est testé immédiatement en trois extensions (mobile, tablette, bureau).
Il y a quelques problèmes dus au contenu dynamique et au fait que certains éléments du site n'ont pas toujours le temps de se charger à temps, mais les autotests peuvent faire face à leur tâche.
Toute modification de la mise en page est immédiatement visible.
Lien vers le référentiel du projet -
VisualRegressionBoilerplate