javascript 如何等待元素在柏树中消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53672387/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wait for element to disappear in cypress
提问by jaikl
I have a loading indicator that i need to wait for to disappear before doing my assertions.
我有一个加载指示器，我需要在断言之前等待它消失。
I′ve seen some use the following, but it does not seem work for me and also i don′t want it to be an assertion. cy.get('element, {timeout: 10000}).should('not.exist);
我已经看到一些使用以下内容，但它似乎对我不起作用，而且我也不希望它成为断言。 cy.get('element, {timeout: 10000}).should('not.exist);
Anyone having any tips?
有人有任何提示吗？
回答by Diogo Rocha
If you specifically need to wait, you could use the wait()function of cypress before making an assertion, and provide the amount of time to wait before timeout.
如果您特别需要等待，您可以wait()在进行断言之前使用cypress的功能，并提供超时前等待的时间量。
But note, this is an anti-pattern as you can find in the docs:
但请注意，这是一种反模式，您可以在文档中找到：
You almost never need to wait for an arbitrary period of time. There are always better ways to express this in Cypress.
您几乎不需要等待任意的时间段。在 Cypress 中总是有更好的方法来表达这一点。
That said, if your loading indicator is bound to some network request, you can wait for them to finish before making an assertion. This could be achieved with something like thisexample:
也就是说，如果您的加载指示器绑定到某个网络请求，您可以在进行断言之前等待它们完成。这可以通过以下示例来实现：
// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
// we can now access the low level xhr
// that contains the request body,
// response body, status, etc
})
More info about waiting for requests could be found here.
可以在此处找到有关等待请求的更多信息。
Also, make sure that you really want to use .should('not.exist')and not .should('not.be.visible').
另外，请确保您确实要使用.should('not.exist')而不是.should('not.be.visible').
回答by Philzen
Loading spinner implementations often just hide the element rather than removing it from the DOM. Hence, should("not.exist")won't work for them.
加载微调器实现通常只是隐藏元素而不是从 DOM 中删除它。因此，should("not.exist")不会为他们工作。
cy.get("element").should("not.be.visible")is the right approach in such cases (as Diogo's answeralready hinted).
cy.get("element").should("not.be.visible")在这种情况下是正确的方法（正如Diogo 的回答已经暗示的那样）。
回答by Josh Pittman
.findByTestId('loading-spinner-data-testid').should('not.be.visible')
.findByTestId('loading-spinner-data-testid').should('not.be.visible')
This works in a similar context for me.
这对我来说在类似的情况下有效。
As of "@testing-library/cypress": "^5.3.1",
作为 "@testing-library/cypress": "^5.3.1",
Just make sure you give your spinner component a data-testid attribute.
只要确保你给你的微调组件一个 data-testid 属性。
<LoadingSpinner data-testid='loading-spinner-data-testid'>
<LoadingSpinner data-testid='loading-spinner-data-testid'>
回答by voy
IMHO the cleanest way is not to use waits nor timeouts with get, this is kinda an antipattern.
恕我直言，最干净的方法是不要在 get 中使用等待或超时，这是一种反模式。
I would recommend to use Cypress waitUntilcommand and use something like:
我建议使用Cypress waitUntil命令并使用类似的东西：
cy.waitUntil(function() {
return cy.get('element').should('not.exist');
or depending on the app code you can use not.visible.
或根据您可以使用的应用程序代码not.visible。
