Automation 如何等待元素在Cypress中消失？

首先，我想说，我真的试着在这里和其他任何地方寻找答案，但没有成功

问题是： 我正在尝试为一个web应用程序自动化一个测试，该应用程序正在加载大量数据，因此需要加载一段时间。我必须等待页面加载才能执行下一步，我正试图找出如何等待gif加载完成，以便继续测试。gif是一种基本的旋转工具

我希望避免使用隐式等待时间（cy.wait（）），如果没有人能够解决这个问题，这实际上只是最后的手段

到目前为止，我发现有两个功能：

-这似乎主要用于等待元素出现的情况-我在不同的场景中尝试过这一方法，效果很好，但我一直无法在这里应用

-这似乎是我在寻找的东西，但有一个巨大的问题。这个函数似乎有一个超时，我只能通过全局更改所有函数的超时来更改它。如果我将全局超时设置为更长的时间段（分钟+），那么它的工作方式正是我希望它工作的方式，但显然我并不真的希望所有事情都有这么长的超时时间

在我看来，这个问题有两种可能的解决方案>

更改/关闭waitUntil函数的超时

2） 或者以某种方式使它与waitFor一起工作，因为那里似乎没有隐含的超时，它只是在永远等待某些事情发生。 以下是这种情况的代码片段：

cy.get('#load-data-button').click() // this clicks the button that stars the loading proces     
cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible',) ) // this is the function that waits until the loading gif is invisible

---

我将永远感谢您提供的解决方案，因为不幸的是，我们公司没有人是真正的Cypress专家，因此他们无法提供帮助。

您确实可以使用cy.waitill（）。正如您在该包（）的文档中所看到的，函数的超时时间只是您可以更改的参数的默认值（5000毫秒）。您甚至可以更改cypress检查条件的频率，因此如果您执行以下操作：

cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible'), {
  errorMsg: 'The loading time was too long even for this crazy thing!',
  timeout: 300000,
  interval: 5000
});

cy.get([loading-spinner-identifier]).should("not.be.visible", { timeout: 60000 }); 
cy.get([an element that should now be visible]).should("be.visible");

…它将每5秒尝试300秒（5分钟）（这只是一个超时时间很长的示例）

---

此外，也许你可以考虑等到这个元素在加载旋转器之后可见，而不是检查它是否消失了。如果您想专门测试它，这是可以的，但是如果加载后某个元素出现或变得可交互，那么在微调器不可见后的一小部分时间内，它可能仍然不处于您想要的状态。如果是这种情况，我首先会避免检查微调器是否消失，除非它为您的测试增加了值，我只会等待该元素处于您想要的状态（例如，等待某个输入未被禁用，元素可见，文本出现在某处…。

您可以尝试以下操作吗：

cy.waitUntil(() => cy.get('body > div > my-app > billing > div > div > div.text-center > img').should('not.be.visible'), {
  errorMsg: 'The loading time was too long even for this crazy thing!',
  timeout: 300000,
  interval: 5000
});

cy.get([loading-spinner-identifier]).should("not.be.visible", { timeout: 60000 }); 
cy.get([an element that should now be visible]).should("be.visible");

---

这是一个有点粗糙和准备，但我用它时，等待纺纱机完成。这将等待一分钟，以查看微调器是否不存在，然后检查是否存在我期望的内容。我在这方面取得了不同程度的成功，但它在某些情况下有所帮助。

添加肯定和否定断言，以确保加载微调器是可见的

• assert语句的默认时间为

  4s

• 通过在

  cypress.json

---

您可以执行一些操作，如等待网页上出现加载指示器。在您的情况下，cypress默认超时将不起作用，因此您必须提供自定义超时

cy.get（'body>div>my app>billing>div>div>div>div.text-center>img'，{timeout:10000}）。应该（'not.be.visible'）

这看起来与我想做的正好相反-加载指示器立即出现，因此获取选择器不是问题；我想等它消失。“获取”功能不需要更长的超时时间。我也有类似的问题，但waitUntill没有等待300秒。下面是我的代码行：cy.waitUntil（function（）{cy.get（cylement）.should（'not.be.visible'，{errorMsg:'加载时间太长了，即使对于这个疯狂的东西！”，超时：300000，间隔：5000}）；