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

Question

我想在序言中说，我确实尝试在这里和其他任何地方寻找答案，但没有成功。

问题是：我正在尝试对正在加载大量数据的 Web 应用程序进行自动化测试，因此必须加载一段时间。我必须等待页面加载才能执行下一步，并且我正在尝试弄清楚如何等待加载 gif 完成，以便我的测试可以继续。gif 是一个基本的旋转东西。

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

到目前为止我发现的是这两个函数：

1. cy.waitFor - 这似乎主要用于等待元素出现的情况 - 我已经在不同的场景中尝试过这个并且工作得很好，但我无法在这里应用它。

2. cy.waitUntil - 这似乎是我正在寻找的东西，但有一个大问题。该函数似乎有超时，除了全局更改所有函数的超时之外，我无法以任何其他方式更改它。如果我将全局超时设置为更长的时间（分钟+），那么它完全按照我希望的方式工作，但显然我真的不想为所有事情设置这么长的超时。

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

1. 更改/关闭 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

我将永远感激一个解决方案，因为不幸的是，我公司里没有人是真正的赛普拉斯专家，所以他们无法提供帮助。

Answer 1

你可以尝试这样的事情：

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

它有点粗糙，但我在等待旋转器完成时使用过它。等待一分钟看看旋转器不在那里，然后检查是否有我期待的东西在那里。我在这方面取得了不同程度的成功，但它在某些情况下有所帮助。