我如何等待元素在赛普拉斯中消失？

问题描述

我想在此开头说我真的想在这里和其他任何地方寻找答案，但是没有成功。

这是问题所在： 我正在尝试为正在加载大量数据的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

我将永远感激一个解决方案，因为很遗憾，我公司中没有人真正是赛普拉斯专家，所以他们无能为力。

解决方法

您确实可以使用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分钟）（只是一个超时时间很长的示例）。

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

,

您可以尝试以下方法吗：

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

这有点粗糙并且可以使用，但是我在等待微调器完成时就使用了它。这需要等待一分钟，以查看微调器不在那里，然后检查是否看到了我期望的东西。我在这方面取得了不同的成功，但在某些情况下有所帮助。

,

添加肯定和否定断言以确保加载微调器为 visible。

• assert 语句的默认时间为 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')
 }