Test d'IU d'une application ASP.NET MVC avec Selenium,
Partie 1 : Introduction et premier pas, un tutoriel de Hinault Romaric

Le , par Hinault Romaric, Responsable .NET
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
  
[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
31
32
33
34
35
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
19
20
21
22
23
24
[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.


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster un commentaire

Avatar de Hinault Romaric Hinault Romaric - Responsable .NET https://www.developpez.com
le 15/10/2016 à 15:47
La seconde partie de cette série de billets de blog est accessible par le lien suivant : http://www.developpez.net/forums/blo...methodes-test/
Avatar de hclatomic hclatomic - Membre régulier https://www.developpez.com
le 21/10/2016 à 9:01
Merci pour cet article. Pour le compléter je signale l'existence de funKTest, un logiciel de tests fonctionnels (donc front-end) gratuit, avec local storage (indexedDB), qui génère des codes Protractor sur de simples clics, sans avoir à coder quoi que ce soit.
Avatar de lamaison lamaison - Membre du Club https://www.developpez.com
le 02/11/2016 à 14:35
Je trouve ces articles très bien conçus.
J'ai suivi la partie 1 et ai été très impressionné par la puissance de l'outil.
Néanmoins je n'ai pas pu faire fonctionner le code de la partie II.
En effet, vous n'indiquez pas comment lancer le test à partir de la classe etudiant .
En lançant "Tous les tests" j'ai une erreur sur l'url Localhost introuvable....
Merci.
Avatar de Hinault Romaric Hinault Romaric - Responsable .NET https://www.developpez.com
le 03/11/2016 à 1:05
Bonjour,

Dans la partie 2, je précise qu'avant d’exécuter les tests, vous devez au préalable exécuter votre application et vous assurer qu’elle est accessible au lien http://localhost:64446/.

Ca ne marche pas chez toi parce que ton application n'est pas en cours d’exécution. Toutefois, si tu lances le débogage du projet Web (SeleniumApp), tu ne pourras pas lancer l’exécution des essais, car le menu d’exécution des tests ne sera pas accessible.

Pour palier à cela, tu vas modifier les propriétés de ton projet web pour qu'il puisse continuer à s’exécuter après avoir arrêter le debogage. Pour la faire, tu vas faire un clic droit sur le projet web (SeleniumApp) dans l'explorateur de solution, et sélectionner Propriétés. Dans la fenêtre qui va s'afficher, aller sur le volet Web, dans le menu à gauche, puis décocher la case "Enable Edit and Continue".


Tu enregistres, tu lances le débogage de ton application en appuyant sur F5. Dès que l'application s'affiche dans le navigateur, tu mets fin au débogage. Tu peux actualiser la page Web pour te rassurer que l'application Web continue à fonctionner. C'est à ce moment que tu peux procéder à l’exécution de tes tests.
Offres d'emploi IT
Ingénieur études & développement .net h/f
ELANZ - Ile de France - La Garenne-Colombes (92250)
Développeur c#/.net
Omnilog - Ile de France - Neuilly-sur-Seine (92200)
Développeur C/C++, .net, IOS et android h/f
ALDANEA - Rhône Alpes - Coublevie (38500)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Microsoft DotNET : Hinault Romaric -