'Element is not clickable at point (x, y) Other element would receive the click' after updating chrome browser and chrome driver to latest version

Bug report

• Node Version: 6.11.2
• Protractor Version: 5.1.2
• Browser(s): Chrome 62.0.3202.94 (Official Build) (64-bit)
• Chrome driver version: 2.33.506120
• Operating System and Version: Windows NT 6.3.9600 x86_64
• A relevant example test

var nextButton = element(by.buttonText('Next'));
browser.wait(EC.elementToBeClickable(nextButton), config.minWaitTime)
.then(function() {
	nextButton.click();
})
.catch(function(waitError){
	console.log('Error occured : ', waitError);
});

Here nextButton element is present at the bottom of the screen and it is invisible (i.e. it is not within Viewport) but enabled, clickable and not having any overlay

• Output from running the test

Failed: unknown error: Element <button type="button" class="primary active">...</button> is not clickable at point (989, 603). Other element would receive the click: <div class="navItems">...</div>
(Session info: chrome=62.0.3202.94)
(Driver info: chromedriver=2.33.506120 (e3e53437346286c0bc2d2dc9aa4915ba81d9023f),platform=Windows NT 6.3.9600 x86_64)

• Observation In previous versions of chrome browser v61.0 and chrome driver v2.32 above script was working fine by auto scrolling to the desired element and then click it. Now it is breaking in the latest environment as mentioned at the top.

• Temporary workaround Using scrollIntoView of the element and then click like -

browser.executeScript("arguments[0].scrollIntoView();", nextButton.getWebElement());
nextButton.click(); 

This solution works but I will need to make changes in each spec file and for each element. If there lots of element on the page the this solution is not feasible.

• My Guess As per release notes after fixing issue 2017 the previous issue 1852 might be broken.

[FreshQa]

Instead of a direct click, use the actions class:

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

[hermanfransen]

@FreshQa @ameetdhage

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

This didn’t work for me either, in two steps it did:

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

In other situations is used:

browser.executeScript(`
  const button = document.querySelector('button');
  button.click();
`);