元素点击在下面的“ it”块中被拦截

Question

所以我遇到这个问题，这确实使我发疯。在Angular应用程序中，单击保存按钮后，出现一条祝酒消息。显示烤面包时，它与用户菜单和注销按钮重叠。最终，烤面包被移除了（也从DOM中移除了），我可以注销了。然后问题出在第一个“ it”块中，它工作良好，等待烤面包消失，然后单击菜单并注销。但是，当第二个“ it”块运行时，基本上使用相同的代码，它将制动并给出错误Failed: element click intercepted: Element class="nav-link user-name" data-toggle="dropdown">...</a> is not clickable at point (1714, 31). Other element would receive the click: <div aria-live="polite" role="alertdialog" class="toast-message...。有时，它甚至在第一个“ it”块中制动。

这是我使用的功能：

async waitForToastToDisappear() {
let toast = element(by.xpath('//*[@id="toast-container"]/div'));
await browser.wait(ExpectedConditions.invisibilityOf(toast), 10000, 'Toast message did not completely disappear');

我也用stalenessOf尝试过，但效果相同。

这是实际测试

beforeEach(async function() {
await login.loginToApp('sysadmin', 'sysadmin');

afterEach(async function() {
await login.loginOut();

it('should change the date, navigate to screen and add record', async function () {
await calendar.setDefaultTestDate();

await browser.get(screenUrl);
await browser.wait(ExpectedConditions.visibilityOf(firstTab), 10000, 'Tab not fully loaded');

await elem.first().sendKeys('12');
await element(by.css('div.btn.btn-primary.btn-sm')).click();
await page.clickElement(element(by.cssContainingText('.navbar-brand li a', 'Home')));
await page.waitForElement(element(by.css('.main-view')));
await page.waitForToastToDisappear();

[值得一提的是，我还使用browser.waitForAngularEnabled(false);中的loginToApp进行登录，因为登录页面不是Angular，并且我已经读到它可能会导致测试有些松懈，但我不是确定...

Answer 1

我所见的几种方法：

1. 仅将常规logoutButton.click()替换为

browser.executeScript(
  "arguments[0].click();",
  $logoutButton.getWebElement()
)

它将执行的操作是，无论页面布局如何，都将单击该元素

2. 忍受它:)并编写一个函数将其从DOM中删除，如果这不是您测试的一部分。像这样的东西：

let removeMessage = async function () {
  if (await message.isPresent()) {
    await browser.executeScript('return arguments[0].remove()', message.getWebElement());
  }
}

然后将其添加到您的afterAll()

如果出于任何原因这些都不适合您，lmk，我们将尝试调试测试中出了什么问题