Cypress：如何使用点击处理程序处理等待元素

Question

我正在测试的代码有很多使用 href 标签呈现的

<a>

标签元素，但在页面加载后不久，就会给出一些执行不同操作的点击事件（例如打开模式）。 href 是一个后备，预期的行为是在点击事件中。

Cypress 对于页面的 JavaScript 来说通常速度太快，并且会在事件添加到元素之前单击元素。这会导致页面导航到默认的 href，而不是触发我想要测试的行为。下面是一个例子，我使用超时来模拟加载缓慢的 JS：

<a id="reveal_cats" href="https://http.cat" >
  Show me cats!
</a>

<div id="cats_div" style="display: none;">
  Cats!
</div>

<script>
  // Using a timeout to simulate a slow-loading JS file
  // that adds a click handler
  setTimeout(
    () => {
      console.log("Handler is added")
      $("#reveal_cats").on("click", function(e) {
        e.preventDefault();
        $("#cats_div").show()
      })
    }, 3000
  )
</script>

it("fails because the click handler isn't loaded yet", () => {
  cy.contains("a", "Show me cats!").click()
  // This fails because the event handler isn't loaded yet
  // so instead we've navigated to http.cat
  cy.get("#cats_div").should("be.visible")
})
it("passes, but uses an undesirably long hardcoded wait", () => {
  cy.contains("a", "Show me cats!").click()
  cy.wait(5000)
  cy.get("#cats_div").should("be.visible")
})

如何让 Cypress 等待处理程序加载？

我的第一个猜测是使用拦截来等待添加处理程序的JS文件，但文件名是随机生成的，所以它们不可靠。

我的第二个猜测是尝试对元素上的事件处理程序进行断言，但我没有看到相应的标准断言。我想也许我可以使用 jQuery 实用程序在

then()

块中查找侦听器，但我不认为如果第一次尝试时未找到事件，那么会正确重试。

到目前为止我发现的唯一有效的解决方案是硬编码等待......

Answer 1

试试这个：