L'article est publié au nom d'Alexander Kochetkov et Crasse Snejana.Combien de différences trouverez-vous en 10 secondes?
Notre testeur trouvera TOUTES les différences. Et même ceux qui ne sont pas visibles. Ci-dessous, je parlerai de la façon dont il le fera, mais je vais d'abord vous présenter le cours des choses.
Notre entreprise développe diverses applications Web. Prenons par exemple une application Web client typique avec une interface utilisateur riche, plusieurs centaines de pages, une mise en page réactive et la prise en charge de tous les navigateurs populaires. Dans ce scénario, le test de régression de l'interface utilisateur existante se transforme en AD et prend beaucoup de temps. Afin de ne pas devenir fou et de ne pas se vautrer dans ce bourbier, nous avons automatisé ce processus et créé un nouvel outil -
QVisual .
Comment une personne teste-t-elle la mise en page (UI)? Il prend l'implémentation actuelle et la compare à une norme abstraite construite sur la base de sa propre expérience, de sa commodité et de milliers de pages Web consultées auparavant. Écrire votre propre IA pour tester des mises en page serait, bien sûr, très cool. Mais cette idée ressemble à tirer d'un canon sur des moineaux. Par conséquent, nous l'avons fait plus facilement: comme référence, nous avons commencé à accepter la même page précédemment vérifiée par une personne (dans la plupart des cas, il s'agit d'une page d'une version réussie précédente). Ainsi, toute la tâche se résumait à comparer deux pages.
Bien sûr, de nombreuses solutions ont déjà été publiées qui vous permettent de comparer deux images pixel par pixel. Pourquoi avons-nous écrit «un autre vélo»? La réponse est simple - nous ne voulions pas nous limiter à la comparaison pixel par pixel, nous voulions pouvoir comparer des blocs individuels sur une page et recevoir un rapport significatif sur le nombre et les types de différences dans ces blocs. Par conséquent, l'outil que nous avons mis en œuvre peut comparer non seulement les images elles-mêmes, mais aussi des éléments de page individuels, si nécessaire. Nous ne fonctionnons donc pas avec des captures d'écran de deux pages, mais avec des instantanés de ces pages.
Avantages de l'approche
Un instantané est une capture d'écran de la page entière ainsi que des données sur les styles et les propriétés de certains éléments Web de cette page. Nous implémentons la recherche de différences dans les instantanés avec une application serveur avec une API ouverte.
Approche: comparer des éléments, pas des images, nous permet de mettre en évidence des erreurs typiques, telles que:
- IMAGE - l'élément sur la page ne correspond pas visuellement à l'élément sur la norme;
- MOVED - éléments décalés, l'élément est identique à la référence, mais avec des coordonnées différentes;
- REDIMENSIONNÉ - très similaire à un décalage, mais au lieu de la position de l'élément, sa taille est différente;
- TEXTE - erreurs dans le texte;
- CSS et ATTRIBUTS - les différences de styles et d'attributs ne sont pas toujours visibles visuellement et ne sont pas toujours une erreur. Mais contrôler ces changements est très utile, car dans certains cas, il est utile de trouver les erreurs qui leur sont associées.
Une petite analyse d'exemples avec un certain nombre d'erreurs courantes:
Comment ça marche?
Vous pouvez supprimer l'instantané de la page à l'aide de vos propres outils, et vous pouvez transférer une
capture d'écran et des données sur les
éléments vers le serveur avec deux requêtes POST ordinaires.
Si vos tests sont écrits en Java, il sera plus facile d'utiliser notre bibliothèque à ces fins, qui se chargera elle-même de créer un instantané et de transférer des données vers le serveur.
Avant de commencer, vous devrez spécifier plusieurs variables (adresse du serveur, type et version du navigateur, etc.). Dans le test lui-même, vous devez spécifier l'adresse de la page à partir de laquelle vous souhaitez prendre un instantané et une liste de localisateurs au format Xpath ou CSS pour rechercher les éléments dont nous avons besoin (facultatif). C'est tout!
À l'intérieur de la bibliothèque, nous utilisons les commandes internes et les scripts JavaScript de Selenium WebDriver pour prendre un instantané. Les commandes internes de WebDriver vous permettent de prendre rapidement et avec précision des captures d'écran de la page (sans coller ni faire défiler), et js - trouvez les éléments nécessaires et ajoutez des données à leur sujet dans l'instantané. Après avoir supprimé l'instantané, nous le transférons vers notre application serveur, qui enregistrera les données sur les éléments dans mongo, et les captures d'écran elles-mêmes sur le disque du serveur. Maintenant, cet instantané peut être comparé à la norme. Les données des éléments seront comparées comme des objets normaux et des captures d'écran - pixel par pixel en utilisant
OpenCV .
Vous pouvez maintenant obtenir un rapport sur la comparaison de deux instantanés. Pour ce faire, vous devez envoyer une
demande GET et obtenir les données sur la comparaison sous la forme de JSON en réponse, ou utiliser notre application frontale, qui créera un rapport détaillé et plus facilement lisible.
Et qu'en est-il du rapport?
La page principale du rapport contient des informations sur les tests réussis et échoués (surlignés en rouge) et se compose de trois listes:
- liste des tests (histoire) dans lesquels la mise en page a été vérifiée. Ici, par commodité, les noms des tests correspondent à l'url des pages à partir desquelles l'instantané a été pris;
- liste des états (état) - chaque histoire peut contenir plusieurs états, par exemple une capture d'écran avant de remplir le formulaire et après. Chaque état peut contenir plusieurs instantanés dans différentes résolutions et versions de navigateur;
- liste avec différents navigateurs et autorisations et de brèves statistiques.
Dans la partie supérieure, des icônes vous permettent de filtrer les résultats en fonction du type d'erreurs et de l'écart en pourcentage dans la comparaison pixel par pixel. Cette implémentation accélère la vérification des erreurs.
De brèves statistiques dans les blocs de la dernière liste contiennent trois paramètres:
- pixels - la différence entre les deux images en pourcentage par rapport à la taille de la page entière;
- éléments - le nombre d'éléments différents (de ceux qui ont été trouvés par les localisateurs réussis dans le test);
- erreur - erreurs internes qui se sont produites lors de la comparaison des instantanés (par exemple, une des images n'a pas été trouvée pour comparaison, ou il n'y a pas de données sur les instantanés).
Le rapport pour chaque page est constitué de deux captures d'écran et traits distincts des éléments dans lesquels diff a été trouvé. Un texte contextuel lorsque vous survolez différents éléments indique le type d'erreur et le localisateur par lequel l'élément a été trouvé. Vous pouvez également définir le filtrage par type d'erreur, masquer l'une des captures d'écran et activer / désactiver le résultat de la comparaison pixel par pixel.
Comme mentionné ci-dessus, nous comparons également les captures d'écran pixel par pixel, ce qui est très efficace pour certaines tâches. Par exemple, pour les nouvelles pages avec un DOM instable, cela n'a aucun sens de passer du temps à écrire et à maintenir des localisateurs.
En conclusion, je veux dire sur le véritable épuisement de cet outil pour l'entreprise: chaque jour
QVisual aide nos testeurs à se tenir au courant de tous les changements dans la disposition des applications. Nous économisons beaucoup de temps en comparant les atterrissages en créant automatiquement des captures d'écran (jusqu'à 1500+ atterrissages dans 3 navigateurs dans 6 résolutions d'écran).
PS Ceci est un bref aperçu de notre outil. Vous pouvez trouver plus d'informations sur
GitHub , ainsi que participer au développement de l'outil.
PPS Pour ceux qui veulent se tester - ce sont toutes les différences dans l'image de l'en-tête:
Canal de support d'outil de télégramme:
t.me/qvisual