L'obstacle le plus important dans les tests de ExtJS avec le Sélénium est que ExtJS ne rend pas des éléments HTML standard et Selenium IDE naïvement (et à juste titre) de générer des commandes ciblées sur les éléments qui agissent simplement comme décoration -- les éléments superflus qui aident ExtJS avec l'ensemble du bureau-look-and-feel. Voici quelques conseils et astuces que j'ai recueillies lors de l'écriture automatisée de Sélénium dans une application ExtJS.
Conseils Généraux
Localisation Des Éléments
Lors de la génération de Sélénium cas de test par l'enregistrement des actions de l'utilisateur avec Selenium IDE sur Firefox, le Sélénium permettra de les actions enregistrées sur les id des éléments HTML. Cependant, pour la plupart des éléments cliquables, ExtJS utilise id générés comme "ext-gen-345", qui sont susceptibles de changer lors d'une visite ultérieure à la même page, même si aucun code n'des modifications ont été apportées. Après l'enregistrement des actions de l'utilisateur pour un test, il doit y avoir un manuel effort pour passer à travers toutes ces actions qui dépendent id générés et de les remplacer. Il existe deux types de remplacements peuvent être effectués:
Le remplacement d'un Id Localisateur avec un CSS ou XPath Locator
CSS localisateurs de commencer avec "css=" XPath et les localisateurs de commencer par "//" (le "xpath=" préfixe est facultatif). CSS locators sont moins détaillées et sont plus faciles à lire et doit être préférée à l'expression XPath locators. Cependant, il peut y avoir des cas où XPath locators doivent être utilisés, car un CSS localisateur ne peuvent tout simplement pas le couper.
L'Exécution De JavaScript
Certains éléments nécessitent plus qu'une simple souris/clavier interactions en raison de la complexité de rendu réalisé par ExtJS. Par exemple, un Ext.forme.CombBox n'est pas vraiment un <select> élément, mais une saisie de texte avec un décollement de la liste déroulante qui est quelque part en bas de l'arborescence du document. Afin de simuler correctement une zone de liste déroulante de sélection, il est possible d'abord de simuler un clic sur la flèche de la liste déroulante, puis cliquez sur la liste qui s'affiche. Cependant, la localisation de ces éléments par le biais de CSS ou XPath locators peut être lourd. Une alternative consiste à localiser le ComoBox composant lui-même et appeler des méthodes sur elle pour simuler la sélection:
var combo = Ext.getCmp('genderComboBox'); // returns the ComboBox components
combo.setValue('female'); // set the value
combo.fireEvent('select'); // because setValue() doesn't trigger the event
En Sélénium de l' runScript commande peut être utilisée pour effectuer l'opération ci-dessus sous une forme plus concise:
with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
Faire face à l'AJAX et au Rendu Lent
Le sélénium a "*AndWait" saveurs pour toutes les commandes en attente pour le chargement de la page lorsqu'une action de l'utilisateur les résultats dans les transitions de page ou recharge. Cependant, depuis l'AJAX récupère n'impliquent pas de réelle chargement de la page, ces commandes ne peuvent pas être utilisés pour la synchronisation. La solution consiste à utiliser des indices visuels comme la présence/absence d'un AJAX indicateur de progrès ou de l'apparition de lignes dans une grille, des composants supplémentaires, des liens etc. Par exemple:
Command: waitForElementNotPresent
Target: css=div:contains('Loading...')
Parfois, un élément n'apparaît qu'après un certain laps de temps, selon la vitesse de ExtJS rend les composants après une action de l'utilisateur les résultats dans un changement de vue. Au lieu d'utiliser arbitraire des retards dans l' pause de la commande, l'idéal est d'attendre jusqu'à ce que l'élément d'intérêt vient à notre portée. Par exemple, cliquez sur un élément, après un temps d'attente pour qu'il apparaisse:
Command: waitForElementPresent
Target: css=span:contains('Do the funky thing')
Command: click
Target: css=span:contains('Do the funky thing')
En s'appuyant sur l'arbitraire des pauses n'est pas une bonne idée, étant donné que des différences de calendrier que résultat de l'exécution de tests sur différents navigateurs ou sur des machines différentes, fera le cas de test feuilletée.
Non cliquable Éléments
Certains éléments ne peuvent pas être déclenchées par l' click commande. C'est parce que l'écouteur d'événement est en fait sur le conteneur, en regardant les événements de souris sur ses éléments enfant, que, finalement, la bulle à la mère. Le contrôle onglet est un exemple. Cliquez sur un onglet, vous avez pour simuler un mouseDown événement à l'étiquette d'onglet:
Command: mouseDownAt
Target: css=.x-tab-strip-text:contains('Options')
Value: 0,0
Validation Sur Le Terrain
Les champs de formulaire (Ext.le formulaire.* les composants) associés à des expressions régulières ou vtypes pour la validation de déclencher la validation avec un certain retard (voir l' validationDelay de la propriété qui est fixé à 250 ms par défaut), après que l'utilisateur entre du texte ou immédiatement lorsque le champ perd le focus -- ou des flous (voir l' validateOnDelay de la propriété). Afin de déclencher la validation sur le terrain après la publication du type de Sélénium commande pour entrer du texte à l'intérieur d'un champ, vous devez effectuer une des opérations suivantes:
-
Déclenchement Retardé La Validation
ExtJS déclenche la validation de la minuterie lorsque le champ reçoit keyup événements. Pour déclencher le minuteur, simplement émettre un mannequin événement keyup (il n'a pas d'importance qui vous l'utiliser comme ExtJS l'ignore), suivie d'une courte pause est plus longue que la validationDelay:
Command: keyUp
Target: someTextArea
Value: x
Command: pause
Target: 500
-
Le Déclenchement De Validation Immédiate
Vous pouvez injecter un flou de l'événement dans le champ de déclencher la validation immédiate:
Command: runScript
Target: someComponent.nameTextField.fireEvent("blur")
La vérification des Résultats de Validation
Après la validation, vous pouvez vérifier la présence ou l'absence d'un champ erreur:
Command: verifyElementNotPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Command: verifyElementPresent
Target: //*[@id="nameTextField"]/../*[@class="x-form-invalid-msg" and not(contains(@style, "display: none"))]
Notez que le "display: none" vérification est nécessaire, car une fois qu'une erreur s'affichent, puis il doit être caché, ExtJS aurez simplement à masquer l'erreur de terrain au lieu de le retirer de l'arbre du DOM.
L'élément de Conseils spécifiques
En cliquant sur un Poste.forme.Bouton
-
Option 1
Commande: cliquez sur
Cible: css=bouton:contains ("Enregistrer")
Sélectionne le bouton par sa légende
-
Option 2
Commande: cliquez sur
Cible: css=#enregistrez-bouton options
Sélectionne le bouton par son id
La sélection d'une Valeur à partir d'un Poste.forme.Zone de liste déroulante
Command: runScript
Target: with (Ext.getCmp('genderComboBox')) { setValue('female'); fireEvent('select'); }
La première définit la valeur et puis explicitement les feux de l'événement select dans le cas où il y a des observateurs.
