title: Protractor - button click calls the callback sooner than desired
body: <p>I have a protractor test for login page, that submits creds and checks if index page is loaded. I am passing a callback function to the button click's <code>then</code> function, assuming the callback will be invoked after the promise returned by <code>click</code> function is resolved.</p>
  
  <pre><code>var protractor = require('protractor')
  describe('E2E: main page', function() {
    beforeEach(function() {
      browser.get('http://localhost:8001/login.html/');
    });
    it("login in the portal", function(){
      var d = protractor.promise.defer();
      element(by.model('loginParams.email')).sendKeys('saravana0209@r.com');
      element(by.model('loginParams.password')).sendKeys('password');
      element(by.name('normalLogin')).click().then(function(){
          //it crashes here before selecting the sub menu item
          element(by.xpath('//a[@title="subMenuItem"]')).click()
          console.log("sub-menu item has been chosen in the ribbon")
          setTimeout(function() { d.fulfill('ok')}, 50000)
      })
      expect(d).toBe('ok');
    })
  });
  </code></pre>
  
  <p>But the callback is getting invoked, when the page loading is in progress and it crashes the test, since the element with <code>title</code>, <code>subMenuItem</code> is still not loaded.
  Error is,</p>
  
  <pre><code>Error: Failed: invalid selector: Unable to locate an element with the xpath expression //a[@title="Venues"] because of the following error:
  TypeError: Failed to execute 'createNSResolver' on 'Document': parameter 1 is not of type 'Node'.
  </code></pre>