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

This happens if the chrome window is too small, try to add inside the beforeEach

browser.driver.manage().window().setSize(1280, 1024);

Answer 2

You should set window size in your config file

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

Answer 3

Following worked fine for me:

browser.actions().mouseMove(element).click();

Edit: If above does not work try chaining perform() method too(I got this as an edit suggestion, I have not tested it but somebody could verify it and comment)

browser.actions().mouseMove(element).click().perform();

Answer 4

Or simply use the Actions class:

browser.actions().mouseMove(elem).click().perform();

Answer 5

Other way, you can try this:

this.setScrollPage = function (element) {

    function execScroll() {
        return browser.executeScript('arguments[0].scrollIntoView()',
            element.getWebElement())
    }

    browser.wait(execScroll, 5000);
    element.click();
};

Answer 6

You can define the desired screen resolution through your protractor configuration file (e.g. protractor.conf.js or config.js) for consistent test behavior.

For example with Chrome browser:

exports.config = {
  specs: [
    // ...
  ],
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      args: [
        '--window-size=1600,900',
        '--headless'
      ]
    }
  }
  // ...
}

Explanations

• window-size argument will launch Chrome with a 1600 by 900 window.
• headless will launch headless Chrome, allowing you to have your tests run with the specified window size (1600 by 900) even if your screen resolution is lower than that.

You may want to have two configurations, one for developers (without headless mode) who always have a high resolution screen and one for build servers (headless mode) where screen resolution is sometimes a mystery and could be lower than what your application / test is designed for. Protractor configuration file are javascript and can be extended to avoid code duplication.