Test d'interface utilisateur d'une application ASP.NET avec Selenium

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 le cadre de ce tutoriel, nous allons découvrir Selenium, qui est l'un des leaders dans le domaine et qui offre une certaine flexibilité dans l'utilisation.

Selenium est un ensemble d'outils de test d'interface utilisateur pour les applications Web. Selenium offre un environnement de développement intégré (Selenium IDE), qui permet d'enregistrer des tests, sans avoir besoin de maîtriser un langage de programmation spécifique. Les tests enregistrés peuvent être générés et réutilisés dans l'un des langages de programmation qui sont supportés par l'outil. Dans la panoplie d'outils fournis par Selenium, on retrouve également Selenium WebDriver, qui offre une API permettant de lancer un navigateur et prendre son contrôle pour effectuer des tests. Selenium WebDriver prend en charge les navigateurs Chrome, Internet Explorer ou encore Firefox. Il supporte également plusieurs langages de programmation, dont C#. Java, Python, Ruby, PHP, Perl ou encore JavaScript.

Dans le cadre de cet article, nous verrons comment utiliser Selenium WebDriver avec le navigateur Google Chrome, pour automatiser les tests d'interface utilisateur d'une simple application ASP.NET MVC.

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 Community ;
• ASP.NET MVC 5 ;
• Selenium Web Driver ;
• Google Chrome.

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 que 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 SeleniumAppDbContext db = new SeleniumAppDbContext();

       // 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 avec Selenium 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.

Pour cela, vous devez :

• faire un clic droit sur votre solution dans l'explorateur de solution et sélectionner Ajouter, puis cliquer sur Nouveau Projet ;
• dans le menu de gauche, cliquer sur Test, puis sélectionner Projet de test unitaire ;
• entrer le nom du projet « SeleniumApp.Tests », puis cliquer sur OK.

Nous allons maintenant procéder à la configuration de notre projet pour utiliser Selenium WebDrive.

La première étape sera l'ajout d'une référence à Selenium WebDrive. Pour cela :

• faites un clic droit sur votre projet de test et cliquez sur Gérer les packages Nuget ;
• allez sur Parcourir, puis saisissez Selenium dans la zone de recherche ;
• sélectionnez Selenium.WebDriver, puis cliquez sur Installer.

Vous allez répéter les mêmes étapes pour installer le Driver Selenium pour le navigateur Chrome dans votre projet. Ce package Nuget va ajouter le fichier Chromedriver.exe dans le dossier packages de votre projet. Lorsque vous allez exécuter votre test, il sera copié dans le bin et sera utilisé par Webdriver pour prendre le contrôle de Chrome.

Nous allons maintenant écrire et tester un petit exemple pour nous assurer que tout fonctionne correctement.

Ouvrez le fichier UnitTest1.Cs. Ajoutez les références suivantes  :

using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;

Déclarez une variable de type IWebDriver. Cette dernière sera utilisée pour piloter le navigateur Chrome en fonction des actions que vous souhaitez :

private static IWebDriver _driverChrome;

Créez une méthode Init(), avec l'attribut [ClassInitialize]. Elle sera utilisée pour initialiser vos tests. C'est la première méthode de la classe qui sera exécutée avant les autres méthodes.

[ClassInitialize]
       public static void Init(TestContext context)
       {
           _driverChrome = new ChromeDriver();
               
       }

Nous allons maintenant écrire le code pour nos actions dans la méthode TestMethod1(). Notre objectif est de lancer le navigateur Chrome, puis aller sur Google et lancer une recherche avec le mot clé Developpez.com.

Pour afficher une page dans le navigateur, vous allez utiliser la ligne de code suivante :

_driverChrome.Navigate().GoToUrl("http://monsite.com");

Pour entrer du texte dans une zone de saisie, par exemple, vous devez d'abord trouver un paramètre qui permettra d'identifier cette zone. Ça peut être l'id, le nom de l'input, etc. Nous reviendrons dessus plus tard.

Vous pouvez utiliser les outils de développement de votre navigateur pour identifier les paramètres à utiliser.

Voici la ligne de code qui permettra de saisir developpez.com dans la zone de recherche de Google :

_driverChrome.FindElement(By.Id("lst-ib")).SendKeys("developpez.com");

La ligne de code suivante sera utilisée pour simuler la touche entrer, qui lancera la recherche :

_driverChrome.FindElement(By.Id("lst-ib")).SendKeys(Keys.Enter);

C'est tout. Le code complet de cette classe est le suivant :

