Testing AngularJS with Selenium

Question

I have a SPA application on stack ASP MVC + AngularJS and I'd like to test the UI. For now, I'm trying Selenium with PhantomJS and WebKit drivers.

This is a sample testing page - view with a single element. The list items <li> load dynamically from the server and are bounded by Angular.

<div id="items">

    <li>text</li>

    <li>text2</li>

</div>

I'm trying to pass a test and there is an error in this line:

_driver.FindElements(By.TagName('li'))

At this point, there are no loaded elements and //_driver.PageSource doesn't contain elements.

How can I wait for the items to load? Please do not suggest Thread.Sleep()

Answer 1

To check whether your SPA(Single Page Application) application which is build with ASP MVC + AngularJS has finished making AJAX calls, you will have to create a class, for that use the code below:

import org.openqa.selenium.JavascriptExecutor;

import org.openqa.selenium.WebDriver;

import org.openqa.selenium.support.ui.ExpectedCondition;

public class AdditionalConditions {

    public static ExpectedCondition<Boolean> angularHasFinishedProcessing() {

        return new ExpectedCondition<Boolean>() {

            @Override

           public Boolean apply(WebDriver driver) {

                return Boolean.valueOf(((JavascriptExecutor) driver).executeScript("return (window.angular !== undefined) && (angular.element(document).injector() !== undefined) && (angular.element(document).injector().get('$http').pendingRequests.length === 0)").toString());

            }

        };

    }

}

You can use it anywhere in your code by using the following code:

WebDriverWait wait = new WebDriverWait(getDriver(), 15, 100);

wait.until(AdditionalConditions.angularHasFinishedProcessing()));

I hope this helps!