angularjs - Protractor + chrome driver: Element is not clickable at point

Question

Hi I am having some trouble getting a basic protractor test to work.

My setup:

• I use requirejs so I init angular using angular.bootstrap(), not the ng-app attr. According to protractor docs this is not supported out of the box, but seems to work fine for tests that don' involve clicking.

• Protractor conf.json:

  "use strict";
  exports.config = {
      specs: '../E2ETests/**/*.js',
      chromeOnly: true,
      getPageTimeout: 30000,
      allScriptsTimeout: 30000
  }
  

• I use some third party jquery plugs which I wrap in directives, I suspect these might be part of the issue.

The test:

"use strict";
describe('When clicking should add stuff', function () {
    var ptor;
    beforeEach(function () {
        browser.get('https://localhost/myApp');
        ptor = protractor.getInstance();
    });
    it('add stuff', function () {
        // If I comment this, the test pass. 
        element(by.id('add-stuff-button')).click();
        // This does not matter fails on the line above..
        expect(browser.getTitle()).toBeDefined();
    });
});

The error:

UnknownError: unknown error: Element is not clickable at point (720, 881). Other element would         receive the click: <div class="col-md-5 col-md-offset-5">...</div>
(Session info: chrome=37.0.2062.124)
(Driver info: chromedriver=2.10.267521,platform=Windows NT 6.1 SP1 x86_64)

Thoughts

The chromedriver do find the button, because if I change the id it complains that no element is found. So I think the problem is that the button moves from its initial position. As the element(***) function should wait for angular to be done, I suspect that its the third party plugins that might interfere as they might not use angular api's fetching data etc. So angular think its done but then the third party plug populates and moves stuff around.

Any ideas what to do? If the third party plugs is the problem, can I somehow tell angular that third party stuff is going on and then later tell it when its done?

Thx Br Twd

Answer 1

You should set window size in your config file

onPrepare: function() {
  browser.manage().window().setSize(1600, 1000);
}