Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous

Identifiant
Mot de passe

Mot de passe oublié ?

Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

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 21 octobre 2016, par Hinault Romaric

0PARTAGES

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 lu gratuitement 1 435 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

1 commentaire

Commenter Signaler un problème