Return 来自 cypress 自定义命令的数组值并从测试中访问它

Question

正在赛普拉斯自定义命令中检索以下值，

listOfResults = [{"name":"x","amount":"99"}, {"name":"y","amount":"88"}]

命令是，

Cypress.Commands.add("getResultList", (keyWord, ...args) => {
  var listOfResults = [];
  cy.get('[class="result"]')
    .each((resultItem) => {
      var singleResult = {};
      //Retrive Title
      cy.wrap(resultItem)
        .find('.name')
        .invoke("text")
        .then((val) => {
          const title = val.replaceAll("\n", "");
          singleResult.title = title;
        });
      //Retrive price
      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);//prints. correctly
      cy.wrap(listOfResults); 
      //tried also return cy.wrap(listOfResults);
    });
});

在测试中，我正在尝试访问和存储它。

//fetch all data in Search Results page and store it
      var resultList = cy.getResultList();
      cy.log("length:" + resultList.length);

但它没有被存储并且 resultList.length 记录 undefined。我们怎样才能使命令 return 成为一个值？

Answer 1

我觉得加两个returns就可以了,

Cypress.Commands.add("getResultList", (keyWord, ...args) => {
  var listOfResults = [];
  return cy.get('[class="result"]')
    .each((resultItem) => {
      var singleResult = {};
      //Retrive Title
      cy.wrap(resultItem)
        .find('.name')
        .invoke("text")
        .then((val) => {
          const title = val.replaceAll("\n", "");
          singleResult.title = title;
        });
      //Retrive price
      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);//prints. correctly
      cy.wrap(listOfResults); 
      return cy.wrap(listOfResults); // this modifies the outer return
    });
});

必须像任何命令一样在 .then() 的测试中使用

cy.getResultList(keyword).then(resultList => {
  ...

为了更好地说明 Alapan 提出的观点，在自定义命令中会自动返回上一个命令的结果。

所以这是您的命令所需的最低限度

Cypress.Commands.add("getResultList", (keyWord, ...args) => {
  var listOfResults = [];
  cy.get('[class="result"]')
    .each((resultItem) => {
      var singleResult = {};
      //Retrive Title
      cy.wrap(resultItem)
        .find('.name')
        .invoke("text")
        .then((val) => {
          const title = val.replaceAll("\n", "");
          singleResult.title = title;
        });
      //Retrive price
      cy.wrap(resultItem)
        .find('.price')
        .invoke("text")
        .then((val) => {
          const price = val.replaceAll("\n", "");
          singleResult.amount = price;
        });
      cy.then(() => {
        listOfResults.push(singleResult);
      });
    })

  cy.wrap(listOfResults)  // last command, Cypress returns this

});

Answer 2

在自定义命令中你必须做：

return cy.wrap(listOfResults)

那么在你的测试中：

cy.getResultList(keyWord, ...args).then((listOfResults) => {
  //Do something here with listOfResults
})

由于 wrap() 返回 Cypress.Chainable，我们可以在命令中调用 .then()。

Return 来自 cypress 自定义命令的数组值并从测试中访问它

Return an array value from cypress custom command and access it from test

cypress