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')

这样，一旦该元素可见，赛普拉斯就会继续测试。

为什么？

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

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

由于您以last() li 元素为目标，Cypress 会找到页面的最后一个元素DOM 更新，并期望它@ 987654332@1999，即使在 Cypress 重试 4 秒后也不会。

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