Selenium And Angularjs Wait Until To Do Some Actions

I'm using selenium to test AngularJS application. I'm facing issue that I cannot do any actions on the page until it loads fully. I can put Thread.sleep(), but this is not good sol

Solution 1:

I have faced similar situation while writing tests using selenium against angular app. Actually, in angular app the skeleton or view of page loads instantly but it keeps calling $http request in background to fetch the data. Once the angular app finishes the $http call, it renders the view with response of $http call.So having a classical wait of selenium like waitUntilPageToBeLoad, waitUntilElementToBeClickable do not work here at all. The other solution is to have Thread.Sleep() but as you mentioned that is not an intelligent wait.

So why not have wait method to ensure that $http calls are finished in background. You can try below wait method,it worked for me.I Hope it works for you too!

    public void untilAngularFinishHttpCalls() {
        final String javaScriptToLoadAngular =
                "var injector = window.angular.element('body').injector();" + 
                "var $http = injector.get('$http');" + 
                "return ($http.pendingRequests.length === 0)";

        ExpectedCondition<Boolean> pendingHttpCallsCondition = new ExpectedCondition<Boolean>() {
            public Boolean apply(WebDriver driver) {
                return ((JavascriptExecutor) driver).executeScript(javaScriptToLoadAngular).equals(true);
            }
        };
        WebDriverWait wait = new WebDriverWait(driver, 20); // timeout = 20 secs
        wait.until(pendingHttpCallsCondition);
    }

Solution 2:

Sorry I can't post a comment yet so here is my piece of help as an answer.

Following up from the error on the comments on Priyanshu Shekhar's answer, all that means is that jqLite (Angular's basic jquery version) is not enough to do what that code is trying to do.

Including the full jquery version in your page should solve that problem.