Cypress文件上传场景下如何循环刷新校验已处理文件替代固定等待

最优方案是将校验逻辑封装为 Cypress 自定义命令，既可以全局复用，也符合Cypress的异步执行规则，避免硬编码固定等待时间。

第一步：注册自定义命令 #

在cypress/support/commands.js中添加如下代码：

// 自定义命令：检查已处理文件是否存在，支持循环重试
Cypress.Commands.add('checkProcessedFileExists', (filename, maxTimeout = 30000) => {
  // 计算超时截止时间
  const deadline = Date.now() + maxTimeout;

  // 递归实现重试逻辑
  const checkFile = () => {
    // 先检查当前页面是否存在目标文件
    cy.get('[data-render-row-index="1"] > [data-col-index="1"]').then($col => {
      if ($col.text().includes(filename)) {
        // 找到文件，直接返回
        return cy.wrap(true);
      }

      // 未找到时判断是否超时
      if (Date.now() > deadline) {
        throw new Error(`等待文件【${filename}】处理完成超时，最长等待时间${maxTimeout}ms`);
      }

      // 按要求执行重试步骤
      cy.wait(1000) // 暂停1秒
        .get('#reload-btn') // 替换为你实际的重载按钮选择器
        .click() // 点击重载
        .get('.busy-spinner')
        .should('not.exist', { timeout: 10000 }) // 等待加载完成
        .then(checkFile); // 递归再次检查
    })
  };

  // 首次访问处理文件页面后启动检查
  cy.visit('/processed-files').then(checkFile);
})

注意：代码中的#reload-btn需要替换为你实际页面上重载数据按钮的选择器。

第二步：替换原有测试逻辑 #

原来的固定等待代码直接替换为调用自定义命令即可：

cy.visit('/')
cy.get('.busy-spinner').should('not.exist', { timeout: 10000 })
cy.contains('Submit file').click()
cy.get('[id="requestinputFile"]').attachFile('test-file.txt');
cy.contains('Upload').click()
cy.contains('.notifications', 'Your file has been uploaded', { timeout: 10000 })
// 替换原来的固定等待+页面访问+检查逻辑
cy.checkProcessedFileExists('test-file.txt')
// 后续逻辑直接接在后面即可

方案优势 #

• 无多余等待：文件处理完成后立刻执行后续逻辑，不会浪费时间
• 可靠性更高：最长30秒超时覆盖所有极端情况，重试逻辑完全匹配需求
• 复用性强：任意需要检查处理文件的场景，直接调用cy.checkProcessedFileExists(文件名)即可，无需重复写逻辑

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