Cypress多次执行type命令时POST XHR请求拖慢测试速度如何解决

问题根源 #

1. 每次type操作触发的自动保存类POST请求会被Cypress默认纳入等待队列，请求随循环次数积压后耗时线性叠加
2. 代码中的cy.wait(4000)硬等待是核心耗时来源，100次循环仅硬等待就累计超过400秒
3. 原生for循环嵌套each全表遍历的逻辑，会重复查询DOM、一次性推入大量异步命令导致队列过载
4. 原代码存在语法错误：cy.get(.model_type)缺少选择器引号，需修正为cy.get('.model_type')

测试场景参考 #

解决方案 #

• 1. 拦截无用POST请求消除网络耗时 #

  对于不影响测试逻辑的自动保存类请求，直接拦截并模拟返回，不让真实请求发送，从根源消除网络等待开销。若需要验证请求正确性，可选择批量等待而非每次输入都等待。

  // 测试用例开头提前拦截目标POST，替换为你实际的请求路径规则
  cy.intercept('POST', '/api/autosave/**', {
    statusCode: 200,
    body: { success: true }
  }).as('autoSaveReq')
  

• 2. 替换硬等待为条件等待，优化输入速度 #

  移除固定4秒硬等待，改为等待目标元素可交互后再操作；给type添加delay: 0配置，取消默认逐字符输入间隔，输入效率可提升10倍以上。
  优化后的核心操作代码：

  // 提前筛选所有内容为空的行，避免每次循环全表遍历
  cy.get('tr:has(td:empty)').each(($tr) => {
    cy.wrap($tr).find('td').eq(5).click({force: true})
    // 等待输入框可交互，替代硬等待
    cy.get('.model_type').should('be.enabled')
      .type('Smth', { delay: 0 })
    // 仅当需要验证请求成功时开启等待，否则可省略
    // cy.wait('@autoSaveReq', { timeout: 2000 })
  })
  

• 3. 优化循环逻辑避免命令队列过载 #

  原生for循环会一次性把100次迭代的所有命令推入队列，易导致内存占用过高、后续执行变慢。建议改用递归方式实现循环，每轮执行完再推入下一轮命令：

  // 递归实现100次循环
  function runLoop (count = 0) {
    if (count >= 100) return
    // 单次循环的操作逻辑
    cy.get('tr:has(td:empty)').each(($tr) => {
      cy.wrap($tr).find('td').eq(5).click({force: true})
      cy.get('.model_type').should('be.enabled').type('Smth', { delay: 0 })
    }).then(() => {
      runLoop(count + 1)
    })
  }
  // 启动循环
  runLoop()
  

• 4. 调整配置缩短请求超时 #

  如果必须保留真实请求，可在cypress.config.js中调整配置，减少网络请求默认超时时间：

  const { defineConfig } = require('cypress')
  module.exports = defineConfig({
    e2e: {
      requestTimeout: 2000,
      defaultCommandTimeout: 5000
    }
  })
  

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