Test d'interface utilisateur d'une application ASP.NET MVC avec Coded UI

Les tests occupent une partie importante dans le cycle de développement d'une application. Différentes techniques de tests (unitaires, d'intégration, de performance, fonctionnels, etc.) sont utilisées pour s'assurer que la solution développée fonctionne correctement et s'aligne avec les exigences initiales.

Les tests fonctionnels, qui interviennent couramment lorsqu'une fonctionnalité est quasiment prête à être livrée, permettent de tester les composantes de l'interface utilisateur et s'assurer qu'une fonctionnalité ou l'application entière marche correctement.

Les tests fonctionnels se font fréquemment de façon manuelle. En fonction de la durée de vie de l'application et des évolutions de cette dernière, les tests fonctionnels manuels peuvent devenir très coûteux. Pour pallier cela, il peut être judicieux d'automatiser une partie des tests fonctionnels.

L'automation doit essentiellement se faire sur des modules qui n'évoluent qu'avec quasiment aucune modification au niveau de l'interface utilisateur. De ce fait, à chaque modification, le test automatisé d'interface utilisateur permettra de valider rapidement les modifications, sans avoir besoin d'une vérification manuelle.

Il existe plusieurs Frameworks et outils pouvant être utilisés pour créer des tests automatisés d'interface utilisateur pour vos applications ASP.NET. Dans un précédent tutoriel, j'ai présenté comment utiliser Selenium WebDrive. Dans cet article, nous verrons comment utiliser Coded UI, le produit développé par Microsoft.

L'outil Coded UI repose sur la technologie UI Automation de Microsoft. UI Automation fournit des API permettant un accès par programmation à des éléments d'interface utilisateur. Elle permet donc de manipuler l'interface utilisateur par des moyens autres que l'entrée standard.

Les tests Coded UI vont permettre aux développeurs d'automatiser des actions sur les contrôles d'interface utilisateur, afin de s'assurer que ceux-ci sont affichés avec les valeurs attendues et produisent les résultats attendus.

Cet article ne nécessite pas de connaissances avancées en programmation. Mais, un minimum en développement Web et plus spécifiquement en ASP.NET MVC est nécessaire pour sa bonne compréhension.

L'exemple sera effectué en utilisant les outils suivants :

• Visual Studio 2015 Entreprise ;
• ASP.NET MVC 5 ;
• Coded UI ;
• Internet Explorer 11.

Je ne vais pas décrire pas à pas la mise sur pied de ce projet. Je vais juste le présenter de façon détaillée avec son code source qui sera utilisé pour démarrer avec cet article. À la fin, les sources complètes seront également disponibles.

La solution de démarrage est une simple application MVC permettant d'enregistrer des étudiants. Elle utilise une base de données SQL Server LocalDb, Entity Framework, et repose sur boostrap et JQuery. C'est le modèle de base d'une application MVC 5 de Visual Studio dans laquelle j'ai pris la peine de virer les éléments inutiles.

IV-A. Le modèle▲

[Table("Etudiant")]
   public partial class Etudiant
   {
       public int Id { get; set; }

       [Required]
       [StringLength(50)]
       public string Nom { get; set; }

       [Required]
       [DisplayName("Prénom")]
       [StringLength(50)]
       public string Prenom { get; set; }

       [Required]
       [DataType(DataType.EmailAddress)]
       [StringLength(50)]
       public string Email { get; set; }

       [Required]
       [StringLength(50)]
       public string Sexe { get; set; }

       [Required]
       [DataType(DataType.Date)]
       [DisplayName("Date de Naissance")]
       public DateTime? DateNais { get; set; }
   }

IV-B. Le contrôleur▲

