Erkennen, dass Angular 2 ausgeführt wird

Question

Wir verwenden Selenium WebDriver, um unsere UI-basierten Tests zu automatisieren. Eine unserer Herausforderungen besteht darin, zu erkennen, wann eine Seite tatsächlich geladen wurde, und Angular 1 war auch in dieser Hinsicht eine Herausforderung. Wir sind am Ende dieses Stück Code ausgeführt wird eigens zu erkennen, ob Angular 1 durchgeführt wird:

if(typeof window.angular !== \"undefined\") 
{ 
    var injector = window.angular.element(\"*[ng-app]\").eq(0).injector(); 

    if(injector) 
    { 
    var $rootScope = injector.get(\"$rootScope\"); 
    var $http = injector.get(\"$http\"); 

    if($rootScope.$$phase === \"$apply\" || $rootScope.$$phase === \"$digest\" || $http.pendingRequests.length !== 0) 
    { 
     return false; 
    } 
    } 
} 

Die App, die wir den Code Angular 2. verwenden kürzlich umgeschaltet testen Schnipsel oben nicht für Angular 2 bis zum Ende nicht warten . Irgendwelche Vorschläge?

Answer 1

Bei Angular 2, sollten Sie für stableness von "testabilities" aller Angular 2 apps warten:

functions.waitForAllAngular2 = function(callback) { 
    try { 
    var testabilities = window.getAllAngularTestabilities(); 
    var count = testabilities.length; 
    var decrement = function() { 
     count--; 
     if (count === 0) { 
     callback(); 
     } 
    }; 
    testabilities.forEach(function(testability) { 
     testability.whenStable(decrement); 
    }); 
    } catch (err) { 
    callback(err.message); 
    } 
}; 

Taken from Protractor source code. Winkelmesser ist ein Wrapper um WebDriverJS Javascript Selenbindungen; entwickelt, um AngularJS-Anwendungen zu testen (nicht nur, aber am besten geeignet für).

Answer 2

würde ich ein Ereignis aus ngAfterViewInit() in der Wurzelkomponente

@Component({ 
    selector: 'my-app', 
    ... 
}) 
export class AppComponent { 
    constructor(private renderer:Renderer, private elementRef:ElementRef){} 
    ngAfterViewInit() { 
    this.renderer.invokeElementMethod(this.elementRef.nativeElement, 
     'dispatchEvent', 
     [new CustomEvent('angular2-loaded', { bubbles: true })]); 
    } 
} 

und dann auf dieses Ereignis emittieren hören WebDriver verwenden.

Answer 3

Ich reparierte diese durch eine Aktionen Klasse zu schreiben, in dem ich für Angular wartete vor der Durchführung beauftragt werden (klicken, füllen, überprüfen etc.) mit Paul Hammants ngWebDriver:

import com.paulhammant.ngwebdriver.NgWebDriver; 

public class ActionsWithWaits { 

private NgWebDriver ngdriver; 
private JavascriptExecutor js; 

public ActionsWithWaits(){ 
    WebDriver driver = getDriver(); 
    js = (JavascriptExecutor) driver; 
    driver.manage().timeouts().setScriptTimeout(9, TimeUnit.SECONDS); 
    ngdriver = new NgWebDriver(js); 
} 


public void waitForAngular(){ 
    ngdriver.waitForAngularRequestsToFinish(); 
} 

public void waitAndClick(WebElementFacade button){ 
    waitForAngular(); 
    button.click(); 
} 

public void waitAndFillIn(String text, WebElementFacade field){ 
    waitForAngular(); 
    field.type(text); 
} 

etc.. 

Jetzt können Sie nur diese Aktionen verwenden, anstatt der Standard-Selen Aktionen und Sie müssen sich um nichts mehr kümmern (=

Answer 4

mit @alecxe Antwort i mit folgenden Javascript einzeiler beendet bis zu überprüfen, ob alle Winkel Testabilities stabil sind

window.getAllAngularTestabilities().findIndex(x=>!x.isStable()) === -1