Angular e2e тест с транспортиром: щелчок перехвачен родителем элемента, выбранного идентификатором

Question

Иногда я получаю эту ошибку, но не каждый раз, когда запускаю тест. Что вызывает это странное поведение?

Ошибка: элемент перехвачен: элемент <div id="myButton">...</div> не активен в точке (616, 104). Другой элемент получит щелчок: <div class="wrapper">...</div> (Информация о сеансе: хром без головы = 77.0.3865.120) (Информация о драйвере: chromedriver = 77.0.3865.120 (416d6d8013e9adb6dd33b0c12e7614ff403d1a94-refs / branch-головки / 3865 @ {# 884}), платформа = Linux 4.15.0-70-generi c x86_64)

file. html

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

file.e2e- spe c .ts

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

Answer 1

Наконец, я написал функцию custum, которая ждет, пока элемент не появится и кликабелен, прежде чем выполнить щелчок по нему.

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-spe c .ts

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

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

Answer 2

попробуйте добавить явное ожидание?

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

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