Cet article a fait l'objet d'une traduction automatique.
Série de tests
Test de l’UI d’une application Web avec jQuery
James McCaffrey
.jpg)
The jQuery library is an open source collection of JavaScript functions. Bien que jQuery ait été créé avec le développement Web à l’esprit, la bibliothèque présente plusieurs caractéristiques qui la rendent parfaitement adaptée à une automatisation légère pour le test d’une interface utilisateur d’application Web. Dans l’article de cette semaine, je vais vous montrer comment faire.
Pour savoir ce qui vous attend, consultez la capture d’écran de la Figure 1, qui illustre l’automatisation d’un test d’interface utilisateur avec jQuery en action. L’atelier de test est hébergé par Internet Explorer et se compose d’une page HTML intitulée UITestHarness.html.
La page de l’atelier est en fait un simple conteneur présentant deux éléments de cadre HTML. Le cadre de droite contient l’application Web testée, dans notre cas une application de calculatrice ASP.NET simple mais représentative nommée MiniCalc. Le cadre de gauche contient une page HTML intitulée TestScenario001.html, qui se compose d’un élément TextArea destiné à afficher les messages de progression, un élément Button permettant de lancer manuellement l’automatisation et les fonctions JavaScript basées sur jQuery manipulant l’application Web testée et contrôlant l’état résultant de l’application afin de déterminer la réussite/l’échec au test.
.jpg)
Figure 1 Automatisation de test d’interface utilisateur avec jQuery
La bibliothèque jQuery est également parfaitement adaptée aux tests de requête-réponse HTTP, sujet que j’ai déjà abordé avec jQuery dans l’article Série de tests de janvier 2010 (msdn.microsoft.com/magazine/ee335793).
Cet article part du principe que vous êtes déjà familiarisé avec la technologie ASP.NET et que vous disposez de compétences de niveau intermédiaire en programmation JavaScript, mais que vous n’avez pas d’expérience en ce qui concerne le fonctionnement de la bibliothèque jQuery. Mais même si vous êtes novice dans ces domaines, ASP.NET et l’automatisation de test en général, vous devriez être capable de suivre cet article sans trop de difficultés.
Dans les sections suivantes, je décris tout d’abord l’application MiniCalc pour que vous sachiez exactement en quoi la mise en œuvre de l’application testée est liée à l’automatisation de test d’interface utilisateur. Je vous guiderai ensuite tout au long de la création d’une automatisation légère de tests d’interface utilisateur basée sur jQuery, comme illustré dans la Figure 1. Je terminerai en décrivant comment étendre les techniques présentées dans cet article pour répondre à vos besoins particuliers, puis j’aborderai les avantages et inconvénients de l’automatisation de test d’interface utilisateur avec jQuery par rapport aux autres approches. Les techniques présentées ici sont vraiment intéressantes et peuvent constituer un complément utile à votre boîte à outils de test, de développement et de gestion.
L’application testée
Jetons un coup d’œil au code de l’application Web ASP.NET MiniCalc, la cible de l’automatisation de test d’interface utilisateur basée sur jQuery.
J'ai créé l'application MiniCalc à l'aide de Visual Studio 2008. Après le lancement de Visual Studio, j'ai cliqué sur fichier | nouveau | Web Site. Pour éviter le mécanisme code-behind d’ASP.NET et conserver la totalité du code pour mon application Web dans un seul fichier, j’ai sélectionné l’option Site Web vide. Ensuite, j’ai sélectionné l’option de mode HTTP (plutôt que mode Fichier) dans la liste déroulante du champ Emplacement, que j’ai spécifié comme suit :
http://localhost/TestWithJQuery/MiniCalc
J’ai décidé d’utiliser le langage C# pour la logique de l’application MiniCalc. Les techniques d’automatisation de test que je présente dans cet article s’appliquent aux applications Web ASP.NET écrites en C# et Visual Basic ainsi qu’aux applications Web créées via des technologies telles qu’ASP classique, CGI, PHP, JSP, Ruby, etc.
J’ai cliqué sur OK dans la boîte de dialogue Nouveau site Web pour configurer IIS et générer la structure de mon application Web. Ensuite, dans la fenêtre Explorateur de solutions, j’ai cliqué sur le nom de projet MiniCalc avec le bouton droit de la souris et sélectionné Ajouter un nouvel élément dans le menu contextuel. J’ai ensuite sélectionné l’élément Web Form dans la liste des modèles installés et accepté le nom de fichier Default.aspx. J’ai désélectionné l’option « Placer le code dans un fichier distinct » et cliqué sur le bouton Ajouter.
J’ai ensuite double-cliqué sur le nom de fichier Default.aspx dans l’explorateur de solutions pour charger le code généré par modèle dans l’éditeur de texte. J’ai supprimé tout le code issu du modèle et l’ai remplacé par le code présenté dans la Figure 2.
Figure 2 Source de l’application Web MiniCalc testée
<%@ Page Language="C#" %>
<script runat="server">
static Random rand = null;
private void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
rand = new Random(0);
}
private void Button1_Click(object sender, System.EventArgs e)
{
int randDelay = rand.Next(1, 6); // [1-5]
System.Threading.Thread.Sleep(randDelay * 1000);
int x = int.Parse(TextBox1.Text);
int y = int.Parse(TextBox2.Text);
if (RadioButton1.Checked)
TextBox3.Text = (x + y).ToString("F4");
else if (RadioButton2.Checked)
TextBox3.Text = (x * y).ToString("F4");
}
</script>
<html>
(client-side JavaScript and UI elements here)
</html>
Je n’effectue pas ici de vérification d’erreur normale afin de garder un code source de taille réduite et facile à comprendre. Le code source intégral de l’application MiniCalc et l’atelier de test sont disponibles à la page code.msdn.microsoft.com/mag201012TestRun.
Pour écrire l’automatisation de test d’applications Web, vous devez, dans la plupart des cas, connaître les ID des divers contrôles utilisateur. Comme vous pouvez le constater dans la Figure 2, TextBox1 et TextBox2 sont destinés à contenir deux valeurs d’entiers entrées par l’utilisateur, RadioButton1 et RadioButton2 à sélectionner la nature de l’opération (addition ou multiplication) et TextBox3 à afficher le résultat du calcul arithmétique.
Lorsqu’un utilisateur clique sur le contrôle Button1, l’application MiniCalc laisse un délai aléatoire de 1 à 5 secondes pour simuler un traitement côté serveur, puis calcule et affiche soit la somme, soit le produit des deux valeurs saisies par l’utilisateur.
J’ai ensuite décidé de rendre l’application MiniCalc asynchrone en utilisant la technologie AJAX. Pour ce faire, j’avais besoin d’un fichier web.config pour l’application. Par conséquent, plutôt que de créer un fichier web.config manuellement de zéro, j’ai appuyé sur la touche F5 pour indiquer à Visual Studio de créer et d’exécuter l’application via le débogueur. Lorsque Visual Studio m’a invité à donner mon autorisation pour la création du fichier web.config, j’ai cliqué sur OK. Ensuite, j’ai ajouté un contrôle ScriptManager côté serveur à l’application MiniCalc pour activer AJAX :
<asp:ScriptManager ID="sm1" runat="server" EnablePartialRendering="true" />
Puis j’ai ajouté les balises nécessaires à la mise à jour asynchrone de l’élément de résultat TextBox3 en même temps que l’événement de clic de Button1 :
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<p><asp:TextBox id="TextBox3" width="120" runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
En examinant la Figure 1 de plus près, vous pouvez constater que pour souligner le fait que MiniCalc est une application AJAX, j’ai placé un compteur de durée de vie de page côté client dans l’interface utilisateur. Lorsqu’une requête asynchrone à MiniCalc est renvoyée, seul l’élément TextBox3 est mis à jour et le compteur de durée de vie de la page n’est pas réinitialisé. La zone de texte pageLife est définie comme :
<input type="text" id="pageLife" size="1"/>
Le JavaScript associé côté client est :
<script language="javascript">
var count = 0;
function updatePageLife() {
++count;
var tb = document.getElementById("pageLife");
tb.value = parseInt(count);
window.setTimeout(updatePageLife, 1000);
}
</script>
Le compteur est déclenché par l’événement onLoad de l’application :
<body bgColor="#ccffff" onload="updatePageLife();">
Test de l’UI d’une application Web avec jQuery
Maintenant que vous connaissez l’application Web testée, plongeons-nous dans le code d’automatisation des tests d’interface utilisateur. L’atelier de test principal est simplement une page HTML ordinaire contenant deux éléments de cadre :
<html>
<!-- UITestHarness.html -->
<head>
<title>Test Harness for MiniCalc AJAX Web App</title>
</head>
<frameset cols="45%,*" onload="leftFrame.appLoaded=true">
<frame src="http://localhost/TestWithJQuery/TestScenario001.html"
name="leftFrame" >
<frame src="http://localhost/TestWithJQuery/MiniCalc/Default.aspx"
name="rightFrame">
</frameset>
</html>
Le cadre rightFrame héberge l’application Web testée telle quelle, sans aucune modification ni instrumentation de test. Le cadre leftFrame héberge une page HTML nommée TestScenario001.html, contenant l’intégralité du code d’automatisation des tests avec jQuery. Notez que lorsque l’événement onLoad de l’élément Frameset se produit, une variable de la page leftFrame, nommée appLoaded, est définie sur True. Cette variable sert à s’assurer que l’automatisation des tests ne commence pas avant que l’application Web testée ne soit totalement chargée dans l’atelier de test. La structure du code de ce scénario de test est détaillée dans la Figure 3.
Figure 3 Structure de la page d’automatisation des tests d’interface utilisateur
<html>
<!-- TestScenario001.html -->
<head>
<script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'></script>
<script type="text/javascript">
$(document).ready(function() {
logRemark("jQuery Library found and harness DOM is ready\n");
} );
var testScenarioID = "Test Scenario 001";
var maxTries = 20;
var numTries;
var polling = 500; // milliseconds
var appLoaded = false;
var started = false;
function launch() {
if (!started)
runTest();
}
function waitUntilAppLoaded() {
// Code
}
function runTest() {
// Start automation
}
function step1() {
// Manipulate state
}
function clickCalculate() {
// Click the Calculate button
}
function checkControl(controlID, controlVal) {
// Determine if control has specified value
}
function step2() {
// Manipulate state
}
function callAndWait(action, checkControlFunc, controlID, controlVal,
callbackFunc, pollTime) {
// The heart of the automation
}
function doWait(checkControlFunc, controlID, controlVal,
callbackFunc, pollTime) {
// Wait until Web app responds
}
function finish() {
// Determine pass/fail result
}
function logRemark(comment) {
// Utility logging function
}
</script>
</head>
<body bgcolor="#F5DEB3">
<h3>This is the UI test scenario with jQuery script page</h3>
<p>Actions:</p><p><textarea id="comments" rows="22" cols="34">
</textarea></p>
<input type="button" value="Run Test" onclick="runTest();" />
</body>
</html>
Le script de test commence par référencer la bibliothèque jQuery :
<script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'>
J’indique ici une copie locale de la bibliothèque jQuery téléchargée sur le site Web du projet jQuery (jquery.com) et copiée dans le répertoire racine de l’application MiniCalc.J’ai utilisé jQuery version 1.3.2.La bibliothèque est en développement constant, il est donc probable qu’une version plus récente sera disponible au moment où vous lirez cet article.Pour en savoir plus sur le référencement de la bibliothèque jQuery dans votre code, reportez-vous à la section « Obtention de la bibliothèque jQuery » de cet article.
Obtention de la bibliothèque jQuery
Plusieurs options s’offrent à vous quant à l’emplacement de la bibliothèque jQuery utilisée par votre application.Comme mentionné plus haut, vous pouvez télécharger la version la plus récente de la bibliothèque à l’adresse jquery.com et l’utiliser à partir de votre système de fichiers local.Le site de jQuery propose à la fois des téléchargements de développement (non compressés) et de production (minifiés, espace blanc supprimé pour un volume minimal).Sélectionnez le package souhaité et enregistrez le fichier .js dans le répertoire de votre projet.
Si l’hôte de votre application bénéficie d’une connexion Internet active, une option encore plus simple consiste à pointer vers la version la plus récente de jQuery à partir d’un réseau de diffusion de contenu (CDN) en ligne.Vous pouvez utiliser un certain nombre de sources (notamment votre propre version hébergée), mais deux des réseaux de diffusion de contenu les plus disponibles sont Microsoft AJAX Content Delivery Network (asp.net/ajaxlibrary/cdn.ashx) et Google Libraries API (code.google.com/apis/libraries).
Par exemple, vous pouvez utiliser la version minifiée de jQuery à partir du réseau Microsoft Ajax CDN en utilisant la balise de script suivante :
<script
src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"
type="text/javascript">
</script>
Scott Guthrie tient un blog très utile sur l’utilisation du réseau Microsoft Ajax CDN pour jQuery et ASP.NET AJAX à l’adresse tinyurl.com/q7rf4w.
En règle générale, lors de l’utilisation de jQuery à des fins d’automatisation du test, l’utilisation d’une copie locale décompressée de la bibliothèque dans l’atelier de test est plus fiable que d’utiliser une copie distante ou compressée. Pour les applications de production, cependant, mieux vaut utiliser une bibliothèque hébergée fiable.
Ensuite, j’utilise un idiome jQuery standard pour déterminer si mon automatisation a accès à la bibliothèque jQuery :
$(document).ready(function() {
logRemark("jQuery Library found and harness DOM is ready\n");
} );
La fonction ready de jQuery se lance dès que le DOM du document conteneur est entièrement chargé dans la mémoire de l’hôte de test et que tous les éléments DOM sont disponibles. Si la bibliothèque jQuery n’est pas accessible, ce qui se produit habituellement lorsque vous définissez un chemin de bibliothèque incorrect, une erreur « Objet attendu » survient.
La fonction ready accepte une fonction anonyme en tant que paramètre unique. Les fonctions anonymes sont fréquemment utilisées dans l’automatisation des tests avec jQuery et JavaScript. Vous pouvez considérer une fonction anonyme comme une fonction définie à la volée via le mot clé fonction.
Voici un exemple basé sur une fonction nommée logRemark :
function logRemark(comment) {
var currComment = $("#comments").val();
var newComment = currComment + "\n" + comment;
$("#comments").val(newComment);
}
Dans ce cas, je définis une fonction appelant simplement une fonction de journalisation définie par programmation nommée logRemark pour afficher un message indiquant que jQuery est disponible dans l’atelier de test. J’aurais également pu utiliser la fonction d’alerte intrinsèque JavaScript.
I begin by using the jQuery selector and chaining syntax to get the current text in the textarea with ID “comments.” The $ notation is a shortcut alias for the jQuery meta-class. La syntaxe # permet de sélectionner un élément HTML par ID, et la fonction val peut servir d’accesseur Set et d’accesseur Get de valeur (une propriété dans la terminologie de programmation orientée objet). J’ajoute la valeur du paramètre de commentaire et un caractère de nouvelle ligne au texte de commentaire existant, puis utilise la syntaxe jQuery pour mettre à jour l’élément TextArea.
Ensuite, je configure quelques variables globales d’automatisation des tests :
var testScenarioID = "Test Scenario 001";
var maxTries = 20;
var numTries;
var polling = 500;
var appLoaded = false;
var started = false;
Mon automatisation s’appliquant à une application asynchrone, je n’utilise pas de délais arbitraires. J’utilise plutôt une séquence de délais courts (définis par l’interrogation de variables), en effectuant des contrôles répétés (variable numTries) pour vérifier si la valeur d’un élément HTML répond à la condition Boolean, pour un nombre maximal de tentatives donné (variable maxTries). Dans ce scénario de test, j’applique un délai de 500 ms par tentative pour un maximum de 20 tentatives sur une durée totale de 10 secondes. La variable appLoaded sert à déterminer le moment où l’application Web testée est totalement chargée dans l’atelier de test. La variable started sert à coordonner l’exécution de l’atelier de test.
Pour lancer manuellement l’automatisation, vous pouvez cliquer sur le bouton Exécuter le test :
<input type="button" value="Run Test" onclick="runTest();" />
La fonction launch de la Figure 3 sert à l’automatisation complète des tests, comme je vais vous l’expliquer dans un instant. La fonction runTest agit comme la fonction de coordination principale de l’automatisation de test :
function runTest() {
waitUntilAppLoaded();
started = true;
try {
logRemark(testScenarioID);
logRemark("Testing 3 + 5 = 8.0000\n");
step1();
}
catch(ex) {
logRemark("Fatal error: " + ex);
}
}
La fonction runTest commence par appeler la fonction waitUntilAppLoaded, définie comme suit :
function waitUntilAppLoaded() {
if (appLoaded == true) return true;
else window.setTimeout(waitUntilAppLoaded, 100);
}
Notez que le scénario de test initialise la variable appLoaded sur False et que l’événement onload de l’élément Frameset de l’atelier la définit sur True. J’utilise ici la fonction intrinsèque setTimeout pour effectuer des pauses de 100 ms à plusieurs reprises jusqu’à ce que la valeur de la variable appLoaded soit définie sur True. Notez que cette approche pourrait appliquer des délais indéfiniment. Pour empêcher cette éventualité, ajoutez un compteur global et un return false après un nombre maximal de délais appliqués.
Après avoir configuré la variable start globale, runTest affiche des commentaires et appelle une fonction step1 dans un wrapper de gestionnaire d’exceptions. La structure de l’atelier présentée ici ne constitue qu’une possibilité parmi d’autres et vous pouvez modifier l’organisation de l’atelier pour que ce dernier s’adapte à votre style de programmation et à votre environnement de test. Avec ma structure, j’envisage un scénario de test comme une séquence de changements d’état, dont chacun est représenté par une fonction stepX.
La fonction step1 modifie l’état de l’application Web testée en simulant les entrées de l’utilisateur, comme l’illustre la Figure 4.
Figure 4 Simulation des entrées avec la fonction step1
function step1() {
logRemark(
"Entering 3 and 5 and selecting Addition");
var tb1 =
$(parent.rightFrame.document).find('#TextBox1');
tb1.val('3');
var tb2 =
$(parent.rightFrame.document).find('#TextBox2');
tb2.val('5');
var rb1 =
$(parent.rightFrame.document).find('#RadioButton1');
rb1.attr("checked", true);
logRemark(
"\nClicking Calculate, waiting for async response '8.0000'");
asyncCall(clickCalculate, checkTextBox3, "8.0000",
step2, polling);
}
La syntaxe jQuery permettant d’accéder aux éléments HTML et de les manipuler est cohérente, élégante et principalement indépendante du navigateur. Notez que pour accéder à l’application Web charger dans l’élément rightFrame à partir du code de l’élément leftFrame, je dois utiliser le mot clé parent. Notez également que je dois utiliser le filtre de recherche jQuery.
Lors de la manipulation des éléments TextBox1 et TextBox2, je suppose que l’application Web testée est entièrement chargée dans l’élément rightFrame. Cette supposition ne peut pas être faite raisonnablement avec les applications dont le temps de chargement est long, et dans pareilles situations, vous pouvez placer le code du sélecteur jQuery dans une boucle de délai window.setTimeout, comparant l’objet cible à la valeur « undefined » intégrée.
L’application MiniCalc testée est une application AJAX, par conséquent mon atelier ne peut pas se contenter d’appeler l’événement de clic du bouton Calculer, car le code de l’atelier de test continuerait l’exécution sans attendre la réponse asynchrone de l’application. J’utilise donc une fonction callAndWait définie par programmation :
function callAndWait(action, checkControlFunc, controlID,
controlVal, callbackFunc, pollTime) {
numTries = 0;
action();
window.setTimeout(function(){doWait(
checkControlFunc, controlID, controlVal,
callbackFunc, pollTime);}, pollTime);
}
La fonction callAndWait appelle une fonction (le paramètre d’action), passe dans une boucle de délai et s’interrompt un court moment (variable pollTime) et vérifie si un état d’application est True en appelant la fonction de paramètre checkControlFunc avec les arguments des paramètres controlID et controlVal. Lorsque checkControlFunc renvoie une valeur True, ou que le nombre maximal d’applications de délais a été exécuté, le contrôle est transféré à la fonction de paramètre callbackFunc.
La fonction callAndWait fonctionne conjointement avec une fonction doWait définie par programmation :
function doWait(checkControlFunc, controlID,
controlVal, callbackFunc, pollTime) {
++numTries;
if (numTries > maxTries) finish();
else if (checkControlFunc(controlID, controlVal))
callbackFunc();
else window.setTimeout(function(){
doWait(checkControlFunc, controlID,
controlVal, callbackFunc, pollTime);}, pollTime);
}
La fonction doWait est récursive et s’interrompt lorsque checkControlFunc renvoie la valeur True ou que la variable numTries du compteur local dépasse la variable globale maxTries. Elle appelle alors une fonction nommée clickCalculate, passe dans une boucle de délai, interrompt l’interrogation pendant 500 ms et appelle la fonction checkControl avec les argurments TextBox3 et 8.0000 jusqu’à ce que checkControl renvoie la valeur True ou que la fonction delay soit exécutée 20 fois (valeur spécifiée par la variable maxTries) :
callAndWait(clickCalculate, checkControl, "TextBox3",
"8.0000", step2, polling);
Si checkControl renvoie la valeur True, le contrôle est transféré à la fonction step2. La fonction clickCalulate utilise la sélection et le chaînage jQuery :
function clickCalculate() {
var btn1 = $(parent.rightFrame.document).find('#Button1');
if (btn1 == null || btn1.val() == undefined)
throw "Did not find btn1";
btn1.click();
}
La définition d’une telle fonction wrapper d’action est nécessaire principalement pour le transfert par nom correct de la fonction à callAndWait. La fonction checkControl est simple :
function checkControl(controlID, controlVal) {
var ctrl = $(parent.rightFrame.document).find('#' + controlID);
if (ctrl == null || ctrl.val() == undefined || ctrl.val() == "")
return false;
else
return (ctrl.val() == controlVal);
}
Tout d’abord j’utilise la syntaxe jQuery pour obtenir une référence au contrôle spécifié par le paramètre controlID. Si la valeur du contrôle n’est pas encore disponible, je retourne immédiatement à la boucle de délai. Une fois la valeur de contrôle prête, je peux vérifier si elle est égale à l’une des valeurs attendues par le paramètre controlVal.
Après avoir appelé autant de fonctions stepX que je l’ai souhaité, je transfère le contrôle à une fonction finish. Cette fonction détermine tout d’abord comment elle a été atteinte :
if (numTries > maxTries) {
logRemark("\nnumTries has exceeded maxTries");
logRemark("\n*FAIL*");
}
else ....
Si la valeur de la variable globale numTries dépasse la valeur de maxTries, je sais alors que l’application Web testée n’a pas répondu dans le temps imparti. Je décide ici arbitrairement que le test a échoué et non qu’il a donné une forme de résultat indéterminé. Si la variable numTries ne dépasse pas la valeur maxTries, je commence à vérifier l’état final de l’application testée :
logRemark("\nChecking final state");
var tb1 = $(parent.rightFrame.document).find('#TextBox1');
var tb2 = $(parent.rightFrame.document).find('#TextBox2');
var tb3 = $(parent.rightFrame.document).find('#TextBox3');
J’obtiens ici les références aux trois contrôles textbox. Les éléments exacts de l’application Web testée que vous décidez de vérifier dépendent des détails de votre application en particulier. Ensuite, j’examine la valeur de chaque contrôle textbox pour savoir si chacun d’entre eux présente une valeur attendue :
var result = "pass";
if (tb1.val() != "3") result = "fail";
if (tb2.val() != "5") result = "fail";
if (tb3.val() != "8.0000") result = "fail";
Toutes les entrées de test et valeurs attendues de mon scénario de test sont codées en dur. L’automatisation de test présentée est mieux adaptée aux situations de test légères, rapides, où les données de test codées en dur sont simples et efficaces.
La fonction finish termine l’exécution du test en affichant un résultat pass ou fail :
if (result == 'pass')
logRemark("\n*Pass*");
else
logRemark("\n*FAIL*");
À l’instar des données d’entrée de test, cette approche est légère et vous pouvez écrire les résultats du test dans un fichier externe sur l’hôte de test ou le serveur Web, ou envoyer les résultats du test par e-mail via SMTP.
Synthèse
L’atelier décrit ici est semi-automatisé : vous devez cliquer sur un contrôle de bouton pour lancer le test. Vous pouvez automatiser entièrement l’atelier en ajoutant une fonction start-wrapper :
function launch() {
if (!started)
runTest();
}
Ajoutez un attribut onload=“leftFrame.launch();” à l’élément Frameset de la page d’atelier. Chaque chargement de l’application Web dans l’atelier déclenche un événement onload, donc j’utilise la variable « start » globale pour empêcher l’automatisation de test de redémarrer. Il est intéressant de noter que même si l’élément de cadre HTML ne prend pas en charge l’événement onload, vous pouvez tout de même placer un attribut onload dans l’élément de cadre de l’atelier. L’événement remonte à l’élément Frameset de son parent.
Vous pouvez désormais créer un fichier .bat contenant des commandes telles que :
iexplore http://localhost/TestWithJQuery/UITestHarness001.html
iexplore http://localhost/TestWithJQuery/UITestHarness002.html
Lorsque le fichier .bat s’exécute, peut-être via un planificateur de tâches Windows, l’atelier se charge et l’automatisation se lance automatiquement. Un autre moyen d’étendre le système de test présenté ici consiste à placer les fonctions définies par programmation dans un plug-in jQuery.
Lors de l’écriture d’une automatisation de test d’interface utilisateur d’application Web, plusieurs alternatives se présentent à vous quant à l’approche basée sur jQuery que j’ai présentée. L’un des principaux avantages de l’utilisation de la bibliothèque jQuery comparée à l’utilisation de JavaScript brut réside dans le fonctionnement de jQuery sur plusieurs navigateurs comme Internet Explorer, Firefox et Safari. Autre avantage non négligeable, utiliser jQuery pour écrire l’automatisation de test permet de développer activement vos connaissances de l’utilisation de jQuery appliquée aux tâches de développement.
L’utilisation de jQuery comporte des inconvénients par rapport aux autres approches. L’utilisation de jQuery implique une dépendance externe jusqu’à un certain point, et l’automatisation de test basée sur des scripts a tendance à être plus difficile à gérer que l’automatisation de test sans script. Comparée à l’utilisation d’une infrastructure de test telle que Selenium ou Watir, l’écriture d’une automatisation basée sur jQuery vous donne plus de flexibilité, mais vous devez écrire le code à un niveau d’abstraction plus bas.
J’insiste sur le fait qu’aucune approche d’automatisation de test n’est mieux adaptée qu’une autre à toutes les situations, mais l’automatisation de test d’interface utilisateur d’application Web avec jQuery peut constituer une technique efficace dans de nombreux scénarios de développement de logiciels.
Dr.James McCaffrey works for Volt Information Sciences Inc., where he manages technical training for software engineers working at the Microsoft Redmond, Wash., campus. He’s worked on several Microsoft products, including Internet Explorer and MSN Search. Dr. McCaffrey is the author of “.NET Test Automation Recipes” (Apress, 2006), and can be reached at jammc@microsoft.com.
*Merci aux experts techniques suivantes pour la révision de cet article :*Scott Hanselman and Matthew Osborn