[TestClass]
   public class UnitTest1
   {

       private static IWebDriver _driverChrome;

       [AssemblyInitialize]
       public static void Init(TestContext context)
       {
           _driverChrome = new ChromeDriver();
           

       }

       [TestMethod]
       public void TestMethod1()
       {
             _driverChrome.Navigate().GoToUrl("https://www.google.com");

           _driverChrome.FindElement(By.Id("lst-ib")).SendKeys("developpez.com");

           _driverChrome.FindElement(By.Id("lst-ib")).SendKeys(Keys.Enter);

       }
   }

Enregistrez vos modifications, ensuite allez sur Test dans la barre de menu de Visual Studio, puis sur Exécuter, ensuite Tous les tests, pour lancer l'exécution de vos tests.

Selenium offre l'API WebDriver pour permettre aux développeurs d'interagir avec le navigateur et tester leur application Web.

L'interface IWebDriver définit les propriétés permettant d'obtenir les informations sur la page active, dont le titre ou encore l'URL :

IwebDriver hérite de IsearchContext, qui dispose des méthodes FindElement() et FindElements(). Elles retournent des objets de type IwebElement, qui représentent les éléments que l'on peut trouver sur une page Web : zone de saisie, bouton, image, texte, etc.

Les méthodes FindElement() et FindElements() prennent en paramètre un critère de recherche qui va permettre d'identifier l'élément que vous recherchez. Le critère de recherche peut être l'id d'un champ de saisie, le nom de la classe css qui est appliquée à un texte, le nom d'un champ de formulaire, etc.

Pour rechercher par exemple une zone de saisie à partir de son id, nous pouvons procéder comme suit :

IWebElement element = _driverChrome.FindElement(By.Id("Nom"));

