IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

Blog de Hinault Romaric (.NET Core, ASP.NET Core, Azure, DevOps)

[Actualité] Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test

Note : 6 votes pour une moyenne de 3,67.
par , 15/10/2016 à 16h42 (3191 Affichages)
Dans la première partie de cette série de billets de blog, nous avons découvert Selenuim WebDriver et comment intégrer ce dernier dans un projet de test avec Visual Studio. Ensuite, nous avons écrit une simple méthode de test permettant de lancer le navigateur et effectuer une recherche.


Dans ce nouveau billet, nous verrons quelques fonctionnalités de Selenium WebDrive. Nous allons également écrire le code permettant de tester notre application ASP.NET MVC.

Description des fonctionnalités de Selenium

Selenium offre l’API WebDriver pour permettre au développeur d’interagir avec le navigateur et tester son 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*:

Nom : selenium8.png
Affichages : 2784
Taille : 12,1 Ko

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.

Nom : selenium9.png
Affichages : 2697
Taille : 16,7 Ko

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.

Nom : selenium10.png
Affichages : 2522
Taille : 17,6 Ko

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

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
IWebElement element = _driverChrome.FindElement(By.Id("Nom"));

Ensuite, pour effectuer une saisie dans cette zone de texte :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
element.SendKeys("Pascal");

Et enfin pour soumettre :


Test de l’application Web

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, puis sur Ajouter, ensuite sur Nouvel élément. Dans la fenêtre, 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*:

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
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 :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
[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 :

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

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
_driverChrome.FindElement(By.LinkText("Nouvel Etudiant")).Click();

Sur cette page, vous allez remplir les champs Nom, Prénom et Email :

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

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

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

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

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
_driverChrome.FindElement(By.Id("Enregistrer")).Submit();

Le code complet 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
[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.

Nom : selenium11.gif
Affichages : 2759
Taille : 86,0 Ko

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 :

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
public Boolean VerifElement(string valueToFind) {
  try
{
_driverChrome.FindElement(By.LinkText(valueToFind));
return true;
}
 
catch (NoSuchElementException ex) {
  return false;
}
}

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

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

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

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

Code c# : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
[ClassCleanup]
public static void Cleanup()
{
if (_driverChrome != null)
_driverChrome.Quit();
}

Le code complet de la classe TestEtudiant 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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
[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();
}
 
}

Dans ce billet de blog, nous avons vu comment utiliser Selenium WebDriver pour mettre en œuvre un test codé d’interface utilisateur pour une application Web ASP.NET MVC. Dans le prochain billet, nous verrons comment implémenter un test piloté par les données (DDT - Data Driven Test) avec Selenium WebDriver.

Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Viadeo Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Twitter Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Google Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Facebook Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Digg Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Delicious Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog MySpace Envoyer le billet « Test d’IU d’une application ASP.NET MVC avec Selenium, partie 2 : Écriture des méthodes de test » dans le blog Yahoo

Mis à jour 09/09/2018 à 15h43 par LittleWhite (Indentation)

Catégories
DotNET , C# , ASP.NET , .NET Core , ASP.NET Core MVC , Selenium

Commentaires

  1. Avatar de Hinault Romaric
    • |
    • permalink
    La troisième et dernière partie est disponible ici : http://www.developpez.net/forums/blo...e-donnees-ddt/