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>

当指示器显示时，内容将由半透明div灰显

显示覆盖时，运行

cy.contains（'content中的文本'）。应该（'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事件起作用。

有一个jquery断言，用于检查元素是否隐藏。您可以尝试一下

cy.get（'locator'）。然后（$el）=>{expect（$el）.to.be.hidden}）

或者您可以检查元素是否存在

cy.get（'locator'）。应该（'not.exist'）

。您可以在这里引用更多这样的断言：据我所知，hidden指的是“display:none”，并且存在于DOM中，这两者都不起作用，因为元素都在DOM中并且是可见的。是的，这是有道理的。我能想到的另一种方法是用类似.should（'have.class'，'indicator overlay'）的东西检查class.indicator的存在，因为Cypress的工作方式非常有表现力、声明性和异步性，所以我没有意识到使用try…catch之类的东西。老实说，这看起来不是很优雅，但它可以工作。我希望得到更像

.should（'not.be.clickable'）

或

.should（'not.be.reachable'）

。

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