赛普拉斯验证元素不闪烁（消失然后快速重新出现）

Question

想象一下，我有以下简单的 html：

 const inEl = document.querySelector("input") const buttonEl = document.querySelector("button") inEl.oninput = (() => { buttonEl.remove() setTimeout(() => { document.body.appendChild(buttonEl) }, 100) })

 .b { background: blue; }

 <input> <button>weee</button>

如您所见，当有人输入输入时，该按钮会暂时从 DOM 中删除。 我想添加一个 cypress 测试，检查按钮是否未从 dom 中删除（因此在上述情况下它需要失败）。

看起来很简单，但是因为 cypress 非常擅长等待事情出现，所以我不完全确定如何编写这个测试。

感觉我需要的是一种在 cypress 命令通过时抛出错误的方法。 就像是

cy.get("input").type("hello")
cy.get("button").should("not.exist") //if this passes then throw an error!

任何有关如何做这个看似简单的事情的帮助将不胜感激。 谢谢！

Answer 1

https://docs.cypress.io/guides/core-concepts/retry-ability#Disable-retry

您可以将超时设置为 0 以禁用重试

所以你可以添加

cy.get("button", { timeout: 0 }).should("not.exist")

确保按钮不闪烁。

Answer 2

一种可能性是监视remove方法

let spy;
cy.get("button").then($button => {
  spy = cy.spy($button[0], 'remove')
})

cy.get("input").type("hello")
  .should(() => expect(spy).to.not.have.been.called)

---

如果您尝试进行可见性或存在性检查，您将面临错误结果的风险，因为该脚本将运行得非常快。

如果你想这样做，你可以控制时钟

// This passes if the remove/append runs

cy.clock()
cy.visit(...)

cy.get("input").type("h") // one letter only
cy.tick(20)                           // 10ms is default delay in .type()
cy.get('button').should('not.exist')  // clock is frozen part way through setTimeout
cy.tick(100)
cy.get('button').should('exist')      // clock has moved past setTimeout completion

// This checks the remove/append does not run

cy.clock()
cy.visit(...)

cy.get("input").type("h") // one letter only
cy.tick(20)
cy.get('button').should('exist')  // fails here if the button is removed
cy.tick(100)
cy.get('button').should('exist')