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 tests 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 ce billet de blog, 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.
Ce billet de blog 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
Mise sur pied du projet qui sera utilisé pour les tests
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.
Le Model
En guise de model, nous avons une classe Etudiant avec ses propriétés. Le code de cette classe est le suivant :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | [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; } } |
Le contrôleur
Le contrôleur contient les méthodes permettant d’effectuer les opérations CRUD : Ajout, Lecture, Modification et suppression. Seuls l’affichage et l’enregistrement nous intéressent. Voici le code :
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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); } } |
La Vue
Nos cas de test 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.
Création du 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 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 rassurer que tout fonctionne correctement.
Ouvrez le fichier UnitTest1.Cs. Ajoutez les références suivantes *:
| Code c# : | Sélectionner tout |
1 2 | 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*:
| Code c# : | Sélectionner tout |
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.
| Code c# : | Sélectionner tout |
1 2 3 4 5 | [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 :
| Code c# : | Sélectionner tout |
_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*:
| Code c# : | Sélectionner tout |
_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*:
| Code c# : | Sélectionner tout |
_driverChrome.FindElement(By.Id("lst-ib")).SendKeys(Keys.Enter);
C’est tout. Le code complet de cette classe est le suivant*:
| Code c# : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | [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, puis sur Exécuter, ensuite Tous les tests.
Dans le prochain billet, nous verrons quelques spécificités de Selenium WebDriver et nous allons écrire le code pour tester notre application d’exemple.
