Tests d’interfaces web
avec Selenium
Frédéric BONJOUR (développeur web) www.greenivory.com
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 web
1. Principe
mardi 27 octobre 2009

1. Principe
Réseau local
Poste de Serveur de tests
développement
Envoi de messages Pilote le navigateur
Effectue des tests
Test case rs
(code Java) s ve Application à tester
Selenium RC
lt at (dans un navigateur)
client Selenium
és
u r serveur Selenium
s r it eu
ie
le l ’éd
vo ou
en le
R so
on
l ac
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 DOM
Document Object Model
Hié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’inscription
Ecrit 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 case
package com.greenivory.devforum5.uitest;
import com.thoughtworks.selenium.SeleneseTestCase;
public class SubscriptionTest extends SeleneseTestCase {
Simule la saisie du texte « Fred »
public void setUp() throws Exception { dans le champ de saisie identifié
setUp("http://localhost:81/", "*firefox"); « x-auto-10 »
selenium.setSpeed("1000"); ainsi que la saisie du texte
} « f.bonjour@greenivory.com »
Demande le chargement de l’URL indiquée dans le champ de saisie identifié
public void testSubscription() throws Exception { « x-auto-11 »
selenium.open("/formations/selenium/");
selenium.type("x-auto-10", "Fred");
selenium.type("x-auto-11", "f.bonjour@greenivory.com");
Simule un clic sur le bouton
selenium.click("//button[@type=‘submit’]");
selenium.click("//button[@type='submit']");
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
• Création du source folder « test »
• Création du package
• Création de la classe test case
Client Selenium
(SeleneseTestCase)
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 ID
Exemple : emailField
• Par nom (attribut name), pour les éléments nommés
Exemple : email
• Par XPath
Exemple : 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

Merci de votre attention !
Thank you!
Vielen Dank!
Muchas gracias!
Grazie mille!
!!"#$ ‫('&ا‬
GreenIvory FRANCE GreenIvory USA
www.greenivory.fr www.greenivory.com
info@greenivory.fr info@greenivory.com
+33 (0)9 50 53 10 34 +1 775-855-3598
mardi 27 octobre 2009