如何等待 Cypress 中的元素消失？答案

【问题标题】：How do I wait for an element to disappear in Cypress?如何等待 Cypress 中的元素消失？
【发布时间】：2020-12-09 17:38:57
【问题描述】：

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

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

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

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

cy.waitFor - 这似乎主要用于您正在等待元素出现的情况 - 我已经在不同的场景中尝试过这个并且可以完美地工作，但我无法在这里应用它。
cy.waitUntil - 这似乎是我正在寻找的东西，但有一个大问题。这个函数似乎有一个超时，除了通过全局更改所有函数的超时外，我无法以任何其他方式更改它。如果我将全局超时设置为更长的时间（分钟 +），那么它会完全按照我希望的方式工作，但显然我真的不想对所有事情都有这么长的超时时间。

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

更改/关闭 waitUntil 函数的超时时间。

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

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

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

【问题讨论】：

你可以做一些事情，比如等到网页上出现加载指示器。在您的情况下，赛普拉斯默认超时将不起作用，因此您必须提供自定义超时。 cy.get('body > div > my-app > billing > div > div > div.text-center > img', {timeout: 10000}).should('not.be.visible')
这看起来与我想做的相反 - 加载指示器立即出现，因此获取选择器不是问题；我想等它消失。 “get”函数不需要更长的超时时间

标签： automation automated-tests cypress qa

【解决方案1】：

您确实可以使用 cy.waitUntil()。正如您在该包的文档 (https://www.npmjs.com/package/cypress-wait-until#arguments) 中看到的那样，该函数的超时时间只是您可以更改的参数的默认值 (5000 ms)。您甚至可以更改 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
});

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

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

【讨论】：

我有类似的问题，但 waitUntill 没有等待 300 秒。下面是我的代码行： cy.waitUntil(function() { cy.get(cyElement).should('not.be.visible',{ errorMsg: '即使是这个疯狂的东西，加载时间也太长了！',超时：300000，间隔：5000 }) }).then(()=>{ cy.get(cyElement2).should('be.visible') });

【解决方案2】：

你能不能试试：

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

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

【讨论】：

【解决方案3】：

添加正负断言以确保加载微调器是visible。

断言语句的默认时间是4s。
您可以通过在cypress.json中添加配置来增加defaultTime以等待断言验证

{
...
"defaultCommandTimeout": 4000,
...
}

const waitForSpinner = () => {
   // First, make sure the loading indicator shows up (positive assertion)
   cy.get('[data-qa="qa-waiting-spinner"]').should('be.visible')
 
   // Then Assert it goes away (negative assertion)
   cy.get('[data-qa="qa-waiting-spinner"]').should('not.be.visible')
 }

【讨论】：