Angular 使用 Protractor 进行端到端测试：点击被 id 选择的元素的父元素拦截

Question

有时我会遇到这个错误，但不是每次 运行 测试。是什么导致了这种奇怪的行为？

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

尝试添加显式等待？

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

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

Answer 2

最后我写了一个自定义函数，等待元素出现并可点击，然后再点击它。

util.ts

export const click = async (el: ElementFinder, time: number = 4000) => {
    await browser.wait(EC.presenceOf(el), time);
    await browser.wait(EC.elementToBeClickable(el), time);
    return el.click();
};

file.e2e-spec.ts

import * as pt_util from '../../util';
...

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