public class EtudiantsController : Controller
   {
       private CodedUIAppDbContext db = new CodedUIAppDbContext();

       // GET: Etudiants
       public ActionResult Index()
       {
           return View(db.Etudiant.ToList());
       }

     
       // GET: Etudiants/Create
       public ActionResult Create()
       {
           return View();
       }

       // POST: Etudiants/Create
       // Afin de déjouer les attaques par sur-validation, activez les propriétés spécifiques que vous voulez lier. Pour 
       // plus de détails, voir http://go.microsoft.com/fwlink/?LinkId=317598.
       [HttpPost]
       [ValidateAntiForgeryToken]
       public ActionResult Create([Bind(Include = "Id,Nom,Prenom,Email,Sexe,DateNais")] Etudiant etudiant)
       {
           if (ModelState.IsValid)
           {
               db.Etudiant.Add(etudiant);
               db.SaveChanges();
               return RedirectToAction("Index");
           }

           return View(etudiant);
       }
}

IV-C. La vue▲

Nos cas de tests seront effectués sur les deux vues suivantes :

• la page d'index (liste des étudiants) ;

  

• la page d'ajout d'un étudiant ;

Vous pouvez télécharger le projet de démarrage à partir de cette page.

Nous allons maintenant passer à la création et la configuration de notre projet de test.

Faites un clic droit sur votre solution dans l'explorateur de solutions et sélectionnez Ajouter, puis Nouveau Projet. Dans le menu de gauche, cliquez sur Test, puis sélectionnez « Coded UI Test Project ». Entrez le nom du projet « CodedUITest », puis cliquez sur OK.

Le projet sera créé, et une fenêtre contextuelle sera affichée, vous proposant de générer le code pour votre test Coded UI. Fermez cette fenêtre.

Avant de plonger dans le vif du sujet, il est nécessaire de présenter dans un premier temps les spécificités d'un projet Coded UI.

Contrairement aux tests unitaires dont les classes sont décorées avec l'attribut [TestClass], les classes de test des projets Coded UI sont décorées avec l'attribut [CodedUITest].

La mise en place d'un projet Coded UI ne demande pas beaucoup d'effort de programmation. En effet, Microsoft offre des outils permettant d'enregistrer des séquences d'actions au niveau de l'interface utilisateur et de générer le code source correspondant. D'ailleurs, la firme recommande d'utiliser autant que possible « Coded UI Test Builder » pour générer le code des tests.

Voyons concrètement de quoi il s'agit.

Ouvrez le fichier CodeUITest1.cs. Décommentez la méthode :

       [TestInitialize()]
       public void MyTestInitialize()
       {
           // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
       }

Faites un clic droit sur la méthode MyTestInitialize(), puis cliquez sur « Generate Code for CodedUI Test », puis sur « Use Coded UI Test Builder ».

Une fenêtre « UIMap-Coded UI Test Builder » va s'afficher à l'extrême droite de votre écran, juste au-dessus de la barre de tâches.

Avant de continuer, assurez-vous que votre application fonctionne et peut être exécutée. Si vous utilisez donc l'application de démonstration, vous devez être en mesure de taper son URL dans Internet Explorer et la voir s'afficher.

Cliquez sur le bouton permettant de lancer l'enregistrement d'une séquence d'actions. Ouvrez ensuite votre navigateur, puis saisissez l'adresse URL de votre site. Lorsque c'est fait, cliquez a nouveau sur ce bouton pour mettre une pause aux enregistrements. Cliquez ensuite sur le bouton pour afficher les actions enregistrées.

Vous pouvez supprimer les actions non désirées en faisant un clic droit sur ces actions, puis en cliquant sur supprimer.

Cliquez sur le bouton pour générer le code, puis renseignez le nom de la méthode ainsi que la description.

Cliquez ensuite sur « Add and Generate » et fermez le Builder.

Vous verrez la ligne de code suivante dans la méthode MyTestInitialize : this.UIMap.RecordedLaunchApp(). Cette méthode sera exécutée avant chaque méthode de test de cette classe.

Vous remarquez également la présence des fichiers suivants dans votre projet :

