赛普拉斯：由于覆盖，如何测试内容*不可*访问（可点击等）？答案

【问题标题】：Cypress: How to test that content is *not* accessible (clickable etc) because of overlay?赛普拉斯：由于覆盖，如何测试内容*不可*访问（可点击等）？
【发布时间】：2020-08-18 11:34:24
【问题描述】：

我在 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, 255, 0.35);
}

当指示器显示时，内容被一个半透明的div变灰。

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

那么有没有办法在 Cypress 中测试文本实际上是不可访问（可选择、可点击等）？

【问题讨论】：

有一个 Chai-jquery 断言来检查元素是否隐藏。你可以试试cy.get('locator').then(($el) => {expect($el).to.be.hidden}) 或者你可以检查元素是否存在cy.get('locator').should('not.exist')。你可以在这里参考更多这样的断言：docs.cypress.io/guides/references/assertions.html#Chai
据我了解，隐藏是指“显示：无”并且存在于 DOM 中，这两者都不起作用，因为元素既在 DOM 中又是可见的。
是的，这是有道理的。我能想到的另一种方法是使用 .should('have.class', 'indicator-overlay') 之类的东西检查类 .indicator-overlay 的存在

标签： cypress e2e-testing

【解决方案1】：

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

你可以这样做

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

此测试确保如果您尝试单击元素（重复任意数量的元素）应引发错误，因为赛普拉斯无法单击该元素。如果没有抛出错误，您可以假设点击事件有效。

【讨论】：

由于 Cypress 的工作方式非常具有表达性、声明性和异步性，我不知道使用诸如 try...catch 之类的东西。老实说，这看起来不是很优雅，但它可以工作。我希望得到更像.should('not.be.clickable') 或.should('not.be.reachable') 的东西。