• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
20091008   Tests Interaces Web Riches Selenium
 

20091008 Tests Interaces Web Riches Selenium

on

  • 2,350 views

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.

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.

Statistics

Views

Total Views
2,350
Views on SlideShare
2,331
Embed Views
19

Actions

Likes
0
Downloads
22
Comments
0

1 Embed 19

http://www.slideshare.net 19

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    20091008   Tests Interaces Web Riches Selenium 20091008 Tests Interaces Web Riches Selenium Presentation Transcript

    • 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