Question

我在使用赛普拉斯测试虚拟滚动组件时遇到了一些问题。我有一个测试，在滚动到容器的底部后检查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来解决这个问题，但是不能完全理解这种行为，并想知道这是不是一个bug。

有什么想法吗？

Answer 1

创建一个在呈现DOM时始终会通过的断言，例如将.get()用于添加到DOM的元素

ex）如果您有<ul class="myloadedlist">....：

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

这样，一旦该元素变得可见，赛普拉斯将继续进行测试。

为什么？

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

基本上，您测试过的是竞争条件用户将非常快速地滚动到页面底部，以查看{{1}尚未完成渲染 - 一个有效的senario。

由于您定位了DOM last()元素，赛普拉斯会在li更新之前找到 页面的最后一个元素并且，即使在赛普拉斯重试4秒后，预计也不会DOM contain。

这实际上是赛普拉斯的一个很棒的功能，因为您可以测试用户可能只看到分秒的1999状态。

Cypress scrollTo方法遇到的困难

1 个答案:

为什么？