Javascript 如何等待列表中的每个元素使用cypress更新为特定文本

假设我有一个不同颜色的项目列表。如果我添加一个参数，该列表可以更新为仅列出蓝色项目。如何验证每个项目的正确性

cy.addParameter('blue'); //Will send graphQL query to fetch the correct items. 

cy.get('data li').each((item)=> {
         cy.wrap(item).should('have.text', ' blue ');
       });

---

这将失败，因为在我有可能检查每个项目之前，列表中的项目尚未更新。可以等待芬兰语的请求，但由于第一次运行后查询保存，“检查”在第二次运行时将不起作用

您必须编写一个递归承诺函数并自己检查颜色文本，请尝试以下操作

function checkColor(selector, color, maxWait, alreadyWaited = 0) {
  const waitTime = 500;
  // cy.get returns a thenebale
  return cy.get(selector).each((item)=> {
    // it checks the text right now, without unnecessary waitings
    if(!item.text() === color) {
      return false;
    }
    return true;
  }).then(result => {
    if(result) {
      // only when the condition passes it returns a resolving promise
      return Promise.resolve(true);
    }
    // waits for a fixed milliseconds amount
    cy.wait(waitTime);
    alreadyWaited++;
    // the promise will be resolved with false if the wait last too much
    if(waitTime * alreadyWaited > maxWait) {
      return Promise.reject(new Error('Awaiting timeout'))
    }
    // returns the same function recursively, the next `.then()` will be the checkColor function itself
    return checkColor(selector, color, maxWait, alreadyWaited);
  });
}

// then, in your test...
cy.addParameter('blue'); //Will send graphQL query to fetch the correct items. 
checkColor('data li', 'blue', 10000).then(result => {
  cy.get('data li').each((item)=> {
    cy.wrap(item).should('have.text', ' blue ');
  });
  // or
  expect(result).to.be(true);
});

我试图尽可能多地对代码进行注释，以重构我为一家公认的公司开发的代码

---

如果您需要更多帮助，请告诉我您必须编写一个递归承诺函数并自己检查颜色文本，请尝试以下操作

function checkColor(selector, color, maxWait, alreadyWaited = 0) {
  const waitTime = 500;
  // cy.get returns a thenebale
  return cy.get(selector).each((item)=> {
    // it checks the text right now, without unnecessary waitings
    if(!item.text() === color) {
      return false;
    }
    return true;
  }).then(result => {
    if(result) {
      // only when the condition passes it returns a resolving promise
      return Promise.resolve(true);
    }
    // waits for a fixed milliseconds amount
    cy.wait(waitTime);
    alreadyWaited++;
    // the promise will be resolved with false if the wait last too much
    if(waitTime * alreadyWaited > maxWait) {
      return Promise.reject(new Error('Awaiting timeout'))
    }
    // returns the same function recursively, the next `.then()` will be the checkColor function itself
    return checkColor(selector, color, maxWait, alreadyWaited);
  });
}

// then, in your test...
cy.addParameter('blue'); //Will send graphQL query to fetch the correct items. 
checkColor('data li', 'blue', 10000).then(result => {
  cy.get('data li').each((item)=> {
    cy.wrap(item).should('have.text', ' blue ');
  });
  // or
  expect(result).to.be(true);
});

我试图尽可能多地对代码进行注释，以重构我为一家公认的公司开发的代码

---

如果您需要更多帮助，请告诉我使用此测试代码从cypress获得的错误是什么？超时？否。由于列表是在我添加参数之前填充的，并且更新它需要几秒钟，因此cy.get（'data li'）。每个在更新之前都会在列表中进行迭代。是的，那么您从cypress得到的错误是什么？失败的断言？许多失败的断言？它说什么？它会说列表中并非所有项目都有蓝色文本。如果您提出了不同的解决方案，请让我们知道。。。如果这对你有帮助，请接受我的回答。对于寻找相同（或类似）答案的其他用户来说，这两种方法都非常有用。使用此测试代码，您从cypress得到了什么错误？超时？否。由于列表是在我添加参数之前填充的，并且更新它需要几秒钟，因此cy.get（'data li'）。每个在更新之前都会在列表中进行迭代。是的，那么您从cypress得到的错误是什么？失败的断言？许多失败的断言？它说什么？它会说列表中并非所有项目都有蓝色文本。如果您提出了不同的解决方案，请让我们知道。。。如果这对你有帮助，请接受我的回答。对于寻找相同（或类似）答案的其他用户来说，这两种方法都非常有用