Check angular ui route state using protractor

Question

I'm using protractor framework to test my angular application.

Can I check for the angular state in the e2e test?

Answer 1

Sure, the idea is to use browser.executeAsyncScript() to:

• locate the element having the ng-app defined
• initialize the angular.element and get the injector instance
• get the $state service
• use $state.current.name to get the current state's name

Sample working test using the UI router demo page:

describe("Current Angular UI router state", function () {
    beforeEach(function () {
        browser.get("https://angular-ui.github.io/ui-router/sample/#/");
    });

    it("should get the current state", function (){
        var currentStateName = browser.executeAsyncScript(function(callback) {
            var el = document.querySelector("html");  // ng-app is defined on html element in this case
            var injector = angular.element(el).injector();
            var service = injector.get('$state');

            callback(service.current.name);
        });

        expect(currentStateName).toEqual("home");
    });
});

Heavily inspired by this answer.