CODEWITHSUNDEEP
seleniumselenium-webdriverautomated-teststestnge2e-testing
Emna Ayadi
Emna Ayadi

Reputation: 2460

How can i test an angular js web application with selenium?

I'm new in Test Automation. I want to use Selenium in order to test web application done by angular js. Can someone suggest to me how to start with a basic application and do you have an example of an angular js application.

Upvotes: 1

Views: 1507

Answers (3)

Ardesco
Ardesco

Reputation: 7441

The below two expected conditions will probably do everything you need to make testing an angular site easy.

This one will be the most used expected condition you will have in your code:

public static ExpectedCondition angularHasFinishedProcessing() {
    return new ExpectedCondition<Boolean>() {
        @Override
        public Boolean apply(WebDriver driver) {
            String hasAngularFinishedScript = "var callback = arguments[arguments.length - 1];\n" +
                    "var el = document.querySelector('html');\n" +
                    "if (!window.angular) {\n" +
                    "    callback('false')\n" +
                    "}\n" +
                    "if (angular.getTestability) {\n" +
                    "    angular.getTestability(el).whenStable(function(){callback('true')});\n" +
                    "} else {\n" +
                    "    if (!angular.element(el).injector()) {\n" +
                    "        callback('false')\n" +
                    "    }\n" +
                    "    var browser = angular.element(el).injector().get('$browser');\n" +
                    "    browser.notifyWhenNoOutstandingRequests(function(){callback('true')});\n" +
                    "}";

            JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
            String isProcessingFinished = javascriptExecutor.executeAsyncScript(hasAngularFinishedScript).toString();

            return Boolean.valueOf(isProcessingFinished);
        }
    };
}

It will wait for angular to be in a state where it thinks that the site is ready for automated tests to go ahead (This is pretty much stolen from the protector code base and wrapped in Java). You will need to have a script timeout set for it to work though:

webdriver.manage().timeouts().setScriptTimeout(15, TimeUnit.SECONDS);

Finally if you are using angular animate to move things around on the screen you will want this:

public static ExpectedCondition angularAnimationsAreComplete() {
    return new ExpectedCondition<Boolean>() {
        @Override
        public Boolean apply(WebDriver driver) {
            int animatingElements = driver.findElements(By.className("ng-animate")).size();

            return animatingElements == 0;
        }
    };
}

Angular animate adds the class "ng-animate" to all elements it is moving around. This condition will wait until that class is not longer applied to any elements, or in other words it will wait until all the animations have completed.

Upvotes: 2

ThreeDots
ThreeDots

Reputation: 757

I've recently found GitHub project called jProtractor. It implements its own NgWebDriver based on Selenium WebDriver. Most important feature I noticed is that most of basic methods wait for finishing AngularJS script before calling the original method.

Note that I haven't tried it myself so I can't tell how well it works, but it is currently in developement and may contain bugs and lack features.

Hope it helps.

Upvotes: 1

alecxe
alecxe

Reputation: 473763

For e2e-testing AngularJS applications, there is a specialized package called Protractor, which itself is a convenient wrapper around WebDriverJS - javascript selenium bindings.

A great place to start is the Tutorial.

Upvotes: 1

Related Questions