Tests automatisés pour les éléments de graphique avec OCR et étapes codées

L'automatisation d'éléments contenant des données dynamiques et statiques peut être une tâche très difficile pour les ingénieurs en automatisation. Dans cet article, nous explorerons l'automatisation de test de niveau supérieur en utilisant Telerik Test Studio Dev Edition avec ses toutes nouvelles fonctionnalités de reconnaissance optique de caractères (OCR) et nous l'appliquerons à une interface utilisateur Telerik pour Blazor graphique. Nous adopterons des approches codées avancées pour résoudre des problèmes plus complexes concernant la visualisation des données (DataViz) et la comparaison basée sur les fournisseurs.

Présentation

Avant de commencer, clarifions une chose. Le but de cet article est de présenter un scénario avec une utilisation plus large et de créer une approche plus générique pour l'ingénieur en automatisation moderne. C'est pourquoi nous couvrirons le présent cas d'utilisation de bout en bout avec tous les détails nécessaires relatifs à cette approche, bien que dans la réalité, certaines des étapes décrites ci-dessous pourraient être simplifiées pour ce cas.

The Use Case

Now , jetons un coup d'œil au cas d'utilisation. En tant qu'ingénieur QA, je souhaite créer un scénario de test automatisé qui vérifie les données dans un rapport de revenus en constante évolution.

Les défis d'automatisation auxquels je serai souvent confronté sont:

• Les données du rapport est dynamique, ce qui signifie que le graphique changera souvent / à chaque chargement de la page
• Les données sont agrégées, ce qui signifie que chaque point doit être validé par rapport à sa source backend
• Le scénario de test devra peut-être être étendu pour couvrir des exigences supplémentaires telles que support cross-report

Comment faire

Afin de trouver une solution à un problème complexe, dans la vraie vie, nous devons souvent diviser le problème en étapes simples et réalisables. C'est ce que nous allons faire dans notre cas d'utilisation :

1. Extraire les données du graphique Blazor
   • Comprendre la nature du graphique et son fonctionnement
   • Parcourir le graphique et extraire les données
2. Transformer les données
   • Utilisez la reconnaissance OCR de Test Studio pour extraire les données de chaque point
   • Créer un modèle de comparaison
3. Comparez l'intégrité des données
   • Extraire les données brutes de la base de données / service
   • Comparez et validez chaque point de données par rapport à ses données brutes / données source homologue

Pour les besoins de la démo, nous utilisons une démo graphique exemple à partir de l'interface utilisateur Telerik pour les composants Blazor. Ce qui nous intéresse, c'est chaque point de données pour le 'Total Revenue':

D'un point de vue DOM, chaque point est un Élément SVG Circle . Les SVG sont largement utilisés pour les diagrammes de type vectoriel comme les barres, les camemberts, les icônes évolutives et les logos, tous ensemble des éléments contenant des données dynamiques nécessitant une validation, ce qui est bien connu pour causer des problèmes d'automatisation.

Activé le survol de la souris chaque cercle met à jour une fenêtre de données d'info-bulle, qui est visualisée dans la figure suivante:

Ce que nous il faut survoler chaque «cercle» et collecter les données générées dynamiquement. Notez qu'au fur et à mesure que le temps passe, les points de données ou «cercles» changeront, nous devons donc adapter nos étapes car la logique de recherche d'élément statique ne sera d'aucune utilité dans ce cas particulier.
Nous allons continuer avec les étapes suivantes dans Test Studio Dev Edition . Ici vous pouvez télécharger un essai gratuit . Suivez les étapes du Guide de démarrage rapide afin de créer votre premier projet automatisant vos tests Web. Toutes les fonctionnalités OCR sont également disponibles dans Test Studio Ultimate et Test Studio Web & Desktop.

Pour commencer, accédez à l'application testée et agrandissez le navigateur si nécessaire:

La troisième étape du test est maintenant de une nature plus particulière car elle nous permettra de créer une solution codée pour notre scénario dynamique. Nous ferons une explication ligne par ligne afin de rendre chaque étape transparente. À la fin, nous résumerons l'ensemble du cas d'automatisation de test.

• Assurez-vous que nous travaillons avec le dernier DOM en actualisant l'arborescence DOM côté client:

• Maintenant que nous avons le graphique, nous devons explorer et trouver l'hébergement du 'groupe de points' chaque entrée de données. Pour l'interface utilisateur Telerik pour Blazor Chart, il s'agit d'un élément de groupe SVG () marqué par un 'chemin de clip spécifique ’:

• Maintenant nous avoir un texte qui ressemble à celui illustré sur la figure suivante:

• Cela nous indique la bonne direction de la démo, mais nous avons toujours travail à faire, qui comprend le découpage du texte et sa transformation en un objet comparable. À cette fin, nous créerons une classe de détenteurs de données appelée «ProductPoint». Cette classe aura un analyseur intégré qui créera un objet basé sur «imgText»:

Conclusion

C'est à peu près tout un ingénieur en automatisation doit faire pour couvrir ce cas d'automatisation de test ou tout autre cas similaire. Ce n'est peut-être pas la solution la plus élégante dans tous les cas pertinents; cependant, il suit une approche très large et pertinente qui est applicable à une série de scénarios réels.

En savoir plus lors de notre webinaire

Pour en savoir plus sur toutes les dernières fonctionnalités de Telerik Test Studio Dev Edition et les voir en action, assurez-vous de vous inscrire à notre Webinaire sur la version de test et de rapport le vendredi , 2 octobre à 11 h HE.

Test Studio Dev Edition in Perspective

Test Studio Dev Edition fait partie de DevCraft Ultimate l'ensemble d'outils de développement .NET et JavaScript reconnu par l'industrie permettant aux équipes de développement de créer des applications Web, mobiles et de bureau modernes et hautement performantes qui offrir les expériences numériques exceptionnelles exigées par les utilisateurs.

Test Studio Dev Edition est également disponible en tant que plug-in Visual Studio dans le cadre de Test Studio Ultimate . Avec son mélange réussi de capacités d'automatisation sans code et basées sur le code dans une interface utilisateur intuitive, Test Studio permet de tester que tout le monde peut utiliser, quelle que soit son expertise. Test Studio Ultimate est utilisé à la fois par les développeurs et par le contrôle qualité, leur offrant les possibilités de tests automatisés dans un IDE autonome ou dans Visual Studio.

Demander une démo