如何阻止cy.get&quot；Snapshoting&quot；在其排序之前的列表(&Q；GET&QUOT；SNAPSHOTING&Q；) [英] How to prevent cy.get from "snapshotting" a list before it's sorted

问题描述

不是最好的标题，但这是我的挑战。我在我的页面上有一个可以排序的列表，我想要一个Cypress测试来检查它是否按预期工作。那么想象一下这个测试：

/* 1 */ cy.get('.list-item').eq(0).should('have.text', 'A');
/* 2 */ cy.get('.list-item').eq(-1).should('have.text', 'Z');

// Code that triggers sorting to change from asc to desc

/* 3 */ cy.get('.list-item').eq(0).should('have.text', 'Z');
/* 4 */ cy.get('.list-item').eq(-1).should('have.text', 'A');

看起来很简单，但排序时会稍有延迟，所以UI不会立即更新。

我不确定是cy.get还是eq函数造成的，但问题是第3行"捕获"了列表中的第一个元素，它仍然是'A'，然后然后试图断言文本是'Z'。当列表重新排序时，这个"捕获的"元素实际上并没有改变，它只是在DOM中移动，所以断言仍然试图断言相同的元素'A'(在DOM中实际上是现在的最后一个元素)是'Z'，它显然不是也不应该是。

如果我在3前插入cy.wait(100)，则它会按预期工作，但显然我不希望在测试中有随机等待，因此如何解决此问题？

当Cypress在重新排序之前捕获DOM元素时，如何检查在这种情况下第一个和最后一个元素是什么，而不插入任意等待？😕

---

实际案例

• 支持应用程序，显示最近查看的5个客户端的列表
• 需要测试，例如访问该列表中的3号时，它是否被移到顶部
• "排序触发代码"实际上是路径导航事件：
  1. 有一个侦听程序(响应useEffect挂钩)正在进行路由更改。
  2. 路由更改时，它会更新存储在本地存储中的最近查看的客户端ID列表。
  3. 当本地存储中的列表更改时，显示该列表的组件首先等待750ms(这样用户就不那么困惑，但在Cypress测试中会降至10ms)，然后更新(重新排序)该列表。
  4. 由于列表仅包含ID，因此每个磁贴将异步加载要在列表项上显示的名称和其他内容。

所以..。延迟实际上不仅仅是UI更新。还涉及路由、本地存储和异步请求。🎉

推荐答案

您需要将cy.get(...)和.eq合并到单个选择器中，以确保它在重新启动后重试断言.should('have.text', 'Z')。了解它https://on.cypress.io/retry-ability#Merging-queries-现在它获取列表，然后只重试.eq()命令，为时已晚。您还可以使用单个.should(cb)https://on.cypress.io/should#Function重写代码来获取第一个和最后一个元素-文档中的示例非常适合您的用例。

这篇关于如何阻止cy.get&quot；Snapshoting&quot；在其排序之前的列表(&Q；GET&QUOT；SNAPSHOTING&Q；)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！