元素点击在以下“it”块中被拦截[重复]

Question

所以我有这个问题，真的让我发疯。在 Angular 应用程序中，单击保存按钮后，会出现一条 toast 消息。在显示 toast 时，它与带有注销按钮的用户菜单重叠。最终 toast 被删除（也从 DOM 中），我可以注销。然后问题出在第一个“it”块中，它运行良好，它等待 toast 消失，然后单击菜单并注销。但是当第二个'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();

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

Answer 1

我看到的几种方法：

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

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

不管页面布局如何，它都会点击元素

1. 对它进行残酷处理 :) 并编写一个函数从 DOM 中删除该元素，如果它不是您的测试的一部分。像这样：

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

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

如果由于某种原因这些对您不起作用，lmk 我们将尝试调试您的测试中出现的问题