如何让 Cypress 等待不确定数量的 XHR 请求

Question

在我的 React 应用程序中，当用户登录时，他们会被重定向到仪表板。 然后，应用程序向“/files”端点发送请求，该端点返回静态文件的路径，然后应该通过单独的请求（如GET https://api_address/static_file/xxx这些文件的问题是，该数字永远不是相同的。 有时是 10，有时是 16 等。直到这些资源完成获取应用程序显示加载屏幕。 如何让 Cypress 等到所有响应完成？ 我试过cy.wait()但它只等待该类型的第一个请求。 我不能创建多个cy.wait()因为正如我所说，我不知道请求的数量。 我想尝试cy.get()仪表板 div（仪表板仅在获取完成后显示）并将重试超时设置为一个非常大的数字，但这会使我的测试不必要地变慢 - 正如我所说，请求的数量是随机的，甚至可以是 1 个请求。 有没有办法让柏树等到没有特定类型的活动请求？ 或者，也许您知道解决此问题的另一种方法？

Answer 1

最快的方法是等待加载指示器消失。

cy.get('.static-files-loading-indicator', {timeout:30000}).should('not.exist');

此断言将重试最多 30 秒。 请参阅此处的文档：

• https://docs.cypress.io/guides/core-concepts/retry-ability.html#Commands-vs-assertions

🚨 如果 cy.get() 命令后面的断言失败，那么 cy.get() 命令将再次重新查询应用程序的 DOM。 然后赛普拉斯将尝试对从 cy.get() 产生的元素进行断言。 如果断言仍然失败，cy.get() 将再次尝试重新查询 DOM，依此类推，直到达到 cy.get() 命令超时。

如果这太不稳定，您可以拦截来自/files请求的响应，并检查响应以获取将被请求的static_files的数量。 您可以为每个文件设置一个cy.wait() 。