Test automatisé de l'interface utilisateur de Kendo en toute simplicité

Vous cherchez un moyen facile et automatisé pour tester vos contrôles d'interface utilisateur Kendo? Apprenez comment vous pouvez utiliser nos outils pour simplifier les tests.

Vous travaillez avec Kendo UI et vous voulez automatiser vos procédures de test au jour le jour. Il est plus facile de tester un cadre de contrôle personnalisé lorsque vous le connaissez de l'intérieur. Voyons comment le faire avec Test Testing Framework Test Studio et Test Studio Dev Edition .

Prise en charge intégrée de l'interface utilisateur de Kendo Controls

Test Framework, Test Studio et Test Studio Dev Edition ont un support prêt à l'emploi pour UI Kendo pour Angular UI Kendo pour jQuery et Interface utilisateur Telerik pour AJAX et Interface utilisateur pour Silverlight RadControls. Chaque type de contrôle est isolé dans une bibliothèque séparée qui se trouve dans le dossier Bin Translators situé dans le dossier d'installation de Test Studio.

Par exemple, si nous voulons tester une application Web utilise Kendo UI pour les composants angulaires, nous devrions ajouter des références dans notre projet de test aux bibliothèques suivantes: Telerik.TestStudio.Translators.Common.dll et Telerik.TestingFramework.Controls.KendoUI.Angular. dll

Trouver et utiliser des éléments d'interface utilisateur de Kendo

Pour tester un composant, nous devons d'abord le trouver. Tous les mécanismes de recherche Testing Framework et Test Studio sont valides pour cette tâche, y compris la nouvelle requête de sélecteur CSS. Après avoir trouvé le composant souhaité, il doit être transtypé dans le type de contrôle intégré correspondant. Dans l'exemple suivant, nous localiserons un élément et vérifierons le nombre de lignes actuellement affichées. N'oubliez pas d'inclure les instructions d'utilisation requises!

 en utilisant Telerik.TestStudio.Translators.Common;
using Telerik.TestingFramework.Controls.KendoUI.Angular;
en utilisant Telerik.TestingFramework.Controls.KendoUI.Angular.Grid;

// Accédez à l'interface utilisateur de Kendo pour la page de démonstration de la grille angulaire
ActiveBrowser.NavigateTo ("https://www.telerik.com/kendo-angular-ui/components/grid/selection/", true);

// Trouver la première grille située dans la première image de la page
Grille KendoAngularGrid = Manager.ActiveBrowser.Frames [0] .Find.AllByTagName  ("kendo-grid"). FirstOrDefault ();

Vérifications spécifiques au contrôle d'interface utilisateur de Kendo

De plus, pour faciliter de manière significative le processus de test, tous les contrôles d'interface utilisateur Kendo ont des propriétés exposant l'état actuel et fournissant un accès facile à leur structure interne. Par conséquent, nous pouvons maintenant utiliser la propriété DataItems exposée par la classe KendoAngularGrid pour accéder à ses lignes et vérifier leur nombre:

 // Vérifier le nombre de lignes de la grille
var expectedGridDataItemsCount = 77;
var actualGridDataItemsCount = grid.DataItems.Count;
Assert.AreEqual  (expectedGridDataItemsCount, actualGridDataItemsCount);
Log.Writeline ("Le nombre de lignes de la grille est:" + grid.DataItems.Count.ToString ());

En suivant la même logique, on peut sélectionner la première ligne de la grille de l'UI Kendo et vérifier son index dans la structure affichée:

 // Sélect la première ligne de la grille
KendoAngularGridDataItem firstRow = grid.DataItems.FirstOrDefault ();

// Vérifier l'index de la première ligne
var expectedRowIndex = 0;
var actualRowIndex = firstRow.ItemIndex;
Assert.AreEqual  (expectedRowIndex, actualRowIndex);
Log.WriteLine ("L'index de première ligne est:" + firstRow.ItemIndex.ToString ());

Actions spécifiques au contrôle de l'interface utilisateur de Kendo

En outre, les types de contrôle intégrés dans Testing Framework et Test Studio fournissent des méthodes d'invocation d'actions spécifiques au contrôle de l'interface utilisateur de Kendo, qui peuvent être difficiles à déclencher. flux d'événements.

Dans cet exemple, nous allons utiliser un élément essayer de basculer son état et confirmer que le changement a réussi. Encore une fois, n'oubliez pas d'inclure les instructions d'utilisation nécessaires!

 using Telerik.TestStudio.Translators.Common;
using Telerik.TestingFramework.Controls.KendoUI.Angular;
en utilisant Telerik.TestingFramework.Controls.KendoUI.Angular.Switch;

Initialement, nous naviguons vers l'UI Kendo respective pour la page de démonstration angulaire et localisons l'élément:

 // Naviguer vers l'interface utilisateur de Kendo pour la page de démonstration du commutateur angulaire
ActiveBrowser.NavigateTo ("https://www.telerik.com/kendo-angular-ui/components/inputs/switch/", true);

// Trouver le premier commutateur situé dans la première image de la page
KendoAngularSwitch kendoSwitch = Manager.ActiveBrowser.Frames [0] .Find.AllByTagName  ("tagname = kendo-switch"). FirstOrDefault ();

Ensuite, nous utilisons la propriété de contrôle intégrée IsSwitchOn pour confirmer que l'état initial de l'interface utilisateur de Kendo pour le commutateur angulaire est le :

 var expectedToggleState = true;
