Selenium en un coup d'œil
Q: Pour un site de boutique en ligne, beaucoup d'opérations nécessitent une intervention de l'utilisateur pour être exécutées. En tant que développeur logiciel, comment faire pour s'assurer de la qualité et de l'exactitude de l'implémentation?
Pour ceux d'entre vous qui développent des applications web de façon professionnelle, c'est une question que vous devez souvent vous poser. Il serait très utile de pouvoir tester l'ensemble des fonctionnalités de votre application. Mais comment faire? Selenium est un outil de test fonctionnel développé par ThoughtWorks, spécialement conçu pour les applications Web. Il lance ses tests directement depuis un navigateur, comme le ferait un vrai utilisateur. Il est compatible avec Internet Explorer, Mozilla, Firefox, Windows, Linux et Macintosh. Jetez un œil à la démonstration en ligne pour voir Selenium en action. Cliquez sur le bouton "All" en haut à droite pour lancer les cas de test et, avec un peu de chance, tous les tests devraient passer en vous affichant de superbes barres vertes de validation. Notez que les Actions sont marquées d'un vert plus clair que les Assertions, car en fait elles ne testent rien comme le font les commandes Verify ou Assert. Si une commande Assertion échoue, le test virera au rouge et Selenium arrêtera son exécution. À l'inverse, une commande Verify en échec virera au rouge mais ne stoppera pas l'exécution.
Les procédures de tests s'écrivent en HTML - à vrai dire il s'agit juste de <table>s HTML, dont chaque ligne fait référence à un cas de test, comme par exemple:
<tr><td><a href="MyTest.html">MyTest</a></td></tr>
Un cas de test est représenté par un document HTML écrit en "Selenese", contenant une table de 3 colonnes, le nécessaire pour entrer une commande et 2 arguments. Un cas de test typique ressemble à ceci :
Lorsque vous lancez un test (par exemple en pressant le bouton "All"), le TestRunner de Selenium interprête le document de cas de test HTML et pilote votre application Web, qui apparaît alors dans le cadre le plus bas.
En simulant les actions utilisateur, Selenium vous permet de tester votre application directement à travers son interface utilisateur. Cela ne remplace certainement pas les tests unitaires, mais on l'utilise souvent pour automatiser les tests fonctionnels d'une application web. Dans le cadre d'un développement en intégration continue, cela permet d'assurer des tests de régression réguliers et automatiques. Pour des informations plus poussées sur Selenium, vous pouvez vous référer à la documentation en ligne "Selenium: Usage".
Et arrive Ajax
Selenium est particulièrement utile lorsque certaines fonctionnalités de votre application Web sont exécutées côté navigateur, en Javascript. Ajax (acronyme de "Asynchronous JavaScript and XML") est une architecture de développement web pour la création d'applications web interactives, dont le but est de rendre les pages plus réactives. Pour cela, le serveur va envoyer, en arrière plan, des petits paquets de données qui permettent à la page de ne pas avoir à se recharger à chaque fois que l'utilisateur agit. Cela permet d'augmenter l'interactivité, la vitesse et l'ergonomie de la page.
Le bandeau de chargement est l'une des indications d'Ajax
Au delà de cette simple définition technique, Ajax permet donc d'obtenir des pages web du rendu de Gmail ou Flickr. Cliquer sur un lien ne provoquera pas un rechargement complet de la page, mais, au lieu de cela, le navigateur demandera simplement au serveur une mise à jour partielle. La problématique réside dans le temps de réponse entre le click de l'utilisateur et l'affichage du résultat à l'écran.
Prenons l'exemple d'une page web contenant un champ texte initialisé avec la valeur "oldValue", et un bouton dont le clique permet - grâce à la magie d'Ajax - de changer la valeur du texte en "newValue", sans pour autant recharger la page. Comment tester cela? L'approche la plus logique serait d'ouvrir la page, de cliquer sur le bouton, puis de vérifier la valeur du champ texte. Pourtant, lorsqu'on réalise ce test sous Selenium, il échoue!
La raison de cet échec n'est peut-être pas si évidente : la nature asynchrone de l'appel Ajax entraîne, par définition, un décalage entre la requête client et l'envoi de la réponse par le serveur. Or, Selenium vérifie la valeur du champ immédiatement, il récupère donc l'ancienne valeur. Comment pouvons-nous alors tester de l'Ajax si Selenium ne sait pas attendre l'envoi d'un résultat pour le tester?
Wait for it...
Comment faire pour que Selenium attende le résultat ? Une solution tentante pourrait être d'utiliser la commande "clickAndWait" à la place de "click", le suffixe "AndWait" indiquant que Selenium doit attendre un rechargement de la page. Ce serait oublier que la page n'est pas réellement rechargée : la commande "clickAndWait" mettrait donc Selenium en attente d'un évènement qui ne se produirait jamais. Ce n'est clairement pas la bonne solution.
Une autre possibilité serait d'insérer une pause entre le clique et la vérification de la valeur du champ texte (assertValue). Mettons donc une pause de 5 secondes entre les deux, afin de donner le temps au serveur de répondre. Cette technique fonctionne la plupart du temps, mais échouera si le serveur met plus de 5 secondes à répondre. Cela peut arriver pour de multiples raisons (débit peu élevé ou machine de test surchargée, entre autres) et, bien sûr, vous pouvez toujours augmenter le temps d'attente mais cela rendrait les tests de plus en plus lents, sans aucune garantie de réussite.
Par chance, Selenium nous fournit exactement la solution dont nous avons besoin : lorsque la valeur d'un champ change, vous pouvez utiliser la commande "waitForValue" pour mettre Selenium en attente jusqu'à ce que la valeur attendue soit renvoyée.
Nous allons donc remplacer, dans l'exemple précédent, la commande assertValue par ceci :
Lorsque cette commande sera exécutée, Selenium suspendra l'exécution du cas de test courant et attendra la bonne réception de la valeur : le test reprendra lorsque ce sera le cas. Notez bien que si vous n'orthographiez pas correctement la valeur attendue, Selenium attendra 30 secondes avant de s'interrompre.
Comme vous l'avez peut être deviné, beaucoup de commandes peuvent être utilisées pour tester les effets de mise à jour Ajax. Par exemple, waitForText pour vérifier un champ texte; waitForTitle pour vérifier le titre de la page courante; waitForElementNotPresent pour vérifier qu'un élément HTML est supprimé... A vrai dire, pour chaque accesseur Selenium, il existe les commandes waitForXxxx et WaitForNotXxxx correspondantes. Chaque fois que vous utilisez verifyXxxx ou assertXxxx pour vérifier quelque chose, sachez qu'il existe un WaitForXxxx pour en tester la version asynchrone correspondante.
Que faire si les commandes WaitForXxxx et WaitForNotXxxx ne répondent pas à votre besoin ? He bien il existe toujours la commande waitForCondition, qui vous permet de spécifier une expression booléenne en Javascript qui mettra Selenium en attente jusqu'à ce qu'elle soit vérifiée. La déclaration d'une commande waitForCondition est la suivante:
waitForCondition script timeout (in ms)
Cela peut être pratique pour tester des effets Ajax plus compliqués.
A vrai dire, si vous fouillez dans le code source de Selenium, vous remarquerez que toutes les commandes cousines waitForXxxx et waitForNotXxxx utilisent waitForCondition. Grig Gheorghui a écrit un superbe article sur son blog à ce sujet : Ajax testing with Selenium using waitForCondition. Lorsque Grig l'a rédigé, waitForCondition n'était qu'une extension de Selenium, elle fait maintenant partie du cœur de son code source.
Résumé
Dans ce bref article, nous avons présenté Selenium, un outil de test d'application web. Nous avons également montré comment tester les applications Ajax sous Selenium grâce aux commandes waitForXxxx, et comment tester les appels Ajax basiques, tels que la mise à jour asynchrone de texte.
Si vous voulez en savoir plus sur les commandes waitForXxxx, les développeurs de Selenium fournissent des exemples de cas de tests, qui vous montrerons comment tester quelques effets Ajax classiques, tels que la mise en page, l'auto-complétion et le Drag and Drop. Ces exemples sont basés sur script.aculo.us, une bibliothèque Ajax dont vous êtes peut-être déjà familiers.
Biographies
Jeff Xiong est développeur applicatif chez ThoughtWorks. Il possède une expérience de quatre ans dans le domaine des grandes applications d'entreprise et dans l'intégration système.
Mike Williams est un développeur sénior de 15 ans d'expérience. En plus de Java, Mike est un passionné des langages dynamiques et des langages scriptés.
Josh Price travaille chez ThoughtWorks en tant que développeur. Il a huit ans d'expérience dans la conception de systèmes d'entreprise Java/J2EE.