• UIMap.uitest affiche une interface permettant de visualiser les séquences d'actions qui ont été enregistrées ainsi que les contrôles UI Map ;
• le fichier UIMap.cs n'implémente aucune méthode. Il sera utilisé pour du code généré que nous souhaitons modifier. Nous reviendrons sur son utilisation plus tard ;
• Le fichier UIMap.Designer.cs contient le code qui a été généré. Vous ne devez en aucun cas modifier ce fichier, sinon vos modifications seront perdues lors de la prochaine génération du code de test.

Passons maintenant à la génération du code de test pour tester l'interface de notre application MVC d'exemple.

Ajoutez un nouveau fichier CodedUITestEtudiant.cs à votre projet de test (clic droit sur le projet de test, puis sur Ajouter, ensuite sur Nouvel élément. Dans la fenêtre qui s'affiche, sélectionnez Test dans le menu à gauche, puis cliquez sur Coded UI Test et saisissez le nom du test).

Fermez la fenêtre qui s'affiche vous invitant à enregistrer une séquence d'actions pour votre test. Décommentez la méthode MyTestInitialize() et ajoutez la ligne de code suivante dans cette méthode :

this.UIMap.RecordedLaunchApp();

Ajoutez la méthode CodedUITestAjoutEtudiant() à votre classe :

[TestMethod]
       public void CodedUITestAjoutEtudiant()
       {
           
       }

Dans ce test, nous allons vérifier si un contrôle est effectué sur la date et que le message d'erreur désiré est affiché lorsqu'une date invalide est saisie dans le champ Date de naissance :

• faites un clic droit sur cette méthode, puis démarrez avec l'enregistrement d'une nouvelle séquence d'actions (Generate Code for Coded UI Test/Use Coded UI Test Builder) ;
• cliquez sur le bouton pour enregistrer une séquence d'actions ;
• ouvrez votre application, puis cliquez sur « Nouvel Etudiant » ;
• dans la fenêtre qui s'affiche, remplissez les informations sur un étudiant avec une date invalide ;
• cliquez sur le bouton enregistrer ;
• arrêtez l'enregistrement, puis affichez les actions qui ont été enregistrées pour valider celles-ci ;
• générez ensuite le code de votre test.

Nous allons maintenant ajouter une assertion pour compléter notre méthode de test. L'assertion permettra de vérifier si un message est affiché lorsqu'une date incorrecte est saisie dans la zone Date de Naissance.

Pour cela :

• lancez de nouveau « Coded UI Test Builder » ;

• cliquez sur le bouton permettant de créer une nouvelle assertion ;

  

• déplacez ensuite le crosshair qui va s'afficher sur votre application ;

• lâchez la souris quand la zone de texte affichant le message d'avertissement sera sélectionnée ;

  

• dans les propriétés qui seront affichées, sélectionnez InnerText ;

• cliquez ensuite sur Add Assertion ;

  

• cliquez ensuite sur OK dans la fenêtre qui va s'afficher ;

• cliquez sur le bouton pour générer le code ;

• donnez le nom de l'assertion et générez le code.

Le code de votre méthode de test va désormais ressembler à ceci :

[TestMethod]
       public void CodedUITestAjoutEtudiant_CasInvalide()
       {

           this.UIMap.RecordedAjoutEtudiant_Invalide();
           this.UIMap.AssertValidationDate();
    }

En allant sur la définition de l'assertion (placez la souris sur  this.UIMap.AssertValidationDate, puis cliquez sur F12), vous obtiendrez le code suivant qui a été ajouté au fichier UIMap.Designer.cs :

public void AssertValidationDate()
       {
           #region Variable Declarations
           HtmlSpan uILavaleur25455nestpasPane = this.UIMSNCanadaCommuniquezWindow.UICreateCodedUIAppDocument.UILavaleur25455nestpasPane;
           #endregion

           // Verify that the 'InnerText' property of 'La valeur « 25455 » n'est pas valide pou' pane equals 'Veuillez saisir une date valide'
           Assert.AreEqual(this.AssertValidationDateExpectedValues.UILavaleur25455nestpasPaneInnerText, uILavaleur25455nestpasPane.InnerText);
       }

Exécutez votre test.

Maintenant, nous allons légèrement modifier notre assertion pour qu'elle échoue. Nous allons apporter une modification à la valeur attendue de l'assertion. Ainsi, elle ne correspondra plus à la valeur retournée par l'application, ce qui entraînera un échec de l'assertion.

Ouvrez le fichier UIMap.uitest. Ce dernier va vous afficher la liste des actions que vous avez enregistrées. Sélectionnez l'action de l'assertion.

Dans la fenêtre des propriétés, retrouvez la propriété Expected Value et modifiez sa valeur.

Enregistrez les modifications, puis lancez l'exécution de votre test Coded UI.

Votre test va échouer. Si vous cliquez sur Output dans l'explorateur de tests, vous obtiendrez une fenêtre avec un fichier joint, qui représente une capture d'écran de votre application lorsque l'assertion a échoué.

Désormais, vous savez comment enregistrer une séquence d'actions pour votre méthode de test Coded UI et générer le code de l'assertion que vous souhaitez.

Un test piloté par les données est un test qui est exécuté à plusieurs reprises pour chaque ligne dans une source de données. Cette approche permet au développeur de tester une fonction à l'aide de plusieurs valeurs d'entrée. Ainsi, il n'aura plus besoin d'écrire plusieurs tests, ou créer un tableau et utiliser une boucle dans sa méthode de test, pour obtenir une couverture optimale de son code.

L'utilisation des DDT offre de nombreux avantages, dont :

• une meilleure couverture du code ;
• une réduction des cas de test à écrire ;
• plus de facilité dans la maintenant de tests ;
• une séparation entre données de test et script de test. De ce fait, la source de données peut être mise à jour à tout moment, même si le projet de test a déjà été publié.

La mise en œuvre du DDT nécessite le recours à une source de données contenant le jeu de données qui sera utilisé. La source de données peut être : un fichier CSV, un fichier XML, un fichier Excel ou une base de données, notamment SQL Server.

Dans le cadre de ce billet, nous allons utiliser comme source de données un fichier CSV (data.csv), avec les données suivantes :

Ajoutez à votre projet de test un nouveau fichier texte. Pour cela :

• faites un clic droit sur votre projet, puis sur Ajouter, ensuite Nouvel Elément ;
• dans le menu de gauche, cliquez sur Général ;
• dans la zone de recherche à droite, saisissez texte ;
• dans la liste, choisissez fichier texte ;
• donnez le nom data.csv au fichier, puis cliquez sur Ajouter.

Copiez les données ci-dessus dans ce fichier. Vous devez vous rassurer que le fichier sera copié dans le répertoire de sortie lorsque vous générerez votre application. (Sélection du fichier dans l'explorateur de solution, puis dans la fenêtre des propriétés, mettre le champ « Copier dans le répertoire de sortie » à la valeur copier si c'est nouveau.)

Il est également important de sauvegarder le fichier en utilisant le bon encodage. Dans Visual Studio, ouvrez le fichier data.csv, allez sur le menu Fichier, puis cliquez sur « Advanced Save Options » et choisissez comme encodage Unicode (UTF-8 without signature) - Codepage 65001.

Ouvrez le fichier CodedUITestEtudiant.cs, et ajoutez une nouvelle méthode de test à ce dernier.

[TestMethod]
      public void CodedUITestAjoutEtudiant()
       {

           
       }

Vous allez enregistrer une nouvelle séquence d'actions permettant d'enregistrer un Etudiant, en remplissant correctement tous les champs.

Ceci fait, vous allez ajouter une nouvelle assertion permettant de vérifier que l'étudiant a été enregistré avec succès. L'assertion permettra de vérifier que l'adresse Email de l'étudiant que vous venez d'enregistrer se trouve dans la liste des étudiants. Vous devez donc placer le crosshair sur la cellule Email dans la liste, ensuite ajouter une assertion sur la propriété Innertext.

Ceci fait, vous aurez le code suivant dans votre méthode AjoutEtudiant

[TestMethod]
       public void CodedUITestAjoutEtudiant()
       {

            this.UIMap.RecordedAjoutEtudiant();
           this.UIMap.AssertEtudiantAjoute();
       }

Les prochaines étapes vont entraîner une légère modification du code qui a été généré par le builder. Vu qu'il est déconseillé de modifier le code dans le fichier UIMap.Designer.cs, vous devez déplacer le code à modifier dans le fichier UIMap.cs. D'où sa présence dans le projet.

Nous voulons modifier la méthode RecordedAjoutEtudiant. Vous devez déplacer cette dernière. Pour cela :

• ouvrez le fichier UIMAP.uitest ;
• faites un clic droit sur la méthode que vous voulez modifier ;
• dans le menu contextuel qui s'affiche, cliquez sur « Move code to IUMap.cs » ;
• cliquez ensuite sur Oui dans la fenêtre d'alerte qui va s'afficher.

Si vous ouvrez le fichier UIMap.cs, vous verrez le code qui a été transféré dans ce dernier.

Lors de l'enregistrement d'une séquence d'actions, le builder identifie chaque contrôle d'interface utilisateur sur lequel vous avez effectué une action et crée un objet HTML correspondant. Ces objets sont listés dans la zone UI Control Map.

Dans notre cas, le builder n'a pas généré les objets représentant l'ensemble des éléments de notre formulaire. En effet, pour le champ Sexe, nous avons deux inputs de type radio dans notre formulaire.

<input data-val="true" data-val-length="Le champ Sexe doit être une chaîne dont la longueur maximale est de 50." data-val-length-max="50" data-val-required="Le champ Sexe est requis." htmlAttributes="{ class = form-control }" id="Sexe" name="Sexe" type="radio" value="Homme" /> Homme
             <input htmlAttributes="{ class = form-control }" id="Sexe" name="Sexe" type="radio" value="Femme" /> Femme

Le code est généré uniquement pour le bouton radio sur lequel on a cliqué lors de l'enregistrement de la séquence d'actions.

 public HtmlRadioButton UISexeRadioButton
       {
           get
           {
               if ((this.mUISexeRadioButton == null))
               {
                   this.mUISexeRadioButton = new HtmlRadioButton(this);
                   #region Search Criteria
                   this.mUISexeRadioButton.SearchProperties[HtmlRadioButton.PropertyNames.Id] = "Sexe";
                   this.mUISexeRadioButton.SearchProperties[HtmlRadioButton.PropertyNames.Name] = "Sexe";
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.Value] = "Homme";
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.LabeledBy] = "Sexe";
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.Title] = null;
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.ItemCount] = "2";
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.Class] = null;
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.ControlDefinition] = "name=\"Sexe\" id=\"Sexe\" type=\"radio\" value";
                   this.mUISexeRadioButton.FilterProperties[HtmlRadioButton.PropertyNames.TagInstance] = "5";
                   this.mUISexeRadioButton.WindowTitles.Add("Create - Coded UI App");
                   #endregion
               }
               return this.mUISexeRadioButton;
           }
       }