var actualToggleState = kendoSwitch.IsSwitchOn;
Assert.AreEqual  (expectedToggleState, actualToggleState);
Log.WriteLine ("Switch is on:" + kendoSwitch.IsSwitchOn.ToString ());

Par conséquent, nous invoquons la méthode Toggle exposée par le contrôle pour changer l'état de l'UI Kendo pour Angular Switch sur off :

 // Désactiver
kendoSwitch.Toggle ();
Log.WriteLine ("Switch toggled.");

Enfin, nous pouvons vérifier que l'état de l'UI Kendo pour Angular Switch a vraiment changé à l'état désiré en utilisant à nouveau la propriété IsSwitchOn :

 // Vérifier l'état du commutateur de
var expectedSwitchToggleState = false;
var actualSwitchToggleState = kendoSwitch.IsSwitchOn;
Assert.AreEqual  (expectedSwitchToggleState, actualSwitchToggleState);
Log.WriteLine ("Switch is on:" + kendoSwitch.IsSwitchOn.ToString ());

Test d'automatisation simple et sans codage des contrôles de l'interface utilisateur de Kendo avec Test Studio

Maintenant que nous avons joué avec l'API, voyons comment nous pouvons faire les mêmes choses en toute simplicité. L'application autonome Test Studio et Test Studio Dev Edition donnent accès à tout ce qui précède grâce à une interface conviviale et intuitive.

Vérifications automatiques dans un enregistreur dédié et intuitif

Une fois que vous avez démarré -in Recorder vous obtenez un accès visuel à l'arbre complet des éléments de votre application web. Cliquez simplement sur le bouton "Highlight Element" et vous êtes prêt à partir. Test Studio effectue tout le travail de fond en termes de recherche d'éléments en arrière plan:

Ici, lorsque vous passez la souris sur l'élément de votre choix, vous obtenez un menu contextuel avec traduction contrôles, ainsi que les actions et les vérifications disponibles pour ces contrôles.

Revenons à notre exemple précédent – vérifier le nombre de lignes de votre grille. Nous avons vu comment cela se fait dans le code, voyons maintenant comment vous pouvez le faire sans tracas. Il vous suffit de pointer votre souris sur la grille et d'attendre que le menu contextuel apparaisse. Là, lorsque vous naviguez dans le menu, vous trouverez la vérification nécessaire. Cliquez dessus, et c'est déjà une étape dans votre flux de test:

Oui, c'est aussi simple!

Disons que nous voulons vérifier qu'une certaine cellule de notre grille contient un texte spécifique. Trouvez simplement la cellule qui vous intéresse, survolez-la, naviguez dans le menu contextuel et sélectionnez la vérification dont vous avez besoin:

Encore une fois, c'est vraiment facile!

Traduction Automatique des Actions dans Enregistreur [19659004] Il existe également un moyen facile d'enregistrer l'action, spécifique à un composant d'interface utilisateur de Kendo donné. Au lieu de trouver l'élément et de le convertir au type requis, et de rechercher la méthode appropriée à invoquer, il vous suffit de localiser visuellement le composant souhaité dans votre page d'application, pointez-le avec la souris et effectuez l'action dont vous avez besoin

. Au-dessus de cas avec l'UI de Kendo pour le contrôle de commutateur angulaire, pointez juste à l'élément et basculez-le. L'action est facilement enregistrée comme une étape dans votre test

Facile, non?

Vous pouvez alors ajouter des vérifications pour l'état du Switch, exactement comme nous l'avons fait avec la Grid – survolez l'interface utilisateur de Kendo pour le commutateur angulaire, attendez le menu contextuel, accédez à la vérification nécessaire et cliquez sur:

Piece of cake!

Transformez facilement les actions et les vérifications enregistrées en code [19659004] Pourtant, si vous aimez vraiment, vraiment votre code, ne vous inquiétez pas. Vous pouvez facilement convertir ce que vous venez de cliquer sur le code et cela fonctionnera toujours, comme si vous l'aviez simplement saisi.

Sélectionnez simplement l'étape en question, faites un clic droit dessus, sélectionnez "Modifier dans le code" et sommes prêts à revenir au code que vous aimez:

Et le résultat est le suivant:

 [CodedStep(@"KendoAngularSwitch Switch toggle")]
void public Grid_CodedStep ()
{
  // Commutateur de commutateur KendoAngularSwitch
  Pages.Overview.FrameExampleBasicUsage.KendoSwitchTag.Toggle ();
}

Note de côté: le code généré semble manquer quelque chose juste parce que Test Studio a déjà exécuté la magie de découverte d'élément en silence, lorsque nous avons cliqué sur l'UI Kendo pour l'élément Angular Switch

.

Conclusion

Dans l'ensemble, Testing Framework, Test Studio et Test Studio Dev Edition rendront votre vie de test beaucoup plus facile, et vous devriez en tenir compte lors de la planification de l'automatisation. votre test d'application Web Kendo UI. Que vous souhaitiez écrire votre propre logique de test entièrement dans le code, ou que vous préfériez consacrer plus de temps à d'autres tâches d'automatisation et que vous souhaitiez cliquer sur l'automatisation des tests des composants de Kendo UI, nous vous fournissons les outils nécessaires pour compléter votre journée. tâches quotidiennes. Et, oui, c'est mince et facile.

Voulez-vous les essayer? Commencez un essai gratuit aujourd'hui:

Cadre de test
Studio de test
Studio de test Édition de dev (partie de DevCraft )

Test heureux!