javascript - 如何使用柏树将多个元素的值存储在数组列表中的一个根元素下

Question

对于以下类似结构的结果

<div class="results">
  <div class="result">
    <div class="name">x</div>
    <div class="price">99</div>
  </div>
<div class="result">
    <div class="name">y</div>
    <div class="price">88</div>
  </div>
</div>

我想存储在这样的数组列表中

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

在 cypress 中，我在 cypress 中有以下代码，但它打印为 null，我不知道如何解决它？

let listOfResults = [];
let singleResult = {};
  cy.get('[class="results"]').each((resultItem) => {
    singleResult = {};

    //Retrive name
    cy.wrap(resultItem)
      .find('div[class$="name"]')
      .invoke("text")
      .then((val) => {
        cy.log("singleResult value for Title:" + val);
        singleResult["title"] = val;
        cy.log("singleResult::" + JSON.stringify(singleResult));//prints correctly
      });

   
    //Retrive price
    cy.wrap(resultItem)
      .find('div[class$="amount"]')
      .invoke("text")
      .then((val) => {
        cy.log("singleResult value for Title:" + val);
        singleResult["amount"] = val;
        cy.log("singleResult::" + JSON.stringify(singleResult));  //prints correctly          
      });
 });

 listOfResults.push(JSON.stringify(singleResult)); //singleResult became blank

 cy.log("list:" + JSON.stringify(listOfResults));

标签： javascriptcypress

Answer 1

.then()由于赛普拉斯命令是异步的，因此您必须在提取器之后包装代码。

let listOfResults = [];
let singleResult = {};
cy.get('[class="results"]')
  .each((resultItem) => {
    ...
  })
  .then(() => {
    listOfResults.push(JSON.stringify(singleResult)); 
    cy.log("list:" + JSON.stringify(listOfResults));
  })

当你调用它时，它总是在测试运行之前cy.log()取它的值，除非它在​​. 如此见空。.then()cy.log("list:" + JSON.stringify(listOfResults))listOfResults

还有三件事：

迭代类=“结果”

cy.get('[class="results"]')应该是cy.get('[class="result"]')因为 class="results"是整体的div，但你想迭代class="result"div（假设你的删减的 HTML 是准确的）

推入 .each()

listOfResults.push(JSON.stringify(singleResult))应该在里面，.each()因为你正在推动每次迭代的 singleResult。但是您还需.then()要这样做，以确保在填充 singleResult后推送（与上述相同的问题，异步命令）。

不要字符串化

您不需要对日志进行字符串化，只需添加一个逗号。这样你就可以保持对象结构更容易/更好的向下测试使用。

const listOfResults = [];
// let singleResult = {};  // don't need this here

cy.get('[class="results"]').each((resultItem) => {

  const singleResult = {};   // declare it fresh each iteration

  //Retrive name
  cy.wrap(resultItem)
    .find('div[class$="name"]')   // also 'div.name'
    .invoke("text")
    .then((val) => {
      cy.log("singleResult value for Title:" + val);
      singleResult["title"] = val;
      cy.log("singleResult::", singleResult);
    });

  //Retrive price
  cy.wrap(resultItem)
    .find('div[class$="amount"]')  // also 'div.amount'
    .invoke("text")
    .then((val) => {
      cy.log("singleResult value for Title:" + val);
      singleResult["amount"] = val;         
      cy.log("singleResult::", singleResult);
    });

  // Now push to list
  cy.then(() => {
    listOfResults.push(singleResult)
  })
})
.then(() => {
  cy.log("list:", listOfResults);
})

或使用别名

const listOfResults = [];
cy.get('[class="result"]').each((resultItem) => {
  ...
})
.then(() => {
  cy.wrap(listOfResults').as('listOfResults')  // save for later in the test
})

// later on  
cy.get('@listOfResults')
  .then(listOfResults => {
    cy.log("list:", listOfResults) // logs the value of parameter
                                   // not the outer listOfResults
  })