Sp4ce.net

WatiN Framework

On m’a demandé d’écrire des tests web pour une suite d’applications web. Nous avions déjà une bonne couverture (environ 65 %) avec beaucoup de test sur les controllers et les models mais c’était difficile de tester les views.

Beaucoup de functionnalités sont codées en HTML, CSS et JavaScript et ne sont que peu testable avec le code du back-end. Elles requièrent un evironnement spécifique : le navigateur. Le navigateur qui lit le HTML et le CSS et exécute le JavaScript.

WatiN (prononcé What-in) est un framework qui permet d’exécuter un navigateur et de lui envoyer directement des instructions. Vous pouvez visiter des pages, cliquer sur des buttons et tester du contenu.

NUnit Framework

NUnit est un librairie en .Net pour écrire et maintenir facilement des tests unitaires en C#. Si vous combinez l’utilisation de WatiN et de NUnit, vous pouves facilement écrire des tests unitaires pour une application web.

[Test, Category("WEB")] 
public void SearchForWatiNOnGoogle()
{
   using (var browser = new IE("http://www.google.com"))
   {
      browser.TextField(Find.ByName("q")).TypeText("WatiN");
      browser.Button(Find.ByName("btnG")).Click();
      Assert.IsTrue(browser.ContainsText("WatiN"));
   }
}

Étendre WatiN au sélecteur CSS selector avec jQuery

WatiN est super, mais vous ne pouvez pas utiliser de sélecteur CSS (cf. exemple ci-dessus pour comment trouver des éléments). Dans les framework JavaScript (comme jQuery), vous pouvez utiliser des sélecteurs CSS pour chercher un élément. WatiN vous permet d’injecter du JavaScript dans le navigateur.

using(var browser = new IE("http://www.google.com"))
{
   browser.Eval("alert('Hello World!');");
}

Donc you pouvez injecter un moniteur de recherche CSS qui va effectuer la recherche en utilisant jQuery, vérifier si l’élément possède un attribut id, en donner un sinon et retourner cet id. Puis WatiN va utiliser cet id pour récupérer l’élément.

var CssSearchMonitor = function($) {
   var uniqueId = 1;

   var getElementId = function(selector, index) {
      var result = "_no_element_";
      if ($) {
         var elements = $(selector);
         if (elements.length < index) {
            var element = elements.get(index);
            if (element.id) {
               result = element.id;
            } else {
               result = "watin_search_" + uniqueId++;
               element.id = result;
            }
         }
 
      return result;
      }
   }

   return { getElementId: getElementId };

} (jQuery);

Et ensuite, du coté de WatiN, vous pouvez injecter le JavaScript et appeler CssSearchMonitor.getElementId afin de récuperer cet élement.

string javascript = getJavaScript(); // Get the javascript of the css search monitor.
using(var browser = new IE("http://www.google.com"))
{
   browser.Eval(javascript);
   string id = browser.Eval("CssSearchMonitor.getElementId('div.myClass input[input=\"button\"]', 1)");
   Button button = browser.Button(id);
   button.Click();
}

Dans le but d’utiliser ceci de façon intensive, vous avez besoin de le réfactorer pour le rendre facile d’utilisation, mais l’idée générale est là. Bon tests avec WatiN et NUnit !

Mais il y a toujours un problème ouvert, comment mesure-t-on la couverture de l’application web ?

Liens

Fast(er) CSS Selector Based Element lookups in Watin via jQuery

How to wait for jQuery Ajax requests to complete from WatiN?