Angular e2e test with Protractor: click intercepted by parent of element selected by id

Question

Sometimes I get this error but not every time I run the test. What is causing this strange behavior?

Failed: element click intercepted: Element <div id="myButton">...</div> is not clickable at point (616, 104). Other element would receive the click: <div class="wrapper">...</div> (Session info: headless chrome=77.0.3865.120) (Driver info: chromedriver=77.0.3865.120 (416d6d8013e9adb6dd33b0c12e7614ff403d1a94-refs/branch-heads/3865@{#884}),platform=Linux 4.15.0-70-generic x86_64)

file.html

<div class="wrapper">
  <div id="myButton">Add</div>
</div>

file.e2e-spec.ts

it('Example test', async () => {
  await element(by.id('myButton')).click();
  ...
});

Answer 1

try adding an explicit wait?

const EC = protractor.ExpectedConditions;
const button = element(by.id('myButton'));

await browser.wait(EC.elementToBeClickable(button), 5000);
await button.click();