赛普拉斯Cypress：如何测试由于覆盖而导致内容不可访问可点击等？

问题描述

我已经在Angular中实现了一个加载指示器，如下所示：

<div cdkTrapFocus class="activity-indicator-container">
  <div class="content-container">
    <ng-content></ng-content>
    <div [ngStyle]="{visibility: showLoader ? 'visible': 'hidden'}" class="indicator-overlay">
      <div class="loading-indicator">
      </div>
    </div>
  </div>
</div>

indicator-overlay的样式如下：

  .indicator-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,0.35);
}

显示指示符时，内容将由半透明的div变灰。

显示叠加层时，运行cy.contains('text in content').should('not.be.visible')失败。

那么在Cypress中有没有一种方法可以测试文本实际上是无法访问（可选择，可点击等）？

解决方法

您可以使用try / catch块。听起来您正在测试覆盖层是否会捕获任何点击事件，而不是正在测试元素不可点击（因为您没有更改元素本身）

您可以这样做

displayLoadingOverlay();
try{
  // this should fail,since the overlay will be blocking it
  element.click();
} catch(error){
  expect(error).to.contain(message);
}

该测试可确保如果您尝试单击该元素（重复任意数量的元素），则由于Cypress无法单击该元素，因此将引发错误。如果未引发任何错误，则可以假定click事件起作用。