Ionic framework WebdriverIO can'；t单击（离子）选项卡

我正在使用WebDrivero在Ionic（+Angular）应用程序上测试一些基本功能。框架设置工作正常，但我找不到方法在某些HTML元素上单击

。例如，这是一些HTML示例：

<div class="tabbar show-tabbar" role="tablist" style="top: 166px; display: flex;">
  <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-0" aria-controls="tabpanel-t0-0"
      aria-selected="true">
    <span class="tab-button-text">Blah</span>
    <div class="button-effect"></div>
  </a>
  <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-1" aria-controls="tabpanel-t0-1"
      aria-selected="false">
    <span class="tab-button-text">Foo</span>
    <div class="button-effect"
        style="transform: translate3d(83px, -103px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
  </a>
  <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2"
      aria-selected="false">
    <span class="tab-button-text">Bar</span>
    <div class="button-effect"
        style="transform: translate3d(3px, -99px, 0px) scale(1); height: 240px; width: 240px; opacity: 0; transition: transform 395ms ease 0s, opacity 277ms ease 118ms;"></div>
  </a>
  <div class="tab-highlight animate" style="transform: translate3d(570px, 0px, 0px) scaleX(285);"></div>
</div>

…但每次我运行它时，我都会收到一些奇怪的错误消息，该元素在某个点上不可单击。有什么线索吗

[0-0] element click intercepted in "Some Test Again"
element click intercepted: Element <a class="tab-button has-title has-title-only" href="#" role="tab" id="tab-t0-2" aria-controls="tabpanel-t0-2" aria-selected="false">...</a> is not clickable at point (666, 170). Other element would receive the click: <ion-backdrop disable-activated="" role="presentation" tappable="" class="backdrop-no-tappable" style="opacity: 0.5;"></ion-backdrop>
  (Session info: headless chrome=75.0.3770.100)

[0-0]元素在“再次测试”中被拦截
元素点击被拦截：元素在点（666170）处不可点击。其他元素将收到单击：
（会话信息：无头镀铬=75.0.3770.100）
这是经典的角度/离子背景之一

让我们从错误消息开始：元素
#tab-t0-2
在点（坐标）处不可单击，另一个元素将收到单击：
离子背景

这告诉我们，无法单击目标元素，因为
ion background
标记呈现在其上方。该组件是一个短动画（通常用于模态），在本例中，是背景的半暗显（
不透明度：0.5
）

✖ 解决方案1:对付它的简单方法？显式地期望它消失，然后单击目标元素

it("Some Test Again", () => {
  browser.url(logingUrl);
  browser.url(appUrl);

  // Explicitly wait for the backdrop animation to disappear:
  const backdrop = $('.backdrop-no-tappable');
  backdrop.waitForExist(5000, true, 'Backdrop still present');

  const tab = $("#tab-t0-2");
  tab.click();
  expect(tab.getAttribute("aria-selected")).to.equal("true");
});

✖ 解决方案2:您可以尝试的另一件事是只有在
选项卡
元素在DOM中完全可见且难以处理后，才单击它（这是一种最佳实践）：

谢谢，@iamdanchiv！这对我很有帮助。我最终使用了一个“合并”版本：
$（“ion background.background不可点击”）.waitForExist（未定义，true）
；）
it("Some Test Again", () => {
  browser.url(logingUrl);
  browser.url(appUrl);

  // Explicitly wait for the backdrop animation to disappear:
  const backdrop = $('.backdrop-no-tappable');
  backdrop.waitForExist(5000, true, 'Backdrop still present');

  const tab = $("#tab-t0-2");
  tab.click();
  expect(tab.getAttribute("aria-selected")).to.equal("true");
});

  const tab = $("#tab-t0-2");
  tab.waitForDisplayed(5000);
  // For 'wdio-v4' users: 
  // tab.waitForVisible(5000);
  tab.click();
  expect(tab.getAttribute("aria-selected")).to.equal("true");