Protractor e2e | Element not clickable at point error | Angular Hybrid app

Question

I have migrated our Angular JS app to Hybrid app. I am using Angular6/AngularJS (1.6) hybrid app. I am trying to run protractor e2e of the existing e2e tests for angular js pages. All test case are failing with the below reason.

button is not clickable at point (386, 20)

I am using Angular-Cli project. If I am trying to run this test individually they are passing. They fail when I am running in multiple tests together in a suite.

My protractor version : protractor": "^5.3.2
"webdriver-manager": "12.0.6",
"selenium-webdriver": "4.0.0-alpha.1",

I also tried with different version of protractor and selenium, but still got the same problem. I also tried applying the fixes below. That is also not working.
1)
var elem = element(by.id('yourId'));
browser.actions().mouseMove(elem).click();
2)
browser.waitForAngularEnabled(false);

Failed: unknown error: Element ... is not clickable at point (386, 20). Other element would receive the click: ...
(Session info: chrome=67.0.3396.99)
(Driver info: chromedriver=2.40.565498 (ea082db3280dd6843ebfb08a625e3eb905c4f5ab),platform=Windows NT 10.0.15063 x86_64)
at Object.checkLegacyResponse (\node_modules\selenium-webdriver\lib\error.js:546:15)
at parseHttpResponse (\node_modules\selenium-webdriver\lib\http.js:509:13)
at doSend.then.response (\node_modules\selenium-webdriver\lib\http.js:441:30)

Node Version: `8.11.3
Protractor Version: 5.3.2
Angular Version: 6.0.4
AngularJS Version: 1.6.4
Browser(s): Chrome, firefix
Operating System and Version Windows 10
Your protractor configuration file
A relevant example test
Output from running the test
Steps to reproduce the bug
The URL you are running your tests against (if relevant)
Thanks,
Abhishek

Silvan Bregy Silvan Bregy · Accepted Answer · 2018-07-13T11:30:10

So one thing you could do was to do clicking by javascript. This could be achieved using following function:

async function sendClick(element: ElementFinder): Promise<boolean> {
  try { 
    await browser.executeScript('arguments[0].click();', await element.getWebElement());
    return true;
  }
  catch (err) {
    return false;
  }
}

Note

When clicking via javascript the click event is sent directly to the element and is not really simulated as a user would click it. So if the element is present on the page but not visible for example, it would still receive the click!

When using element.click() the element is scrolled into view and only clicked if it's clickable by mouse. So when using my provided technique, error's like these won't be found.

For having a reliable click function for clicking you'll have to add proper checks on your own. That could look as follows:

async function sendClick(element: ElementFinder): Promise<boolean> {
      try { 
        if(!await element.isDisplayed()) {
          return false;
        }
        await browser.executeScript('arguments[0].click();', await element.getWebElement());
        return true;
      }
      catch (err) {
        return false;
      }
    }

Cheers!

Protractor e2e | Element not clickable at point error | Angular Hybrid app

1 Answers

Note