Protractor + chrome driver: Element is not clickab

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

I fix this problem by using browser time sleep.

browser.driver.sleep(3000)

before giving click button

Answer 2

From Gal Malgarit's answer,

You should set window size in your config file

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

If it still doesn't work you should scroll to the element's location

browser.executeScript('window.scrollTo(720, 881);');
element(by.id('add-stuff-button')).click();

Answer 3

Maybe It is not applicable in your case, but I've encountered the same problem and based on Milena's answer I've been looking for another element obscuring my button (in my case, a dropdown menu in the top right of my screen).

It appears to be the Connected to Browser Sync notification message sent by browsersync, launched by Gulp. The message vanished after a short time, but after my onClick() call.

To remove the notification, in my gulpfile, I've added the notify: false param when initializing browsersync:

browserSync.init(files, {
    server: {
        baseDir: "dist",
        index: "index.html"
    },
    notify: false
});

Answer 4

Had the same issue but was not related to the window size but had to wait for ngAnimation to end.

So I had to wait until the element was clickable with.

    const msg = 'Waiting for animation timeout after 1s';
    const EC  = new protractor.ProtractorExpectedConditions();
    await browser.wait(EC.elementToBeClickable(model.elements.button.checkCompliance), 1000, `${msg} panel`);
    await model.elements.button.checkCompliance.click();

@note - I am using async/await node 8 feature, you could just as well convert this to regular Promises. Also using ProtractorExpectedConditions instead of ExpectedConditions see documentation

Answer 5

This works better than specifying the window size, in case you test need to run on multiple displays.

browser.manage().window().maximize();

Answer 6

You could also try turning off any debug tools you might be using. I was using Laravel and debugbar and had to set APP_DEBUG to false.