Voir le flux RSS

Hinault Romaric

[Actualité] Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas

Note : 5 votes pour une moyenne de 4,20.
par , 06/10/2016 à 01h47 (1684 Affichages)
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.


Nom : th.jpg
Affichages : 6443
Taille : 10,3 Ko

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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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)

Nom : selenium1.png
Affichages : 1965
Taille : 16,9 Ko

- La page d’ajout d’un étudiant

Nom : selenium2.png
Affichages : 1935
Taille : 18,4 Ko

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.


Nom : selenium3.png
Affichages : 1953
Taille : 27,1 Ko

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.


Nom : selenium4.png
Affichages : 1924
Taille : 41,7 Ko

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.

Nom : selenium5.png
Affichages : 1942
Taille : 49,4 Ko

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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
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 - Visualiser dans une fenêtre à part
_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.

Nom : selenium6.png
Affichages : 1953
Taille : 49,7 Ko

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

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
_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 - Visualiser dans une fenêtre à part
_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 - Visualiser dans une fenêtre à part
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.

Nom : selenium7.gif
Affichages : 1956
Taille : 206,7 Ko

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.

Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Viadeo Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Twitter Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Google Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Facebook Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Digg Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Delicious Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog MySpace Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium partie 1 : Introduction et premier pas » dans le blog Yahoo

Mis à jour 07/10/2016 à 15h58 par Hinault Romaric

Catégories
DotNET , C# , ASP.NET , Visual Studio , Selenium

Commentaires

  1. Avatar de Hinault Romaric
    • |
    • permalink
    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/
  2. Avatar de hclatomic
    • |
    • permalink
    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.
  3. Avatar de lamaison
    • |
    • permalink
    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.
  4. Avatar de Hinault Romaric
    • |
    • permalink
    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.