Nous avons utilisé le sélénium avec beaucoup de succès pour gérer les tests de sites Web de haut niveau (en plus de nombreux doctests python au niveau du module). Cependant, nous utilisons maintenant extjs pour de nombreuses pages et il s'avère difficile d'incorporer des tests Selenium pour les composants complexes comme les grilles.
Quelqu'un a-t-il réussi à écrire des tests automatisés pour des pages Web basées sur extjs? Beaucoup de recherches sur Google trouvent des personnes ayant des problèmes similaires, mais peu de réponses. Merci!
Réponses:
Le plus gros obstacle dans le test d'ExtJS avec Selenium est qu'ExtJS ne rend pas les éléments HTML standard et que Selenium IDE générera naïvement (et à juste titre) des commandes ciblées sur des éléments qui agissent simplement comme décor - des éléments superflus qui aident ExtJS avec l'ensemble du bureau- regarde et ressent. Voici quelques trucs et astuces que j'ai rassemblés lors de l'écriture de test Selenium automatisé sur une application ExtJS.
Conseils généraux
Localisation des éléments
Lors de la génération de cas de test Selenium en enregistrant les actions des utilisateurs avec Selenium IDE sur Firefox, Selenium basera les actions enregistrées sur les identifiants des éléments HTML. Cependant, pour la plupart des éléments cliquables, ExtJS utilise des identifiants générés comme "ext-gen-345" qui sont susceptibles de changer lors d'une prochaine visite sur la même page, même si aucune modification de code n'a été effectuée. Après avoir enregistré les actions de l'utilisateur pour un test, un effort manuel est nécessaire pour exécuter toutes ces actions qui dépendent des identifiants générés et pour les remplacer. Deux types de remplacements peuvent être effectués:
Remplacement d'un localisateur d'identifiant par un localisateur CSS ou XPath
Les localisateurs CSS commencent par "css =" et les localisateurs XPath commencent par "//" (le préfixe "xpath =" est facultatif). Les localisateurs CSS sont moins détaillés et plus faciles à lire et devraient être préférés aux localisateurs XPath. Cependant, il peut y avoir des cas où des localisateurs XPath doivent être utilisés car un localisateur CSS ne peut tout simplement pas le couper.
Exécution de JavaScript
Certains éléments nécessitent plus que de simples interactions souris / clavier en raison du rendu complexe effectué par ExtJS. Par exemple, un Ext.form.CombBox n'est pas vraiment un
<select>
élément mais une entrée de texte avec une liste déroulante détachée qui se trouve quelque part au bas de l'arborescence du document. Afin de simuler correctement une sélection ComboBox, il est possible de simuler d'abord un clic sur la flèche déroulante puis de cliquer sur la liste qui apparaît. Cependant, localiser ces éléments via des localisateurs CSS ou XPath peut être fastidieux. Une alternative consiste à localiser le composant ComoBox lui-même et à appeler des méthodes dessus pour simuler la sélection:Dans Selenium, la
runScript
commande peut être utilisée pour effectuer l'opération ci-dessus sous une forme plus concise:Faire face à AJAX et au rendu lent
Selenium a des saveurs "* AndWait" pour toutes les commandes d'attente de chargement de page lorsqu'une action de l'utilisateur entraîne des transitions ou des recharges de page. Cependant, comme les récupérations AJAX n'impliquent pas de chargements de page réels, ces commandes ne peuvent pas être utilisées pour la synchronisation. La solution est d'utiliser des indices visuels comme la présence / absence d'un indicateur de progression AJAX ou l'apparition de lignes dans une grille, des composants supplémentaires, des liens etc. Par exemple:
Parfois, un élément n'apparaît qu'après un certain temps, selon la vitesse à laquelle ExtJS restitue les composants après qu'une action de l'utilisateur entraîne un changement de vue. Au lieu d'utiliser des délais arbitraires avec la
pause
commande, la méthode idéale est d'attendre que l'élément d'intérêt soit à notre portée. Par exemple, pour cliquer sur un élément après avoir attendu qu'il apparaisse:S'appuyer sur des pauses arbitraires n'est pas une bonne idée car les différences de timing résultant de l'exécution des tests dans différents navigateurs ou sur différentes machines rendront les cas de test floconneux.
Éléments non cliquables
Certains éléments ne peuvent pas être déclenchés par la
click
commande. C'est parce que l'écouteur d'événements est en fait sur le conteneur, surveillant les événements de souris sur ses éléments enfants, qui finissent par remonter jusqu'au parent. Le contrôle onglet est un exemple. Pour cliquer sur l'onglet a, vous devez simuler unmouseDown
événement au niveau de l'étiquette de l'onglet:Validation sur le terrain
Les champs de formulaire (composants Ext.form. *) Qui ont des expressions régulières associées ou des vtypes pour la validation déclencheront la validation avec un certain délai (voir la
validationDelay
propriété qui est définie sur 250 ms par défaut), après que l'utilisateur a saisi du texte ou immédiatement lorsque le champ perd focus - ou floue (voir lavalidateOnDelay
propriété). Afin de déclencher la validation du champ après avoir émis la commande de type Selenium pour entrer du texte dans un champ, vous devez effectuer l'une des opérations suivantes:Déclenchement de la validation retardée
ExtJS déclenche le temporisateur de délai de validation lorsque le champ reçoit des événements de keyup. Pour déclencher ce minuteur, émettez simplement un événement de keyup factice (peu importe la clé que vous utilisez car ExtJS l'ignore), suivi d'une courte pause qui est plus longue que le validationDelay:
Déclenchement de la validation immédiate
Vous pouvez injecter un événement de flou dans le champ pour déclencher une validation immédiate:
Vérification des résultats de validation
Après validation, vous pouvez vérifier la présence ou l'absence d'un champ d'erreur:
Notez que la vérification "display: none" est nécessaire car une fois qu'un champ d'erreur est affiché et qu'il doit ensuite être caché, ExtJS masquera simplement le champ d'erreur au lieu de le supprimer entièrement de l'arborescence DOM.
Conseils spécifiques aux éléments
Cliquer sur un bouton Ext.form.Button
Option 1
Commande: cliquez sur Cible: css = bouton: contient ('Enregistrer')
Sélectionne le bouton par sa légende
Option 2
Commande: cliquez sur Target: css = # save-options button
Sélectionne le bouton par son identifiant
Sélection d'une valeur à partir d'un ext.form.ComboBox
Définit d'abord la valeur, puis déclenche explicitement l'événement select au cas où il y aurait des observateurs.
la source
Ce blog m'a beaucoup aidé. Il a beaucoup écrit sur le sujet et il semble que ce soit toujours actif. Le gars semble également apprécier le bon design.
Il parle essentiellement d'utiliser l'envoi de javascript pour faire des requêtes et d'utiliser la méthode Ext.ComponentQuery.query pour récupérer des éléments de la même manière que vous le faites dans votre application ext en interne. De cette façon, vous pouvez utiliser des xtypes et des itemsIds sans avoir à vous soucier d'essayer d'analyser les trucs fous générés automatiquement.
J'ai trouvé cet article particulièrement utile.
Pourrait publier quelque chose d'un peu plus détaillé ici bientôt - j'essaie toujours de comprendre comment faire cela correctement
la source
J'ai testé mon application Web ExtJs avec du sélénium. L'un des plus gros problèmes était de sélectionner un élément dans la grille afin d'en faire quelque chose.
Pour cela, j'ai écrit une méthode d'assistance (dans la classe SeleniumExtJsUtils qui est une collection de méthodes utiles pour une interaction plus facile avec ExtJs):
et quand j'avais besoin de sélectionner une ligne, j'appelais simplement:
Pour que cela fonctionne, je dois définir mon identifiant sur la grille et ne pas laisser ExtJs générer le sien.
la source
Pour détecter que cet élément est visible, utilisez la clause:
not(contains(@style, "display: none")
Il vaut mieux utiliser ceci:
la source
Pouvez-vous fournir plus d'informations sur les types de problèmes que vous rencontrez avec les tests extjs?
Une extension Selenium que je trouve utile est waitForCondition . Si votre problème semble être un problème avec les événements Ajax, vous pouvez utiliser waitForCondition pour attendre que les événements se produisent.
la source
Les pages Web Ext JS peuvent être difficiles à tester, en raison du HTML complexe qu'elles finissent par générer comme avec les grilles Ext JS.
HTML5 Robot gère cela en utilisant une série de bonnes pratiques pour rechercher et interagir de manière fiable avec des composants en fonction d'attributs et de conditions qui ne sont pas dynamiques. Il fournit ensuite des raccourcis pour ce faire avec tous les composants HTML, Ext JS et Sencha Touch avec lesquels vous auriez besoin d'interagir. Il se décline en 2 saveurs:
Par exemple, si vous souhaitez trouver la ligne de grille Ext JS contenant le texte "Foo", vous pouvez effectuer les opérations suivantes en Java:
... et vous pouvez faire ce qui suit dans Gwen:
Il y a beaucoup de documentation pour Java et Gwen sur la façon de travailler avec des composants spécifiques à Ext JS. La documentation détaille également le code HTML résultant pour tous ces composants Ext JS, que vous pouvez également trouver utiles.
la source
Conseils utiles pour récupérer la grille via l'identifiant de la grille sur la page: Je pense que vous pouvez étendre une fonction plus utile à partir de cette API.
la source
Tests plus faciles grâce aux attributs de données HTML personnalisés
À partir de la documentation Sencha :
En remplaçant la méthode
Ext.AbstractComponent
sonBoxReady
, j'ai défini un attribut de données personnalisé (dont le nom provient de matestIdAttr
propriété personnalisée de chaque composant) sur laitemId
valeur du composant , s'il existe. Ajoutez laTesting.overrides.AbstractComponent
classe au tableau de votreapplication.js
fichierrequires
.Cette méthode permet aux développeurs de réutiliser un identifiant descriptif dans leur code et de disposer de ces identifiants chaque fois que la page est rendue. Plus besoin de rechercher des identifiants non descriptifs et générés dynamiquement.
la source
Nous développons un framework de test qui utilise le sélénium et avons rencontré des problèmes avec extjs (car il s'agit d'un rendu côté client). Je trouve utile de rechercher un élément une fois que le DOM est prêt.
la source
Pour une interface utilisateur complexe qui n'est pas du HTML formel, xPath est toujours quelque chose sur lequel vous pouvez compter, mais un peu complexe lorsqu'il s'agit de différentes implémentations d'interface utilisateur utilisant ExtJs.
Vous pouvez utiliser Firebug et Firexpath comme extensions de Firefox pour tester le xpath d'un certain élément, et passer simplement le xpath complet comme paramètre au sélénium.
Par exemple en code java:
la source
Lorsque je testais l'application ExtJS à l'aide de WebDriver, j'ai utilisé l'approche suivante: j'ai recherché le texte champ par étiquette et obtenu l'
@for
attribut de l'étiquette. Par exemple, nous avons une étiquetteEt nous devons pointer WebDriver une entrée:
//input[@id=(//label[contains(text(),'Name Of Needed Label')]/@for)]
.Ainsi, il choisira l'identifiant de l'
@for
attribut et l'utilisera davantage. C'est probablement le cas le plus simple, mais il vous donne le moyen de localiser l'élément. C'est beaucoup plus difficile quand vous n'avez pas d'étiquette, mais vous devez ensuite trouver un élément et écrire votre xpath à la recherche de frères et sœurs, d'éléments descendants / ascendants.la source