www.greenivory.comFrédéric BONJOUR (développeur web)
Tests d’interfaces web
avec Selenium
mardi 27 octobre 2009
Présentation
• Frédéric BONJOUR (si, si, c’est mon nom !)
‣ développeur web
‣ interfaces riches - ergonomie
• GreenIvory - sponsor du DeveloperForum
‣ Haguenau (France) et Durham (USA) - 12 personnes
‣ Mashup (dynamisation de sites web)e-réputation (mesure de réputation en ligne)Réseaux sociaux d’entreprise
‣ Technologies : Java, Hibernate, GWT/GXT
mardi 27 octobre 2009
Sommaire
Introduction
1. Principe
2. Selenium RC (Remote Control)
3. Mise en place des tests
4. Maintenance des tests
5. Comment faire avec AJAX ?
Conclusion
mardi 27 octobre 2009
Introduction
• Différents types de tests
‣ tests unitaires
‣ tests d’intégration
‣ tests d’interfaces
mardi 27 octobre 2009
Introduction
• Tests unitaires
‣ vérifient le fonctionnement de briques logicielles simples
‣ bas niveaux : méthodes, classes
‣ ➜ JUnit
mardi 27 octobre 2009
Introduction
• Tests d’intégration
‣ vérifient que les composants de l’application s’intègrent bien les uns avec les autres
‣ vérifient le fonctionnement global et la cohérence d’un système
‣ ➜ JUnit, Maven
mardi 27 octobre 2009
Introduction
• Tests d’interfaces
‣ vérifient que l’interface répond correctement aux actions de l’utilisateur
- présence des éléments interactifs (contrôles)
- affichage correct (messages)
‣ ne vérifie pas si l’affichage est visuellement correct
‣ ➜ Selenium | http://seleniumhq.org/
mardi 27 octobre 2009
Tests d’interfaces web1. Principe
mardi 27 octobre 2009
Réseau localPoste de
développementServeur de tests
1. Principe
Test case(code Java)
client Selenium
Envoi de messages
Application à tester(dans un navigateur)
Selenium RCserveur Selenium
Renvo
ie les
résul
tats v
ers
la co
nsole
ou l’éd
iteur
Pilote le navigateur
Effectue des tests
mardi 27 octobre 2009
2. Selenium RC
mardi 27 octobre 2009
2. Selenium RC (Remote Control)
• Serveur
• Reçoit des messages du test case via le réseau
• Pilote un navigateur (Firefox, Safari, Internet Explorer)Simule des actions de l’utilisateur
• Teste la présence d’éléments dans le DOMDocument Object ModelHiérarchie des objets composant un document HTML
mardi 27 octobre 2009
Démo : Selenium RC
mardi 27 octobre 2009
3. Mise en place des tests
mardi 27 octobre 2009
3. Mise en place des tests
Avoir une application web à tester !Un super formulaire d’inscriptionEcrit en GWT/GXT : utilise AJAX
1. Rédiger le test case
2. Intégrer le test case dans un projet Java
3. Lancer le test case
mardi 27 octobre 2009
3.1. Rédiger le test casepackage com.greenivory.devforum5.uitest;
import com.thoughtworks.selenium.SeleneseTestCase;
public class SubscriptionTest extends SeleneseTestCase {
}
public void setUp() throws Exception { setUp("http://localhost:81/", "*firefox"); selenium.setSpeed("1000"); }
public void testSubscription() throws Exception { selenium.open("/formations/selenium/"); selenium.type("x-auto-10", "Fred"); selenium.type("x-auto-11", "[email protected]"); selenium.click("//button[@type='submit']"); verifyTrue(selenium.isTextPresent("Super")); }
selenium.open("/formations/selenium/");
Demande le chargement de l’URL indiquée
Simule la saisie du texte « Fred »dans le champ de saisie identifié
« x-auto-10 »ainsi que la saisie du texte
« [email protected] »dans le champ de saisie identifié
« x-auto-11 »
selenium.type("x-auto-10", "Fred");selenium.type("x-auto-11", "[email protected]");selenium.click("//button[@type=‘submit’]"); Simule un clic sur le bouton
de validation « submit »verifyTrue(selenium.isTextPresent("Super"));
Vérifie que le texte « Super » est bien présent dans la page web
mardi 27 octobre 2009
On ne va quand même pasécrire ça à la main ?...
mardi 27 octobre 2009
3.1. Rédiger le test case avec Selenium IDE
• Selenium IDE
‣ Module pour Firefox
‣ Enregistre les actions de l’utilisateur
‣ Exporte le cas d’utilisation sous forme de code Java, PHP, Ruby, ...
mardi 27 octobre 2009
Démo : Selenium IDE
mardi 27 octobre 2009
3.2. Intégrer le test case dans un projet Java
Client Selenium(SeleneseTestCase)
• Création du source folder « test »• Création du package• Création de la classe test case
mardi 27 octobre 2009
3.3. Lancer le test case
Clic droit sur la classe test case : Run As ➜ JUnit Test
mardi 27 octobre 2009
Mise en place des tests
En vrai.
mardi 27 octobre 2009
3. Familles de commandes Selenium
‣ verify* / verifyNot*
Vérifie des éléments dans la page webattendu
verifyTextPresent, verifyValue, ...
‣ waitFor* (particulièrement avec AJAX)
Attend le changement de l’élément
waitForVisible, waitForAttribute, ...
‣ mouse*
Simulation de la souris (déplacements, boutons, ...)
mouseDown, mouseMove, ...
‣ store* (avancé)
Stocke des valeurs pour utilisation ultérieure
‣ click*
click, clickAndWait, clickAt, ...
mardi 27 octobre 2009
3. Commandes Selenium les plus utilisées
‣ open
Charge une URL
‣ click / clickAndWait
Effectue un clic / puis attend un chargement de la page
‣ verifyTitle
Vérifie que le titre est celui attendu
‣ verifyTextPresent
Vérifie qu’un morceau de texte est présent dans la page
‣ verifyElementPresent
Vérifie qu’un élément est présent dans la page
‣ verifyText
Vérifie qu’un élément contient le texte indiqué
‣ verifyValue
‣ Vérifie qu’un contrôle (champ de saisie) a la valeur indiquée
mardi 27 octobre 2009
4. Maintenance des tests
Cas d’un problème fréquent...
mardi 27 octobre 2009
4. Maintenance des tests
• Ajout, modification, suppression de fonctionnalités➜ mettre à jour les tests en conséquence(comme tous les tests...)
• Problème de l’identification des éléments➜ identifier sans équivoque les éléments manipulés par l’utilisateur (et donc par Selenium RC)
mardi 27 octobre 2009
4. Identification des éléments
• Par IDExemple : emailField
• Par nom (attribut name), pour les éléments nommésExemple : email
• Par XPathExemple : xpath=//button[@type=‘submit’]
• Par sélecteur CSS (recommandé)Exemple : css=#mainToolbar .createButton
• Plus d’informations : Locating Elements
mardi 27 octobre 2009
5. Comment faire avec AJAX ?
mardi 27 octobre 2009
5. Comment faire avec Ajax ?
• verifyTextPresent se moque de la visibilité des éléments➜ ne pas créer les messages utilisateur à l’avance, en ne jouant que sur leur visibilité
• utiliser les commandes waitFor :➜ waitForAttribute, waitForVisible (exemple)
mardi 27 octobre 2009
Conclusion
mardi 27 octobre 2009
Conclusion
• Comme tous les tests, ils...
‣ sont très importants !
‣ permettent un évolution mieux contrôlée des logiciels
• Mais, comme tout programme, ils sont assez difficiles à maintenir
• AJAX ➜ complexité des tests d’interfaces
‣ peut amener à modifier (légèrement ?) l’interface pour la rendre « Selenium-friendly »
• Des tests mal faits ou non maintenus ne servent à rien !
mardi 27 octobre 2009
GreenIvory [email protected]
+1 775-855-3598
GreenIvory [email protected]+33 (0)9 50 53 10 34
Merci de votre attention !Thank you!
Vielen Dank!Muchas gracias!
Grazie mille!شكرا جزي!!
ありがとうございました谢谢您！
mardi 27 octobre 2009
Recommended
