20091008 Tests Interaces Web Riches Selenium

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ériﬁent le fonctionnement de briques logicielles simples ‣ bas niveaux : méthodes, classes ‣ ➜ JUnit mardi 27 octobre 2009

Introduction • Tests d’intégration ‣ vériﬁent que les composants de l’application s’intègrent bien les uns avec les autres ‣ vériﬁent 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. Identiﬁcation 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 difﬁciles à maintenir • AJAX ➜ complexité des tests d’interfaces ‣ peut amener à modiﬁer (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

20091008 Tests Interaces Web Riches Selenium

by GreenIvory

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 19

Statistics

20091008 Tests Interaces Web Riches Selenium Presentation Transcript