Nous allons donc ajouter le second bouton radio à notre UI Control Map. Pour cela :

• vous devez faire un clic droit sur UIMap.uitest puis sur « Edit With Coded UI Test Builder » ;
• dans la fenêtre du Builder, vous devez déplacer le crosshar sur l'interface de votre application, jusqu'à ce que le bouton radio pour lequel on veut générer le code soit sélectionné ;
• cliquez sur le bouton avec l'infobulle « Show UI Control Map », pour visualiser plus d'options ;

• cliquez ensuite sur le bouton avec l'infobulle « Add control to UI Control Map » ;

  

• fermez cette fenêtre, puis cliquez sur le bouton pour générer le code dans le menu du builder ;

• cliquez enfin sur Generate et fermez le builder.

Renommez vos UIsexeRadioButton en UIsexeRadioButtonH et UisexeRadioButtonF. Vous devez juste faire un clic droit sur le contrôle dans la liste des contrôles (UIMap.uitest) et cliquer sur Rename. Pour identifier chaque contrôle, vous devez cliquer sur Filter properties dans la fenêtre des propriétés du contrôle.

Ouvrez le fichier UIMap.cs et ajoutez la propriété suivante à la classe RecordedAjoutEtudiantParams :

public string UISexeEditText = "Homme";

Modifiez la méthode RecordedAjoutEtudiant et ajoutez le code suivant juste après la déclaration des variables.

