如何用Cypress等待iframe加载？解决cy.wait()导致测试缓慢问题

固定cy.wait()确实会拖慢测试速度，尤其是多个用例重复执行时。你可以通过监听iframe的加载状态或者封装自定义命令来实现动态等待，只会在iframe真正加载完成后才继续执行测试。

方法1：直接在测试中等待iframe加载完成 #

利用Cypress的断言机制，检查iframe的readyState是否为complete，确保页面资源全部加载完毕：

// 定位到目标iframe，等待其加载完成
cy.get('iframe#target-frame') // 替换成你的iframe选择器
  .should(($iframe) => {
    // 获取iframe的window对象
    const frameWindow = $iframe[0].contentWindow
    // 断言文档已完全加载
    expect(frameWindow.document.readyState).to.equal('complete')
  })

如果需要操作iframe内部的元素，后续可以链式调用：

cy.get('iframe#target-frame')
  .should(($iframe) => {
    expect($iframe[0].contentWindow.document.readyState).to.equal('complete')
  })
  .then(($iframe) => {
    // 切换到iframe上下文操作内部元素
    cy.wrap($iframe[0].contentDocument.body)
      .find('.inner-element')
      .should('be.visible')
  })

方法2：封装自定义命令（适合多测试用例复用） #

如果多个测试都需要等待同一个或多个iframe，可以在cypress/support/commands.js中封装一个可复用的命令：

// 自定义等待iframe加载的命令
Cypress.Commands.add('waitForFrame', (selector) => {
  return cy.get(selector).then(($iframe) => {
    const frameWindow = $iframe[0].contentWindow
    // 判断当前是否已加载完成，未完成则监听load事件
    return new Cypress.Promise((resolve) => {
      if (frameWindow.document.readyState === 'complete') {
        resolve(frameWindow)
      } else {
        $iframe.on('load', () => {
          resolve(frameWindow)
        })
      }
    })
  })
})

之后在测试用例中直接调用：

// 等待iframe加载完成，然后操作内部元素
cy.waitForFrame('iframe#target-frame').then((frameWindow) => {
  cy.wrap(frameWindow.document)
    .find('.inner-button')
    .click()
})

补充：处理iframe内部的异步内容 #

如果iframe内部还有异步加载的资源（比如接口请求渲染的内容），可以在等待iframe加载完成后，进一步等待目标元素出现：

cy.waitForFrame('iframe#target-frame').then((frameWindow) => {
  cy.wrap(frameWindow.document)
    .find('.async-rendered-content')
    .should('exist') // 等待元素出现
})

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