ExtJS et Selenium IDE

Selenium IDE est une extension pour Firefox qui permet d'enregistrer une suite d'actions (clic, saisie) pour les rejouer ensuite à des fins de test. Chaque action est associée à une commande et l'ensemble forme un script qui peut être sauvegardé sous la forme d'un fichier XML. Ce script peut ensuite être modifié.

C'est donc un outil particulièrement intéressant pour tester une interface utilisateur réalisée avec ExtJS. Une des difficultés de cette approche, c'est qu'il faut être en mesure d'identifier de façon sûre les différents éléments de l'interface (boutons, liens, champs de formulaire...).

Localiser les éléments

Pour les éléments de formulaires, pas de problème. Selenium IDE sait les localiser à l'aide de leur attributs name. Il faut simplement veiller à ce qu'il n'y ait pas deux éléments avec le même nom sur la page (ce qui peut arriver avec l'attribut name, mais pas avec l'attribut id qui doit être unique dans un document).

Pour les autres composants, ExtJS génère automatiquement des identifiants à l'aide de la méthode Ext.id. Cette méthode incrémente en fait un compteur et préfixe l'ID avec ext-gen. Le premier élément généré sur la page aura donc comme ID ext-gen1, le deuxième élément ext-gen2 et ainsi de suite. On ne peut donc pas se baser sur ces identifiants, car ils sont susceptibles de changer en fonction du nombre de composants générés dynamiquement sur la page.

Pour la plupart des composants, on peut spécifier un identifiant personnalisé dans la configuration à l'aide du paramètre id. Cependant quelques éléments posent problème.

Les boutons

Pour les boutons, l'identifiant qu'on définit dans la configuration n'est pas affecté à l'élément button, mais à l'élément table qui entoure le bouton et qui permet de personnaliser son apparence. Il faut donc utiliser un sélecteur CSS pour localiser la balise button.

Exemple pour localiser un bouton avec l'ID add-btn :

css=#add-btn button

Les boutons des boîtes de message

ExtJS n'offre pas la possibilité de définir des identifiants pour les boutons des boites de message (Ext.MessageBox). On peut alors utiliser le sélecteur CSS suivant pour localiser un bouton en se basant sur son contenu.

Exemple pour un bouton de confirmation contenant Oui :

css=button:contains(Oui)

Savoir attendre

L'utilisation de la commande pause peut également vous être d'un grand secours, si vous utilisez par exemple Ext.form.FormPanel.monitorValid. Cette option de configuration permet de n'activer les boutons de soumission d'un formulaire que lorsque les données saisies sont validées. ExtJS utilise pour cela une tâche de fond qui s'exécute toutes les 200 ms par défaut. Vous devez donc insérer une pause avant le clic sur le bouton qui envoie votre formulaire.

Les différentes fonctions wait* vous permettent également d'attendre qu'un événement se produise avant d'enchainer le reste du script. waitForElementPresent par exemple, permet de s'assurer qu'un élément est bien créé dans le DOM.

Conclusion

Prenez l'habitude de définir systématiquement le paramètre id dans la configuration des composants que vous créez, il vous sera alors bien plus facile d'automatiser les tests de vos interfaces.

Voir aussi

  • http://www.clever-age.com/veille/blog/selenium-testez-fonctionnellement-vos-applications-web-partie-1-2-.html
  • http://release.seleniumhq.org/selenium-core/0.8.0/reference.html

Ajouter un commentaire