Cypress如何等待带点击处理器的元素加载完成？

我测试的页面中有大量<a>标签，初始渲染时带有href属性作为降级方案，页面加载后会动态添加点击事件（比如打开模态框），预期行为由点击事件实现。但Cypress执行速度比页面JS快，经常在点击事件绑定完成前就点击元素，导致页面跳转到href指向的地址，无法触发预期的测试行为。

模拟场景代码 #

HTML代码：

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

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

<script>
  // 用定时器模拟JS文件慢加载，延迟添加点击处理器
  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()
  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")
})

解决方案 #

方案1：自定义断言等待事件绑定（推荐）

利用Cypress的自动重试机制，结合jQuery的内部方法检查元素是否绑定了点击事件，直到条件满足再执行点击。

it('等待点击处理器加载后再执行点击', () => {
  cy.contains('a', 'Show me cats!')
    .should($a => {
      // 获取元素上绑定的click事件列表
      const clickEvents = $._data($a[0], 'events')?.click
      // 断言事件存在且数量大于0
      expect(clickEvents).to.exist
      expect(clickEvents.length).to.be.greaterThan(0)
    })
    .click()
  
  cy.get('#cats_div').should('be.visible')
})

说明：如果项目用原生JS绑定事件，可替换为getEventListeners($a[0]).click（注意浏览器兼容性），should()会自动重试直到断言成立，无需硬编码等待时间。

方案2：临时阻止默认跳转，避免提前跳走

如果担心事件未绑定前点击导致跳转，可以先给元素添加临时的默认行为拦截，等真实处理器绑定完成后再移除并点击。

it('临时拦截跳转，等待真实处理器加载', () => {
  cy.get('#reveal_cats')
    // 添加临时preventDefault，避免提前跳转
    .invoke('on', 'click', e => e.preventDefault())
    // 等待真实的点击处理器绑定（通过判断处理器内容）
    .should($a => {
      const realHandlers = $._data($a[0], 'events')?.click?.filter(handler => 
        handler.handler.toString().includes('e.preventDefault()')
      )
      expect(realHandlers).to.have.length(1)
    })
    // 移除临时处理器
    .invoke('off', 'click', e => e.preventDefault())
    .click()
  
  cy.get('#cats_div').should('be.visible')
})

方案3：监听控制台日志（适合有调试日志的场景）

如果页面在事件处理器加载完成后会输出特定日志（比如示例中的Handler is added），可以监听控制台消息来触发等待。

it('通过控制台日志等待处理器加载', () => {
  // 监听控制台，当出现目标日志时触发自定义事件
  cy.window().then(win => {
    cy.stub(win.console, 'log').callsFake(msg => {
      if (msg === 'Handler is added') {
        win.dispatchEvent(new CustomEvent('handler-added'))
      }
    })
  })
  
  // 等待自定义事件触发，确认处理器已加载
  cy.window().should('have.event', 'handler-added')
  
  cy.get('#reveal_cats').click()
  cy.get('#cats_div').should('be.visible')
})

总结 #

优先选择方案1，它直接基于元素的事件状态等待，逻辑简洁且可靠，完全避免了硬编码等待的弊端。如果项目有特定的加载信号（如控制台日志、自定义事件），方案3也是高效的选择。

内容的提问来源于stack exchange，提问作者DukeSilver