Les tests AngularJS avec le Sélénium

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.

/* C# Example
var pageLoadWait = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(timeout));
pageLoadWait.Until<bool>(
(driver) =>
{
return (bool)JS.ExecuteScript(
@"*/
try {
if (document.readyState !== 'complete') {
return false; //Page not loaded yet
}
if (window.jQuery) {
if (window.jQuery.active) {
return false;
} else if (window.jQuery.ajax && window.jQuery.ajax.active) {
return false;
}
}
if (window.angular) {
if (!window.qa) {
//Used to track the render cycle finish after loading is complete
window.qa = {
doneRendering: false
};
}
//Get the angular injector for this app (change element if necessary)
var injector = window.angular.element('body').injector();
//Store providers to use for these checks
var $rootScope = injector.get('$rootScope');
var $http = injector.get('$http');
var $timeout = injector.get('$timeout');
//Check if digest
if ($rootScope.$$phase === '$apply' || $rootScope.$$phase === '$digest' || $http.pendingRequests.length !== 0) {
window.qa.doneRendering = false;
return false; //Angular digesting or loading data
}
if (!window.qa.doneRendering) {
//Set timeout to mark angular rendering as finished
$timeout(function() {
window.qa.doneRendering = true;
}, 0);
return false;
}
}
return true;
} catch (ex) {
return false;
}
/*");
});*/

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é:

        public bool DomHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
var hasThePageLoaded = jsExecutor.ExecuteScript("return document.readyState");
while (hasThePageLoaded == null || ((string)hasThePageLoaded != "complete" && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasThePageLoaded = jsExecutor.ExecuteScript("return document.readyState");
if (timeout != 0) continue;
Console.WriteLine("The page has not loaded successfully in the time provided.");
return false;
}
return true;
}

Ensuite, nous vérifions si JQuery est utilisé:

public bool IsJqueryBeingUsed(IJavaScriptExecutor jsExecutor)
{
var isTheSiteUsingJQuery = jsExecutor.ExecuteScript("return window.jQuery != undefined");
return (bool)isTheSiteUsingJQuery;
}

Si JQuery est utilisé nous avons ensuite, vérifiez qu'il est chargé:

public bool JqueryHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
var hasTheJQueryLoaded = jsExecutor.ExecuteScript("jQuery.active === 0");
while (hasTheJQueryLoaded == null || (!(bool) hasTheJQueryLoaded && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasTheJQueryLoaded = jsExecutor.ExecuteScript("jQuery.active === 0");
if (timeout != 0) continue;
Console.WriteLine(
"JQuery is being used by the site but has failed to successfully load.");
return false;
}
return (bool) hasTheJQueryLoaded;
}

Nous avons ensuite faire de même pour AngularJS:

    public bool AngularIsBeingUsed(IJavaScriptExecutor jsExecutor)
{
string UsingAngular = @"if (window.angular){
return true;
}";            
var isTheSiteUsingAngular = jsExecutor.ExecuteScript(UsingAngular);
return (bool) isTheSiteUsingAngular;
}

Si elle est utilisée ensuite on vérifie qu'il a chargé:

public bool AngularHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
string HasAngularLoaded =
@"return (window.angular !== undefined) && (angular.element(document.body).injector() !== undefined) && (angular.element(document.body).injector().get('$http').pendingRequests.length === 0)";            
var hasTheAngularLoaded = jsExecutor.ExecuteScript(HasAngularLoaded);
while (hasTheAngularLoaded == null || (!(bool)hasTheAngularLoaded && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasTheAngularLoaded = jsExecutor.ExecuteScript(HasAngularLoaded);
if (timeout != 0) continue;
Console.WriteLine(
"Angular is being used by the site but has failed to successfully load.");
return false;
}
return (bool)hasTheAngularLoaded;
}

Après, nous vérifions que le DOM est chargé, vous pouvez ensuite utiliser ces valeurs bool faire personnalisé attend:

    var jquery = !IsJqueryBeingUsed(javascript) || wait.Until(x => JQueryHasLoaded(javascript));
var angular = !AngularIsBeingUsed(javascript) || wait.Until(x => AngularHasLoaded(javascript));

J'ai fait le code suivant et il m'a aidé pour l'asynchrone en condition de course échecs.

$window._docReady = function () {
var phase = $scope.$root.$$phase;
return $http.pendingRequests.length === 0 && phase !== '$apply' && phase !== '$digest';
}

Maintenant en sélénium PageObject modèle, vous pouvez vous attendre

Object result = ((RemoteWebDriver) driver).executeScript("return _docReady();");
return result == null ? false : (Boolean) result;

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.

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

À 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