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.bootstr

Answer 1

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 2

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 3

Or simply use the Actions class:

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

Answer 4

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.

Answer 5

Note that this was sometime caused by a top navigation bar or bottom navigation bar / cookie warning bar covering the element. With angular 2, when clicking it scrolls until the element is only just on page. That means that when scrolling down to click something, if there is a bottom navigation, then this will obstruct the click. Similarly, when scrolling up it can be covered by the top navigation.

For now, to get around the scrolling up, I am using the following:

browser.refresh();
browser.driver.sleep(3000);

I made sure that I removed the bottom bar by clicking to close it before the test started.

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.