Cypress scrollTo 方法的难点

Question

我在使用 Cypress 测试虚拟滚动组件时遇到了一些问题。我有一个测试，在滚动到容器底部后检查 DOM 中存在的 li 元素。

当这样写时，测试通过：

cy.get('.virtual-scroll').scrollTo('bottom')
cy.wait(0)                                             
cy.get('li').last().children('h4').contains('1999')

当这样写时，它不会：

cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('li').last().children('h4').contains('1999')

这也失败了：

cy.get('.virtual-scroll').scrollTo('bottom').get('li').last().children('h4').contains('1999')

在第二个和第三个示例中， get('li') 返回滚动完成之前存在的 li 元素，因此测试失败。我可以通过添加 .wait 来解决这个问题，但并不完全理解这种行为并怀疑这是否是一个错误。

有任何想法吗？

Answer 1

做出一个在DOM渲染时始终通过的断言，例如.get()用于添加到DOM

例如）如果你有<ul class="myloadedlist">....：

cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('ul.myloadedlist')
cy.get('li').last().children('h4').contains('1999')

这样，一旦该元素变得可见，Cypress 就会继续进行测试。

为什么？

我假设元素被添加到DOM某种 scroll 中eventListener。在这种情况下，这是正确的行为。

本质上，您测试的是用户快速滚动到页面底部的竞争条件，以查看尚未完成渲染 - 一个有效的场景。DOM

既然你有针对性的last() li元素，赛普拉斯找到页面的最后一个元素之前的DOM得到更新，并预计到contain 1999，它没有，即使在赛普拉斯重试，持续4秒。

这实际上是 Cypress 的一个很棒的功能，因为您可以测试DOM用户可能只看到一瞬间的时间的状态。