在Cypress的for循环中执行cy.request出现重复ID错误如何解决

问题根源 #

• Cypress 所有命令都是异步入队执行的：同步for循环会先全部执行完毕，才会开始执行队列里的cy.request调用
• 原代码复用了同一个item对象（JS中对象为引用类型），循环结束时item.id已经累加到了itemCount的值，所有入队的cy.request最终读取这个对象时，拿到的都是同一个最终ID，因此出现ID重复报错
• 额外问题：原代码中item: { xxx }的写法是JS标签语法，并未正确声明item变量，也是潜在隐患

最简实现方案 #

使用Array.reduce自动拼接命令链，无需手动嵌套then，保持代码简洁可读：

function createSomeItems(itemCount, headers) {
  // 用Cypress内置的Lodash times方法生成指定长度的序号数组，简化循环写法
  return Cypress._.times(itemCount).reduce((prevChain, index) => {
    // 每次循环生成独立的新item对象，避免引用共享导致的取值错误
    const currentItem = {
      id: index,
      field1: 123,
      field2: "test text!"
    };
    // 在上一个请求链的基础上拼接当前请求
    return prevChain.then(() => 
      cy.request({
        method: 'POST',
        url: '/create-item',
        body: currentItem,
        headers: headers
      })
    );
  }, cy.wrap(null)); // 传入空Cypress链作为reduce的初始值
}

用法说明 #

• 该函数返回的是完整的Cypress命令链，测试用例中可以直接像普通Cypress命令一样链式调用后续逻辑：

  // 测试用例示例
  it('批量创建10个条目', () => {
    const testHeaders = { 'Content-Type': 'application/json' };
    createSomeItems(10, testHeaders).then(() => {
      // 后续断言逻辑
      cy.visit('/item-list');
      cy.get('.item-row').should('have.length', 10);
    });
  });
  

• 所有请求会按顺序自动执行，不存在并发冲突，适配绝大多数测试场景

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