javascript - 赛普拉斯测试失败，因为元素不可见，因为其内容被其父元素之一剪裁

Question

在我的 Cypress end 2 end 测试中，我收到以下错误：

此元素<h4>不可见，因为它的内容正被它的一个父元素剪辑，该元素的 CSS 属性为 overflow: hidden，scroll或auto

父元素确实有overflow: hidden. 这个h4标签不是直接子元素，而是一个深层嵌套元素，中间有一些容器。

在我的本地测试通过但在服务器上，在管道中由于上述错误而失败？如何解决这个问题？为什么测试在我的本地通过但在管道中失败？

更新：

我的代码中的断言：

cy.dataCy('cta-text').should('be.visible');

HTML 如下所示：

<div>
  <div>
    <header>
      <h3 data-cy="title">My banner title</h3>
      <p data-cy="lead">This is the banner lead text.</p>     
     </header>
     <footer>
       <div data-cy="cta">
         <h4 data-cy="cta-text">This is the cta text</h4>
       </div>
     </footer>
  </div>
  <figure data-cy="image">
    <img src="path-to-image">
  </figure>
</div>

第一个 div 设置为overflow: hidden.

更新 2： 当我将浏览器窗口缩小时，我可以看到这个元素消失了。我唯一不明白的是为什么在我的本地测试通过？

标签： javascriptcypress