Cypress如何不使用cy.wait()点击延迟加载iframe内的目标元素

方案1：优化自定义getIframeBody命令（推荐） #

原命令仅校验body非空，无法保证iframe内部DOM渲染完成，优化后代码如下：

Cypress.Commands.add('getIframeBody', (waitSelector = null) => {
  return cy.get('iframe.cy-external-link-container')
    // 先确保iframe资源加载完成
    .its('0.contentDocument').should('have.property', 'readyState', 'complete')
    .its('body').should('not.be.empty')
    .then(body => {
      // 传入需要等待的目标选择器时，先等元素渲染完成再返回
      if (waitSelector) {
        cy.wrap(body).find(waitSelector).should('exist')
      }
      return cy.wrap(body)
    })
})

调用方式：

• 需要等待特定元素渲染时，直接传入选择器即可：

  // 会自动等待#some-button渲染完成再返回body，后续可直接操作元素
  cy.getIframeBody('#some-button').find('#some-button').click()
  

方案2：无需修改原有命令，调用时增加显式断言 #

利用Cypress内置的命令重试机制，直接在find后加等待断言：

cy.getIframeBody()
  // 可通过timeout参数自定义最长等待时间，单位为毫秒
  .find('#some-button', { timeout: 10000 })
  .should('exist')
  // 后续元素操作逻辑
  .click()

两种方案均未使用硬等待cy.wait()，适配不同渲染时长的iframe场景，稳定性更高。

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