赛普拉斯 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 时始终通过的断言，例如对添加到 DOM

的元素使用 .get()

ex) 如果你有 <ul class="myloadedlist">.... :

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

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

为什么？

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

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

由于您定位了 last() li 元素，Cypress 会在之前找到页面的最后一个元素 DOM 得到更新，并期望它成为 contain 1999，但它没有，即使在 Cypress 重试 4 秒后也是如此。

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

赛普拉斯 scrollTo 方法的困难

Difficulties with Cypress scrollTo method

cypress

为什么？