单击 Cypress，是否有任何方法可以等待 DOM 加载？（不使用等待（））

Question

我在 React 项目中遇到一个小问题，当我想使用来自 Cypress 的 .click() 时，有时我会遇到错误 failed 因为此元素与 dom 分离。 简单的解决方案是在每次测试前添加 wait() 让网站完全呈现，但这对我来说不是最好的解决方案。有什么办法可以不使用 wait()?

Answer 1

在单击按钮之前写一个 should('be.visible') 断言怎么样？类似于：

cy.get('button').should('be.visible').click()

Answer 2

Cypress 文档是您的朋友 =)

我发现这个blog on docs. It details using cypress-pipe在断言之前有一个回调函数

// create a click function as pipe does not take any cypress commands
const click = $el => $el.click()

cy.get('.your-element')
  .should('be.visible')
  .pipe(click)
  .should($el => {
    // whatever assertion you need after your click event is attached
  })

// calendar should close on the user click
cy.get('.owl-dt-popup').should('not.be.visible')

Answer 3

这与他们承诺很快修复的已知柏树问题有关：https://github.com/cypress-io/cypress/issues/7306

在问题解决之前，您可以添加 .wait()，如果它适用于您的方案，或者尝试 .click({force: true})。不过两者都有缺点。

单击 Cypress，是否有任何方法可以等待 DOM 加载？（不使用等待（））

Cypress on click, is there any method to wait until DOM is loaded? (without using wait())

testing

typescript

reactjs

cypress

单击 Cypress，是否有任何方法可以等待 DOM 加载？ （不使用等待（））

Cypress on click, is there any method to wait until DOM is loaded? (without using wait())

testing

typescript

reactjs

cypress

单击 Cypress，是否有任何方法可以等待 DOM 加载？（不使用等待（））