如何在Cypress中每次调用visit时强制重载直到DOM根元素非空？

不需要编写独立的Cypress插件，直接在全局support文件中覆写内置cy.visit命令即可实现需求，逻辑轻量且无额外依赖。

实现步骤 #

• 打开项目中的Cypress全局支持文件，对应路径为cypress/support/e2e.js（Cypress 10+版本），旧版本对应路径为cypress/support/index.js
• 在文件中添加如下命令覆写逻辑，会在每次cy.visit页面加载完成后自动校验根节点内容，校验失败自动触发重载，直到内容正常或达到最大重试次数：

// 可根据项目实际情况调整配置
const ROOT_SELECTOR = '#root' // React应用默认挂载节点，按需替换
const MAX_RETRY_COUNT = 5 // 最大重载次数，避免无限循环
const RETRY_WAIT = 300 // 每次重载后等待时长，单位毫秒

Cypress.Commands.overwrite('visit', (originalVisit, url, options = {}) => {
  // 保留原visit方法的所有参数和逻辑
  return originalVisit(url, options).then(() => {
    let currentRetry = 0

    const checkRootContent = () => {
      const rootNode = Cypress.$(ROOT_SELECTOR)
      // 校验规则：根节点存在、有子元素、非空文本
      const isRootValid = rootNode.length 
        && rootNode.children().length > 0 
        && rootNode.text().trim().length > 0

      if (isRootValid) return

      currentRetry += 1
      if (currentRetry > MAX_RETRY_COUNT) {
        throw new Error(`页面重载${MAX_RETRY_COUNT}次后根节点仍为空，疑似第三方库竞态问题持续触发`)
      }

      cy.wait(RETRY_WAIT)
      cy.reload().then(checkRootContent)
    }

    checkRootContent()
  })
})

配置说明 #

• 若项目React挂载节点不是默认的#root，直接修改ROOT_SELECTOR为实际使用的选择器即可，例如部分项目使用#app作为挂载节点
• 若CI环境网络波动较大，可适当调大MAX_RETRY_COUNT和RETRY_WAIT数值，降低误判概率
• 该逻辑仅在硬加载（cy.visit触发的页面跳转）时生效，若需要覆盖前端路由软跳转的场景，可额外添加对路由变化事件的监听，复用上述checkRootContent校验逻辑即可。目前方案已经可以覆盖第三方库首屏加载竞态导致React渲染失败的场景。

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