时间戳

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

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

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

显示覆盖时运行cy.contains('text in content').should('not.be.visible')失败。

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

标签： cypresse2e-testing

解决方案

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

你可以做这样的事情

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

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

推荐阅读