"window.angular is undefined." when using protractor for automated testing?

Question

I seem to have an error when using the example conf.js provided with protractor. I am running my tests with grunt-protractor-runner but it errors even when using the example config provided.

My Gruntfile.js looks like this:

/*global module:false*/
module.exports = function(grunt) {
  // Project configuration.
    grunt.initConfig({
      protractor: {
        options: {
          configFile: "smoketest.conf.js", // Default config file
          keepAlive: false, // If false, the grunt process stops when the test fails.
          noColor: false, // If true, protractor will not use colors in its output.
          webdriverManagerUpdate: true,
          args: {
            seleniumServerJar: './node_modules/protractor/selenium/selenium-server-standalone-2.51.0.jar'
          }
        },
        smoke_test: {   // Grunt requires at least one target to run so you can simply put 'all: {}' here too.
          options: {
            configFile: "smoketest.conf.js", // Target-specific config file
            args: {
              }
          }
        },
        protractor_test: {   // Grunt requires at least one target to run so you can simply put 'all: {}' here too.
            options: {
                configFile: "./node_modules/protractor/example/conf.js", // Target-specific config file
                args: {
                }
            }
        },


      },
    })

  grunt.loadNpmTasks('grunt-protractor-runner');
  // Default task.
  grunt.registerTask('default', ['protractor:smoke_test']);

};

I am running grunt protractor:protractor_test which uses this file:

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');

    element(by.model('yourName')).sendKeys('Julie');

    var greeting = element(by.binding('yourName'));

    expect(greeting.getText()).toEqual('Hello Julie!');
  });

  describe('todo list', function() {
    var todoList;

    beforeEach(function() {
      browser.get('http://www.angularjs.org');

      todoList = element.all(by.repeater('todo in todoList.todos'));
    });

    it('should list todos', function() {
      expect(todoList.count()).toEqual(2);
      expect(todoList.get(1).getText()).toEqual('build an angular app');
    });

    it('should add a todo', function() {
      var addTodo = element(by.model('todoList.todoText'));
      var addButton = element(by.css('[value="add"]'));

      addTodo.sendKeys('write a protractor test');
      addButton.click();

      expect(todoList.count()).toEqual(3);
      expect(todoList.get(2).getText()).toEqual('write a protractor test');
    });
  });
});

however, when this runs i am presented with the error

Error while waiting for Protractor to sync with the page: "window.angular is undefined.  This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping.  See http://git.io/v4gXM for details"`enter code here`

I have been to http://git.io/v4gXM but i cannot seem to find anything to fix my issue? Has anybody else had this issue, surely the example test should work always??

Answer 1

Exclaimer!!: This doesn't answer your question as such but provides a hack to solve it.

Protractor requires the Angular page to finish synchronization before it runs it's expectations. Therefore, in order to work around this issue you can use:

browser.ignoreSynchronization = true;
browser.waitForAngular();
browser.sleep(500); 

This tells the browser that protractor opens to not wait for the Angular to synchronize (ignoreSynchronization), then it waits for angular to finish everything else it's doing, then it adds a 500 millisecond wait to give protractor a chance to find addButton.click(). When the wait finishes, it forces protractor to move onto the next line of code which contains your expect, before this, it was stopping at the addButton.click() line and waiting for the sync (which wasn't happening), before it moved on.

(I think...)