if(RecordedAjoutEtudiantParams.UISexeEditText == "Femme")
               uISexeRadioButton =  this.UIMSNCanadaCommuniquezWindow.UICreateCodedUIAppDocument.UISexeRadioButtonF;

Ouvrez le fichier CodedUITestEtudiant.cs et positionnez-vous sur la méthode CodedUITestAjoutEtudiant(). Cette dernière doit être décorée avec l'attribut [Datasource] contenant les informations de connexion à votre source de données que vous allez utiliser dans la méthode de test et la manière dont vous voulez accéder à ces données (séquentiel ou aléatoire). Vous allez donc décorer la méthode CodedUITestAjoutEtudiant() avec :

[DataSource("Microsoft.VisualStudio.TestTools.DataSource.CSV", "|DataDirectory|\\data.csv", "data#csv", DataAccessMethod.Sequential), DeploymentItem("data.csv")]

Les données récupérées dans la source de données seront disponibles au travers de la propriété DataRow de l'objet TestContext.

Le code complet de la méthode CodedUITestAjoutEtudiant() est le suivant :

 [TestMethod]
       [DataSource("Microsoft.VisualStudio.TestTools.DataSource.CSV", "|DataDirectory|\\data.csv", "data#csv", DataAccessMethod.Sequential), DeploymentItem("data.csv")]
       public void CodedUITestAjoutEtudiant()
       {
           
          this.UIMap.RecordedAjoutEtudiantParams.UINomEditText = TestContext.DataRow["Nom"].ToString();
           this.UIMap.RecordedAjoutEtudiantParams.UIPrénomEditText = TestContext.DataRow["Prenom"].ToString();
           this.UIMap.RecordedAjoutEtudiantParams.UIEmailEditText1 = TestContext.DataRow["Email"].ToString();
           this.UIMap.RecordedAjoutEtudiantParams.UISexeEditText = TestContext.DataRow["Sexe"].ToString();
           this.UIMap.RecordedAjoutEtudiantParams.UIDatedeNaissanceEditText = Convert.ToDateTime(TestContext.DataRow["DateNais"].ToString()).ToShortDateString();

           this.UIMap.RecordedAjoutEtudiant();
           this.UIMap.AssertEtudiantAjoute();

       }

