Tests d’interfaces web
                                           avec Selenium


           Frédéric BONJOUR (développeur...
Présentation


                        • Frédéric BONJOUR (si, si, c’est mon nom !)
                          ‣ développeu...
Sommaire



                          Introduction
                        1. Principe
                        2. Selenium...
Introduction




                         • Différents types de tests
                          ‣ tests unitaires

       ...
Introduction




                         • Tests unitaires
                          ‣ vérifient le fonctionnement de briq...
Introduction




                         • Tests d’intégration
                          ‣ vérifient que les composants de...
Introduction




                         • Tests d’interfaces
                          ‣ vérifient que l’interface répond...
Tests d’interfaces web
                              1. Principe




mardi 27 octobre 2009
1. Principe

                                      Réseau local
                   Poste de                               ...
2. Selenium RC




mardi 27 octobre 2009
2. Selenium RC (Remote Control)




                        • Serveur
                        • Reçoit des messages du tes...
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...
3.1. Rédiger le test case
                           package com.greenivory.devforum5.uitest;

                           ...
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 p...
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...
3.3. Lancer le test case


                             Clic droit sur la classe test case : Run As ➜ JUnit Test




mardi...
Mise en place des tests
                                 En vrai.




mardi 27 octobre 2009
3. Familles de commandes Selenium

                           ‣   verify* / verifyNot*
                               Véri...
3. Commandes Selenium les plus utilisées
                           ‣   open
                               Charge une URL...
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
               ...
4. Identification des éléments


                         • Par ID
                          Exemple : emailField
         ...
5. Comment faire avec
                              AJAX ?




mardi 27 octobre 2009
5. Comment faire avec Ajax ?




                         • verifyTextPresent se moque de la visibilité des éléments
     ...
Conclusion




mardi 27 octobre 2009
Conclusion


                        • Comme tous les tests, ils...
                          ‣ sont très importants !

  ...
Merci de votre attention !
                                    Thank you!
                                   Vielen Dank!
...
Prochain SlideShare
Chargement dans…5
×

20091008 Tests Interaces Web Riches Selenium

2 059 vues

Publié le

Cette session présente une solution pour tester de manière efficace et automatisée une interface web riche créée avec GWT / GXT à l'aide de l'outil Selenium.

Publié dans : Technologie, Voyages, Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 059
Sur SlideShare
0
Issues des intégrations
0
Intégrations
21
Actions
Partages
0
Téléchargements
43
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

20091008 Tests Interaces Web Riches Selenium

  1. 1. Tests d’interfaces web avec Selenium Frédéric BONJOUR (développeur web) www.greenivory.com mardi 27 octobre 2009
  2. 2. 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
  3. 3. 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
  4. 4. Introduction • Différents types de tests ‣ tests unitaires ‣ tests d’intégration ‣ tests d’interfaces mardi 27 octobre 2009
  5. 5. Introduction • Tests unitaires ‣ vérifient le fonctionnement de briques logicielles simples ‣ bas niveaux : méthodes, classes ‣ ➜ JUnit mardi 27 octobre 2009
  6. 6. 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
  7. 7. 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
  8. 8. Tests d’interfaces web 1. Principe mardi 27 octobre 2009
  9. 9. 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
  10. 10. 2. Selenium RC mardi 27 octobre 2009
  11. 11. 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
  12. 12. Démo : Selenium RC mardi 27 octobre 2009
  13. 13. 3. Mise en place des tests mardi 27 octobre 2009
  14. 14. 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
  15. 15. 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
  16. 16. On ne va quand même pas écrire ça à la main ?... mardi 27 octobre 2009
  17. 17. 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
  18. 18. Démo : Selenium IDE mardi 27 octobre 2009
  19. 19. 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
  20. 20. 3.3. Lancer le test case Clic droit sur la classe test case : Run As ➜ JUnit Test mardi 27 octobre 2009
  21. 21. Mise en place des tests En vrai. mardi 27 octobre 2009
  22. 22. 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
  23. 23. 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
  24. 24. 4. Maintenance des tests Cas d’un problème fréquent... mardi 27 octobre 2009
  25. 25. 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
  26. 26. 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
  27. 27. 5. Comment faire avec AJAX ? mardi 27 octobre 2009
  28. 28. 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
  29. 29. Conclusion mardi 27 octobre 2009
  30. 30. 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
  31. 31. 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

×