Fermer

septembre 26, 2020

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.

Automatisation des tests de démonstration de Blazor Chart avec OCR "title =" Automatisation des tests de démonstration de Blazor Chart avec OCR "data-openoriginalimageonclick =" true "/> </a></p><p> Les défis d'automatisation auxquels je serai souvent confronté sont:</p><ul><li> Les données du rapport est dynamique, ce qui signifie que le graphique changera souvent / à chaque chargement de la page</li><li> Les données sont agrégées, ce qui signifie que chaque point doit être validé par rapport à sa source backend</li><li> Le scénario de test devra peut-être être étendu pour couvrir des exigences supplémentaires telles que support cross-report</li></ul><h2> Comment faire</h2><p> 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 :</p><ol><li> Extraire les données du graphique Blazor<ul><li> Comprendre la nature du graphique et son fonctionnement</li><li> Parcourir le graphique et extraire les données</li></ul></li><li> Transformer les données<ul><li> Utilisez la reconnaissance OCR de Test Studio pour extraire les données de chaque point</li><li> Créer un modèle de comparaison</li></ul></li><li> Comparez l'intégrité des données<ul><li> Extraire les données brutes de la base de données / service</li><li> Comparez et validez chaque point de données par rapport à ses données brutes / données source homologue</li></ul></li></ol><p> Pour les besoins de la démo, nous utilisons une <a href= 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':

Test Automation of SVG Elements "title =" Test Automation of SVG Elements "/></p><p> D'un point de vue DOM, chaque point est un <a href= É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:

Le cercle SVG met à jour une fenêtre de données d'info-bulle "title =" Le cercle SVG met à jour une fenêtre de données d'info-bulle "/></p><p> 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.<br /> Nous allons continuer avec les étapes suivantes dans <a href= 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:

Visual Studio Test "title =" Visual Studio Test "/></p><p> 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.</p><ul><li> Assurez-vous que nous travaillons avec le dernier DOM en actualisant l'arborescence DOM côté client:</li></ul><p><img decoding= C # foreach la fonction 'MouseHover' et les fonctionnalités OCR les plus récentes de Test Studio:

Code - PointsLoop - Mousehover Function "title =" Code - PointsLoop - Mousehover Function "/><ul><li> La méthode 'ExtractPointData ()' est en fait ce que fait l'OCR:</li></ul><p><img decoding= 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

Le meilleur outil 2023 pour ta croissance Instagram !



Source link