Test d'interface utilisateur d'une application ASP.NET MVC avec Selenium
Partie 2 : Écriture des méthodes de test, un tutoriel de Hinault Romaric

Le , par Hinault Romaric, Responsable .NET
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*:


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 :

Code c# : Sélectionner tout
IWebElement element = _driverChrome.FindElement(By.Id("Nom"));

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

Code c# : Sélectionner tout
element.SendKeys("Pascal");

Et enfin pour soumettre :

Code c# : Sélectionner tout
element.Submit();

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
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
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
_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
_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
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
_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
_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
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
_driverChrome.FindElement(By.Id("Enregistrer")).Submit();

Le code complet est le suivant*:

Code c# : Sélectionner tout
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.


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
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
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
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
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
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
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.


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 22/10/2016 à 14:55
La troisième et dernière partie est disponible ici : http://www.developpez.net/forums/blo...e-donnees-ddt/
Responsables bénévoles de la rubrique Microsoft DotNET : Hinault Romaric - François DORIN -