ensuite, pour effectuer une saisie dans cette zone de texte : `:

element.SendKeys("Pascal");

et enfin pour soumettre :

element.Submit();

Passons maintenant à un exemple concret, qui permettra de tester les fonctionnalités de notre application Web.

Ajoutez un nouveau fichier TestEtudiant.cs à votre projet de test (clic droit sur le projet de test dans Visual Studio, puis sur Ajouter, ensuite sur Nouvel élément. Dans la fenêtre qui s'affiche, sélectionner Test dans le menu à gauche, puis cliquer sur Basic Unit Test et saisir le nom du test).

Déclarez le driver et ajoutez la méthode d'initialisation de la classe :

private static IWebDriver _driverChrome;
      

       [ClassInitialize]
       public static void Init(TestContext context)
       {
           _driverChrome = new ChromeDriver();

       }

Vous allez maintenant écrire la méthode pour tester l'enregistrement d'un nouvel étudiant.  

       [TestMethod]
       public void TestAjoutEtudiant()
       {

           
       }

Après l'ouverture du navigateur, vous devez saisir l'adresse du site. Cette simulation se fera via la ligne de code suivante :

_driverChrome.Navigate().GoToUrl("http://localhost:64446/");

Ensuite, il faut se rendre sur la page d'enregistrement d'un étudiant. Ce qui se traduit par le code suivant :

_driverChrome.FindElement(By.LinkText("Nouvel Etudiant")).Click();

Sur cette page, vous allez remplir les champs Nom, Prenom et Email :

_driverChrome.FindElement(By.Id("Nom")).SendKeys("Jean");
_driverChrome.FindElement(By.Id("Prenom")).SendKeys("Bernard");
_driverChrome.FindElement(By.Id("Email")).SendKeys("j.bernard@gmail.com");

Le champ sexe étant de type radio, nous ne pouvons pas exploiter l'id ou le nom pour effectuer la recherche de l'élément, car les deux inputs ont le même id et le même nom. Pour pallier cela, nous allons utiliser une expression XPath qui va utiliser comme filtre la valeur pour trouver le bon type radio.

 _driverChrome.FindElement(By.Xpath("//input[@value='Homme']")).Click();

Passons maintenant au champ DateNais. Celui-ci utilise le composant jQuery IU datepicker. Il n'est pas nécessaire d'essayer de tester si ce composant marche. Nous allons nous limiter à saisir une date dans ce champ.

Cependant, un simple

_driverChrome.FindElement(By.Id("DateNais")).SendKeys("1995-05-03");

ne marchera pas. La solution la plus facile est d'avoir recours à un script JavaScript en utilisant IJavaScriptExecutor de Selenium :

 IJavaScriptExecutor js = _driverChrome as IJavaScriptExecutor;
 js.ExecuteScript("document.getElementById('DateNais').value='1992-03-02'");

Pour finir, il faut enregistrer les informations saisies en procédant comme suit :

 _driverChrome.FindElement(By.Id("Enregistrer")).Submit();

Le code complet est le suivant :

      [TestMethod]
       public void TestAjoutEtudiant()
       {

           _driverChrome.Navigate().GoToUrl("http://localhost:64446/");

           
           _driverChrome.FindElement(By.LinkText("Nouvel Etudiant")).Click();
           _driverChrome.FindElement(By.Id("Nom")).SendKeys("Jean");
           _driverChrome.FindElement(By.Id("Prenom")).SendKeys("Bernard");
           _driverChrome.FindElement(By.Id("Email")).SendKeys("j.bernard@gmail.com");
           _driverChrome.FindElement(By.XPath("//input[@value='Homme']")).Click();
           IJavaScriptExecutor js = _driverChrome as IJavaScriptExecutor;
          js.ExecuteScript("document.getElementById('DateNais').value='1992-03-02'");

           _driverChrome.FindElement(By.Id("Enregistrer")).Submit();
       

       }

Vous pouvez procéder à l'exécution de votre test d'interface utilisateur. Vous devez au préalable exécuter votre application et vous assurer qu'il est accessible au lien mentionné ci-dessus.

Votre test s'exécute correctement. Que les informations soient enregistrées ou pas, le test sera toujours marqué comme « réussi ». Pour remédier à cela, vous allez ajouter une assertion à votre méthode de test.

Lorsque les informations sont enregistrées correctement, nous constatons une redirection vers la liste des étudiants, avec le nouvel enregistrement. Notre assertion va vérifier si le nouvel enregistrement figure dans la liste. Si c'est le cas, le test réussi. Sinon, le test échoue.

Pour effectuer cela, nous allons écrire la méthode suivante pour vérifier que le nouvel enregistrement est présent sur la page :

public Boolean VerifElement(string valueToFind)
       {
           try
           {
               _driverChrome.FindElement(By.LinkText(valueToFind));
               return true;
           }
           catch (NoSuchElementException e)
           {
                    return false;
           }
       }

Ensuite, nous allons ajouter notre assertion à la méthode TestAjoutEtudiant :

Assert.IsTrue(VerifElement("j.bernard@gmail.com"));

En cas d'échec, si nous souhaitons obtenir une capture d'écran de l'interface de notre application à cet instant, nous pouvons le faire grâce à la méthode suivante :

public void CaptureEcran(string fileName)
       {

           Screenshot ss = ((ITakesScreenshot)_driverChrome).GetScreenshot();
           ss.SaveAsFile(fileName+"_"+ DateTime.Now.ToString("yyyy-mm-dd-HHmmss")+".png", ImageFormat.Png);

       }

Ensuite nous allons modifier la méthode VerifElement() et ajouter la ligne de code suivante dans le catch :

CaptureEcran("echec_ajoutetudiant");

À l'exécution de votre test, en cas d'échec, une image sera générée et enregistrée par défaut dans le dossier bin.

Lors de vos tests, vous allez vous rendre compte que la fenêtre du navigateur Chrome lancé par le driver Selenium ne sera pas fermée à la fin des opérations. En effet, il nous manque une méthode qui devra s'exécuter à la fin des tests pour disposer le driver et fermer la fenêtre associée. Cette méthode doit être décorée de l'attribut [ClassCleanup]. Son code est le suivant :

  [ClassCleanup]
       public static void Cleanup()
       {
           if (_driverChrome != null)
               _driverChrome.Quit();
       }

Le code complet de la classe TestEtudiant est le suivant :

[TestClass]
   public class TestEtudiant
   {

       private static IWebDriver _driverChrome;
      

       [ClassInitialize]
       public static void Init(TestContext context)
       {
           _driverChrome = new ChromeDriver();

       }

       [TestMethod]
       public void TestAjoutEtudiant()
       {

           _driverChrome.Navigate().GoToUrl("http://localhost:64446/");

           
           _driverChrome.FindElement(By.LinkText("Nouvel Etudiant")).Click();
           _driverChrome.FindElement(By.Id("Nom")).SendKeys("Jean");
           _driverChrome.FindElement(By.Id("Prenom")).SendKeys("Bernard");
           _driverChrome.FindElement(By.Id("Email")).SendKeys("j.bernard@gmail.com");
           _driverChrome.FindElement(By.XPath("//input[@value='Homme']")).Click();
           IJavaScriptExecutor js = _driverChrome as IJavaScriptExecutor;
          js.ExecuteScript("document.getElementById('DateNais').value='1992-03-02'");

           _driverChrome.FindElement(By.Id("Enregistrer")).Submit();

          Assert.IsTrue(VerifElement("j.bernard@gmail.com"));
       

       }

       public Boolean VerifElement(string valueToFind)
       {
           try
           {
               _driverChrome.FindElement(By.LinkText(valueToFind));
               return true;
           }
           catch (NoSuchElementException e)
           {
               CaptureEcran("echec_ajoutetudiant");
               return false;
           }
       }

       public void CaptureEcran(string fileName)
       {

           Screenshot ss = ((ITakesScreenshot)_driverChrome).GetScreenshot();
           ss.SaveAsFile(fileName+"_"+ DateTime.Now.ToString("yyyy-mm-dd-HHmmss")+".png", ImageFormat.Png);

       }

       [ClassCleanup]
       public static void Cleanup()
       {
           if (_driverChrome != null)
               _driverChrome.Quit();
       }


   }

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 des tests ;
• une séparation entre données de tests et script de tests. 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 ;
• une base de données.

Dans le cadre de cet article , nous allons utiliser comme source de données un fichier Excel (data.xlsx), avec les données suivantes :

Après avoir créé le fichier, vous allez l'ajouter dans le répertoire de votre projet de test, ensuite vous allez l'inclure dans le projet (clic droit sur votre projet dans Visual Studio, puis sur ajouter, ensuite sur élément existant). Vous devez vous assurer que le fichier sera copié dans le répertoire de sortie lorsque vous générez votre application (sélection du fichier dans l'explorateur de solution de Visual Studio, 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 »).

Ouvrez le fichier TestEtudiant.cs. Vous allez déclarer une nouvelle instance de l'objet TestContext. Cet objet est utilisé par le framework de test pour enregistrer les informations de la source de données utilisée pour les DDT.

private TestContext _testContextInstance;
public TestContext TestContext
{
   get { return _testContextInstance; }
   set { _testContextInstance = value; }
}

Cela fait, vous allez créer une nouvelle méthode de test TestAjoutEtudiantDDT(). En principe, nous devions modifier la méthode TestAjoutEtudiant() pour prendre en compte le DDT. Mais je préfère séparer les deux dans le cadre de ce tutoriel.

 [TestMethod]
  public void TestAjoutEtudiantDDT()
       {
       }

Cette méthode doit être décorée de l'attribut [Datasource] contenant les informations de connexion à votre source de données, le nom de la table (Feuil1$) que vous allez utiliser dans la méthode de test et la manière dont vous voulez accéder à ces données (séquentielle ou aléatoire). Vous allez donc décorer la méthode TestAjoutEtudiantDDT() avec :

[DataSource("System.Data.Odbc", "Dsn=Excel Files;dbq=|DataDirectory|\\data.xlsx;defaultdir=.; driverid=790;maxbuffersize=2048;pagetimeout=5", "Feuil1$", DataAccessMethod.Sequential), DeploymentItem("data.xlsx")]

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 TestAjoutEtudiantDDT() est le suivant :

[TestMethod]
       [DataSource("System.Data.Odbc", "Dsn=Excel Files;dbq=|DataDirectory|\\data.xlsx;defaultdir=.; driverid=790;maxbuffersize=2048;pagetimeout=5", "Feuil1$", DataAccessMethod.Sequential), DeploymentItem("data.xlsx")]
       public void TestAjoutEtudiantDDT()
       {

           _driverChrome.Navigate().GoToUrl("http://localhost:64446/");

           _driverChrome.FindElement(By.LinkText("Nouvel Etudiant")).Click();
           _driverChrome.FindElement(By.Id("Nom")).SendKeys(TestContext.DataRow["Nom"].ToString());
           _driverChrome.FindElement(By.Id("Prenom")).SendKeys(TestContext.DataRow["Prenom"].ToString());
           _driverChrome.FindElement(By.Id("Email")).SendKeys(TestContext.DataRow["Email"].ToString());
           _driverChrome.FindElement(By.XPath("//input[@value='"+ TestContext.DataRow["Sexe"].ToString() + "']")).Click();

           IJavaScriptExecutor js = _driverChrome as IJavaScriptExecutor;
           js.ExecuteScript("document.getElementById('DateNais').value='" + Convert.ToDateTime(TestContext.DataRow["DateNais"]).ToShortDateString() + "'");

           _driverChrome.FindElement(By.Id("Enregistrer")).Submit();

           Assert.IsTrue(VerifElement(TestContext.DataRow["Email"].ToString()));
       }

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

Dans l'explorateur de test de Visual Studio, le volet information va afficher le résultat pour chaque itération qui est identifiable par l'index de la ligne de données.

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 Malick SECK pour sa relecture orthographique.

• La documentation officielle de Selenium .