Les tests AngularJS avec le Sélénium
J'ai un SPA application sur pile ASP MVC + AngularJS et j'aimerais tester l'INTERFACE utilisateur.
Pour l'instant, je suis en train de Sélénium avec PhantomJS et WebKit pilotes.
Ceci est un exemple de page de test de vue avec un seul élément. Les éléments de la liste <li>
charger dynamiquement à partir du serveur et sont délimitées par Angulaire.
<div id="items">
<li>text</li>
<li>text2</li>
</div>
Je suis en train de passer un test et il y a une erreur dans cette ligne:
_driver.FindElements(By.TagName('li'))
À ce stade, il n'y a pas chargé les éléments et _driver.PageSource ne contiennent pas d'éléments.
Comment puis-je attendre pour les éléments à charge? S'il vous plaît ne pas suggérer Thread.Sleep()
Vous devez vous connecter pour publier un commentaire.
Cela permettra d'attendre le chargement de la page /jquery.ajax (si présent) et $http appels, et de l'accompagner d'un digest/render cycle, le jeter dans une fonction d'utilité et d'attendre à l'écart.
window.qa
en Javascript?Créer une nouvelle classe qui permet de déterminer si votre site web en utilisant AngularJS a fini de faire des appels AJAX, comme suit:
Vous pouvez l'utiliser n'importe où dans votre code en utilisant le code suivant:
Nous avons eu un problème similaire où notre maison est le cadre utilisé pour tester plusieurs sites, certains de ces derniers sont à l'aide de JQuery et certains sont en utilisant AngularJS (et 1 a même un mélange!). Notre cadre est écrit en C# il était donc important que toute JScript en cours d'exécution a été fait en peu de morceaux (à des fins de débogage). Il a effectivement eu beaucoup de réponses ci-dessus, et à la purée d'ensemble (donc du crédit lorsque le crédit est dû @npjohns). Voici une explication de ce que nous avons fait:
La suivante renvoie une valeur true /false si le DOM HTML est chargé:
Ensuite, nous vérifions si JQuery est utilisé:
Si JQuery est utilisé nous avons ensuite, vérifiez qu'il est chargé:
Nous avons ensuite faire de même pour AngularJS:
Si elle est utilisée ensuite on vérifie qu'il a chargé:
Après, nous vérifions que le DOM est chargé, vous pouvez ensuite utiliser ces valeurs bool faire personnalisé attend:
Si vous êtes en utilisant AngularJS, puis en utilisant le Rapporteur est une bonne idée.
Si vous utilisez le rapporteur, vous pouvez utiliser la waitForAngular() méthode qui permettra d'attente pour les requêtes http pour terminer. C'est toujours une bonne pratique à attendre pour les éléments à afficher avant d'agir sur eux, en fonction de votre langue et de la mise en œuvre, il pourrait ressembler à ceci dans un langage synchrone
Ou en JS vous pouvez utiliser attendez méthode qui exécute une fonction jusqu'à ce qu'elle retourne true
J'ai fait le code suivant et il m'a aidé pour l'asynchrone en condition de course échecs.
Maintenant en sélénium PageObject modèle, vous pouvez vous attendre
Vous pouvez juste le mien rapporteur utile pour les extraits de code. Cette fonction bloque jusqu'à ce Angulaire est fait le rendu de la page. C'est une variante de Shahzaib Salim réponse, sauf qu'il est d'interrogation pour elle et je suis en train de rappel.
Remplacer 'html' quelle que soit l'élément de votre
ng-app
.Il vient de https://github.com/angular/protractor/blob/71532f055c720b533fbf9dab2b3100b657966da6/lib/clientsidescripts.js#L51
Si votre application web est en effet créé avec Anguleux comme vous le dites, la meilleure façon de le faire de bout en bout, le test est avec Rapporteur.
En interne, Rapporteur utilise son propre
waitForAngular
méthode, afin d'assurer le Rapporteur attend automatiquement jusqu'Angulaire a fini de modifier le DOM.Ainsi, dans le cas normal, vous jamais besoin d'écrire explicitement
wait
dans vos cas de test: le Rapporteur fait pour vous.Vous pouvez regarder le Angulaire Phonecat tutoriel pour apprendre comment configurer le Rapporteur.
Si vous souhaitez utiliser le Rapporteur sérieusement, vous voulez adopter pageobjects. Si vous voulez un exemple de jeter un oeil à mon la page de l'objet de la suite de tests pour l'angle d'Phonecat.
Avec le Rapporteur de l'écriture de vos tests en Javascript (Rapporteur est en effet basée sur le Nœud), et pas en C# -- mais en retour, Rapporteur gère tous en attente pour vous.
Pour mon problème particulier avec la page HTML contenant des iframes et développé avec AnglularJS l'astuce suivante m'a sauvé beaucoup de temps:
Dans les DOM, j'ai clairement vu qu'il y est un iframe qui enveloppe tout le contenu.
Ainsi, en suivant le code censé fonctionner:
Mais ça ne fonctionnait pas et m'a dit quelque chose comme "Ne peuvent pas changer de cadre. La fenêtre a été fermée".
Puis j'ai modifié le code pour:
Après cela, tout s'est bien passé.
Bien évidemment Angulaire a été mangling quelque chose avec les iframes et juste après le chargement de la page lorsque vous vous attendez à ce que le conducteur se concentre sur le contenu par défaut, il a été porté par certains déjà enlevé par Anguleux.
Espérant que cela puisse aider certains d'entre vous.
Si vous ne voulez pas faire la totalité de commutateur de Rapporteur, mais vous ne voulez pas attendre pour le Angulaires je recommande d'utiliser Paul Hammants ngWebDriver (Java). Il est basé sur l'rapporteur, mais vous n'avez pas à faire le changement.
J'ai résolu le problème en écrivant une classe d'actions dans laquelle j'ai attendu Angulaire (à l'aide de ngWebDriver de waitForAngularRequestsToFinish()) avant la réalisation des actions (cliquez, remplir, vérifier, etc.).
Pour un extrait de code pour voir ma réponse à cette question
J'ai mis en œuvre l'utilisation en fonction de D Sayar de réponse
Et il pourrait utile pour quelqu'un. Vous avez juste à copier toutes les fonctions booléennes mentionner plus il y en à classe unique, puis ajouter ci-dessous les PageCallingUtility() la méthode. Cette méthode appelle interne de la dépendance.
Dans votre utilisation normale, vous devez appeler directement PageCallingUtility() la méthode.
À côté de eddiec suggèrent. Si vous testez une application AngularJS, je vous suggère fortement de penser rapporteur
Rapporteur, vous aidera à résoudre l'attente de la matière (synchronisation, async). Cependant, il y a quelques notes
1 - Vous avez besoin pour développer votre test en javascript
2 - Il y a quelques différents mécanisme de manipulation de flux de
Voici un exemple de comment attendre sur Angulaire si vous utilisez WebDriverJS. À l'origine, je pensais que vous aviez à créer un état, mais
wait
accepte n'importe quelle fonction.Malheureusement cela ne fonctionne pas avec PhantomJS en raison de CSP (contenu de la politique de sécurité) et
unsafe-eval
. Ne peut pas attendre pour headless Chrome 59 sur Windows.