Cypress如何无需显式等待准确检测动态iframe加载完成

你之前的断言提前通过，核心原因是：iframe标签被插入DOM后，哪怕内部资源还没开始加载、跨域握手还没完成，浏览器就会先生成空的contentDocument对象和空的body节点。这两个节点本身就符合not.be.empty（节点存在）、be.visible（节点默认无隐藏样式、宽高正常）的判定规则，根本卡不住真实的内容加载状态，硬加cy.wait(10000)本质是赌10秒内iframe能加载完，既拖慢测试速度，遇到网络波动时还会直接失效。

不要依赖固定等待，直接基于浏览器原生的iframe加载状态标识做断言，自定义命令参考如下实现：

Cypress.Commands.add('getIframe', (iframeLocator: string) => {
  return cy
    .get(iframeLocator)
    .should(($iframe) => {
      const iframeEl = $iframe[0] as HTMLIFrameElement
      // 基础校验：iframe的文档、窗口对象已完成初始化
      expect(iframeEl.contentDocument).to.not.be.null
      expect(iframeEl.contentWindow).to.not.be.null
      // 核心判定：iframe内部文档的加载状态为完成
      expect(iframeEl.contentDocument.readyState).to.eq('complete')
    })
    .then(($iframe) => {
      const $iframeBody = $iframe.contents().find('body')
      // 校验body可见
      expect($iframeBody).to.be.visible
      // 【可选但强烈建议】根据你的业务场景，加一行iframe加载完成后必然存在的元素断言，适配iframe内部异步渲染的场景
      // 例：expect($iframeBody.find('#app-root')).to.exist
      return cy.wrap($iframeBody)
    })
})

• 如果你的iframe是跨域加载的，需要在Cypress配置文件中设置chromeWebSecurity: false，否则会因为浏览器同源策略限制无法访问iframe的contentDocument，直接抛错。
• 不要只依赖load事件做判断：部分场景下事件绑定时机晚于iframe加载完成，会导致监听不到事件一直超时；直接轮询判断contentDocument.readyState会自动覆盖「已经加载完成」和「等待加载完成」两种场景，稳定性更高。
• 如果iframe内部是单页应用，readyState === 'complete'只能代表静态资源加载完成，建议一定要加业务侧的根元素存在断言，才能准确判定内部应用已经渲染完成，可以进行后续交互。

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