如何解决Cypress自定义命令返回数组在测试中访问值为undefined的问题

1. 调整自定义命令代码 #

你需要在自定义命令的末尾明确return wrap后的数组，同时可以修正属性名匹配你预期的数组结构：

Cypress.Commands.add("getResultList", (keyWord, ...args) => {
  var listOfResults = [];
  cy.get('[class="result"]')
    .each((resultItem) => {
      var singleResult = {};
      // 获取名称
      cy.wrap(resultItem)
        .find('.name')
        .invoke("text")
        .then((val) => {
          const title = val.replaceAll("\n", "");
          singleResult.name = title; // 修正属性名，匹配你需要的`name`字段
        });
      // 获取价格
      cy.wrap(resultItem)
        .find('.price')
        .invoke("text")
        .then((val) => {
          const price = val.replaceAll("\n", "");
          singleResult.amount = price;
        });
      cy.then(() => {
        listOfResults.push(singleResult);
      });
    })
    .then(() => {
      cy.log(listOfResults);
      return cy.wrap(listOfResults); // 必须加return，将值传递给链式调用的下一级
    });
});

注意：如果你不需要keyWord这个入参，可以直接删掉，避免调用时参数传递错误。

2. 调整测试用例的调用方式 #

Cypress所有命令都是异步加入执行队列的，直接赋值拿到的是Cypress的链式调用对象，不是实际的执行结果，必须通过.then()回调才能拿到返回的数组：

// 拉取搜索结果页的所有数据并存储
cy.getResultList().then(resultList => {
  cy.log("length:" + resultList.length);
  // 所有需要使用resultList的逻辑都必须写在这个then回调内部
  // 示例断言：expect(resultList).to.deep.equal([{"name":"x","amount":"99"}, {"name":"y","amount":"88"}])
});

核心说明 #

• Cypress的命令不会同步执行，直接赋值获取不到真实返回结果是正常特性，官方推荐通过.then()的回调方式处理异步返回值
• 不建议使用async/await来处理Cypress命令返回，容易破坏内置的命令队列执行顺序，引发不可预期的错误

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