Bonjour
J'ai déjà publié
un article sur mon expérience dans l'automatisation des tests de régression visuelle.
Depuis lors, le projet a été considérablement amélioré - la structure a changé, il est devenu beaucoup plus facile de mettre en place le projet et de commencer à écrire des autotests, le rapport a été considérablement amélioré.
VisualRegressionFramework est une solution assez simple pour les petits projets. Une cinquantaine d'autotests (pages + éléments) ont été écrits pour le projet avec lequel je travaille.
Je lance des tests après des changements de mise en page. Toutes les modifications sont immédiatement visibles, c'est-à-dire que des problèmes tels que «
modification de la disposition de l'élément sur une page, mais tout s'est cassé sur l'autre page » sont résolus depuis longtemps.
Technologies utilisées - Java, TestNG, Maven, Selenium Webdriver, aShot (bibliothèque de comparaison d'images).
Capacités:
- Comparez les captures d'écran des pages
- Comparaison des captures d'écran de la page + ignorer les éléments spécifiés (contenu dynamique, etc.)
- Comparer des captures d'écran d'articles
- Points d'arrêt - vous pouvez comparer des captures d'écran de pages ou d'éléments de différentes largeurs. Par défaut, 3 points d'arrêt sont utilisés - 1920px, 768px, 360px
- Générer automatiquement des captures d'écran attendues
- Vous pouvez écrire des tests comme des autotests fonctionnels habituels, il n'y a pas de restrictions - c'est important car parfois il peut être nécessaire d'effectuer des actions complexes avant de prendre une capture d'écran.
Rapport
Le rapport ressemble à ceci:
La barre latérale gauche contient une liste de tests, un journal des erreurs, le navigateur dans lequel les autotests ont été exécutés.
Vous pouvez également basculer entre les points d'arrêt et agrandir n'importe quelle image en cliquant dessus.
Structure du cadre
src / config / visual.properties - voici tous les paramètres nécessaires
- points d'arrêt - points d'arrêt, la largeur du site où une capture d'écran sera prise
- allowableDiffSize - écart autorisé entre la capture d'écran attendue et réelle en pixels
- chemins d'accès aux dossiers avec captures d'écran
- chemins d'accès au modèle de rapport, au rapport lui-même et au fichier contenant le journal des erreurs
report / REPORT.html - rapport
captures d'écran- réel - captures d'écran réelles créées pendant le test
- attendu - captures d'écran attendues, s'il n'y a pas de captures d'écran attendues, elles seront créées automatiquement la première fois que vous exécuterez le test
- diff - image sur laquelle les zones non appariées sont surlignées en rouge
- gif - gifs créés à partir d'images réelles, attendues et diff
src / main / framework - classes de
framework - générateur de rapports, captures d'écran, gifs, etc.
src / main / app n'est qu'un exemple d'architecture d'objet de page, il n'est pas nécessaire de l'utiliser, il peut être supprimé.
src / test / resources / testng.xml - ici vous devez ajouter de nouvelles classes de test, entre A_BeforeAllTests et A_AfterAllTests
src / test / java- A_BaseTest - la classe de test de base dont toutes les nouvelles classes de test doivent hériter
- A_BeforeAllTests - initialisation des paramètres et du navigateur avant les tests
- A_AfterAllTests - génération de rapport après les tests
- A_ErrorsLogListener - erreurs de journalisation
- StaticGuestTest - exemple de classe de test
Les cours se déroulent dans un ordre spécifique:- vient d'abord l'initialisation des paramètres et du navigateur - classe A_BeforeAllTests
- puis testez les autotests
- et à la fin un rapport est généré - classe A_AfterAllTests
Comment travailler avec le framework
Exemple de test@Test public void indexPage() { app.open(); app.preparePageForScreenshot(); Comparer.comparePages("index_page"); }
Dans l'exemple ci-dessus, la page s'ouvre simplement, puis la page est préparée pour une capture d'écran, après quoi les captures d'écran attendues et actuelles de la page sont comparées. Les captures d'écran sont créées et comparées dans tous les points d'arrêt.
Pourquoi avons-nous besoin de la fonction preparePageForScreenshot () :
Par défaut, la page défile simplement vers le bas, puis vers le haut à travers js + il y a un deuxième délai. Ceci est nécessaire pour que toutes les images, styles, etc. puissent être chargés.
Toujours dans cette fonction, vous pouvez masquer des éléments inutiles, par exemple, un bloc dynamique avec de la publicité. Dans mon projet, je cache le pied de page, l'en-tête et la barre latérale, car ils sont les mêmes sur toutes les pages. Sans ces éléments, les tests fonctionnent plus rapidement et la vérification d'un rapport est plus facile.
PagesComparez les captures d'écran de la page dans tous les points d'arrêt:
Comparer.comparePages("test_name");
Comparez les captures d'écran de la page dans tous les points d'arrêt + masquer les éléments:
Comparer.comparePages("test_name", new String[]{"css_locator_1", "css_locator_2"});
Comparez les captures d'écran de la page uniquement dans le point d'arrêt spécifié:
Comparer.comparePagesWithBreakpoint("test_name", "1920");
Comparez les captures d'écran de la page uniquement dans les éléments de point d'arrêt + masqués spécifiés:
Comparer.comparePagesWithBreakpoint("test_name", "1920", new String[]{"css_locator_1", "css_locator_2"});
ArticlesComparez les captures d'écran de l'élément spécifié dans tous les points d'arrêt:
Comparer.compareElements("test_name", "css_locator");
Comparez les captures d'écran de l'élément spécifié uniquement dans le point d'arrêt spécifié:
Comparer.compareElementsWithBreakpoint("test_name", "1920", "css_locator");
Lien vers le référentiel du projetProblèmes actuels
- Une zone noire peut être ajoutée à la fin de la capture d'écran, je l'ai rencontré depuis un certain temps. Le problème a disparu lorsque j'ai commencé à cacher le pied de page. Il s'agit d'un problème de bibliothèque aShot - https://github.com/pazone/ashot/issues/169
- L'autotest peut ne pas réussir en raison d'une différence de plusieurs pixels. Le problème est résolu en augmentant la valeur de TestConfig.allowableDiffSize .