Ceci fait, vous pouvez procéder à l'exécution de votre test :

En bonus, ajoutez la ligne de code suivante au début de la méthode RecordedAjoutEtudiant(), pour obtenir un fichier HTML avec la description et les captures d'écran pour toutes les actions qui ont été effectuées lors de l'exécution du test :

Playback.PlaybackSettings.LoggerOverrideState = HtmlLoggerState.AllActionSnapshot;

Vous devez avoir recours au DDT lorsque pour un cas de test, il faut un jeu de données pour s'assurer d'une couverture optimale de la fonction à tester.

Le code source complet de l'application d'exemple est disponible sur ma page GitHub.

Automatiser les tests d'interface utilisateur permet d'éviter de faire des tests manuels à chaque évolution d'une application. Les tests automatisés d'interface utilisateur permettent non seulement de garantir la qualité de l'application, mais également de réduire le coût que les tests manuels peuvent entraîner.

Toutefois, la mise en place des tests d'interface utilisateur pour une application dont l'interface est modifiée fréquemment peut être coûteuse pour l'équipe. Car les tests devront également être modifiés pour prendre en compte les changements au niveau de l'interface utilisateur.

Je tiens à remercier Claude Leloup pour sa relecture orthographique.

• Test d'interface utilisateur d'une application ASP.NET en utilisant Selenium ;
• MSDN.